CellVideo.vue 2.82 KB
Newer Older
Anton's avatar
Intial  
Anton committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template lang="pug">

  div(:class="{'display-preview': preview, 'display-full': display}")
    template(v-if="display")
      video-player(
        :src="video.body || fauxVideo.source",
        @ready="handlePlayerReady",
        @play="handlePlayerPlaying",
        @time="handlePlayerTimeChange")

    template(v-else)
      strong Video Cell

</template>

<script>
  import { VideoPlayer } from '../../../shared'

  export default {
    components: {
      VideoPlayer
    },
    props: ['cell', 'display', 'preview', 'messenger'],
    data () {
      return {
        video: {},
        videoTime: -1,
        player: {}
      }
    },
    computed: {
      fauxVideo () {
        let fauxVideoAnnotation = {
          type: 'Video',
          purpose: 'linking',
          source: this.cell['content']
        }
        return fauxVideoAnnotation
      },
      videoSrcType () {
        if (this.videoSrc.indexOf('youtube.com') >= 0) return 'video/youtube'
        else return 'html5'
      }
    },
    mounted () {
      const _this = this
      if (this.cell.sourceUuid) {
        this.$store.dispatch('annotations/find', { uuid: this.cell.sourceUuid })
          .then(result => {
            const video = result.items.shift()
            if (video) {
              _this.video = video
              _this.videoTime = Date.parse(video.target.selector.value)
              _this.contextTime = _this.videoTime
            }
          })
      }
      if (this.display && this.messenger) {
        this.messenger.$on('annotation-trigger', (annotation, annotationGlobalTime) => {
          if (_this.video.target &&
              annotation.target.id === _this.video.target.id) {
            const movieTime = (annotationGlobalTime - _this.videoTime) / 1000.0
            if (typeof movieTime === 'number' &&
              movieTime >= 0 && _this.player) {
              _this.player.currentTime(movieTime)
            }
          }
        })
      }
    },
    methods: {
      getSignature () {
        if (this.video) {
Anton's avatar
Anton committed
74
          return { origin: this.video, type: 'Video' }
Anton's avatar
Intial  
Anton committed
75
76
        }
        else {
Anton's avatar
Anton committed
77
          return { origin: this.cell, type: '2DCell' }
Anton's avatar
Intial  
Anton committed
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
        }
      },
      handlePlayerReady (player) {
        this.messenger.$emit('video-loaded', this.getSignature())
        this.player = player
      },
      handlePlayerPlaying () {
        this.messenger.$emit('video-started-playing', this.getSignature())
      },
      handlePlayerTimeChange (localTime) {
        let globalTime = Date.now()
        if (this.videoTime) {
          globalTime = this.videoTime + (localTime * 1000.0)
        }
        this.messenger.$emit('video-time-changed', localTime, globalTime, this.getSignature())
      }
    }
  }
</script>

<style scoped lang="stylus">

  div.display-full
    background-color white

  div.display-preview
    padding 1em
    color #666

</style>