GridEditorSourcePieceMaker.vue 4.2 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
<template lang="pug">
  q-list.piecemaker-source-container

    q-list-header
      template(v-if="currentTimeline")
        q-btn(flat, round, small, style="margin-right: 0.5em",
          @click="handleClickUnsetCurrentTimeline", icon="keyboard backspace")
        span Videos in Timeline #[strong {{currentTimeline.title}}]
      template(v-else)
        router-link(:to="{name: 'piecemaker.timelines.list'}") Piecemaker Timelines

    q-item-separator

    // timeline
    template(v-if="currentTimeline")

      // loading, nothing here
      template(v-if="currentVideos.length === 0")
        template(v-if="loadingVideos")
          q-item
            q-item-side
              q-spinner(style="margin-right: 1em")
            q-item-main Loading Videos
        template(v-else)
          q-item No Videos Found!

      // videos, annotations
      template(v-else)
        template(v-for="(entry, i) in currentVideos")
          template(v-if="i > 0")
            q-item-separator
          q-item.video-item
            q-item-side
              q-icon(
                draggable="true",
Anton's avatar
Anton committed
36
                @dragstart.native="event => {handleItemDragStart(event, entry.annotation, 'CellVideo')}",
Anton's avatar
Intial  
Anton committed
37
38
39
                name="local movies", style="font-size: 1.8rem")
              q-icon(
                draggable="true",
Anton's avatar
Anton committed
40
                @dragstart.native="event => {handleItemDragStart(event, entry.annotation, 'CellAnnotationList')}",
Anton's avatar
Intial  
Anton committed
41
42
                name="comment", style="font-size: 1.8rem")
            q-item-main
43
              a(@click.prevent="event => {handleVideoItemClick(event, entry.annotation)}") {{entry.title || entry.annotation._uuid}}
Anton's avatar
Intial  
Anton committed
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

    // timelines list
    template(v-else)
      template(v-for="(timeline, i) in timelines")
        template(v-if="i > 0")
          q-item-separator
        q-item
          q-item-side
            q-icon(name="list", style="font-size: 1.8rem")
          q-item-main
            a(@click.prevent="event => {handleTimelineItemClick(event, timeline)}") {{timeline.title}}
</template>

<script>
  import constants from 'mbjs-data-models/src/constants'

  export default {
    data () {
      return {
        timelines: [],
        currentTimeline: null,
        currentVideos: [],
        loadingVideos: false
      }
    },
    mounted () {
      const _this = this
71
      this.$store.dispatch('maps/find', { type: constants.mapTypes.MAP_TYPE_TIMELINE })
Anton's avatar
Intial  
Anton committed
72
73
74
75
76
77
78
79
80
81
82
83
        .then(maps => {
          if (maps.items) _this.timelines = maps.items
        })
    },
    methods: {
      async handleTimelineItemClick (events, timeline) {
        this.currentTimeline = timeline
        this.currentVideos = []
        this.loadingVideos = true
        const query = {
          type: 'Annotation',
          'body.purpose': 'linking',
84
          'body.type': 'Video',
Anton's avatar
Intial  
Anton committed
85
86
87
88
89
90
          'target.id': this.currentTimeline.id
        }
        const result = await this.$store.dispatch('annotations/find', query)
        const videos = result.items
        const entries = []
        for (let annotation of videos) {
91
92
93
94
95
96
97
          let meta = {}
          try {
            meta = await this.$store.dispatch('metadata/get', annotation)
          }
          catch (e) {
            console.error('Failed to fetch metadata', e.message)
          }
Anton's avatar
Intial  
Anton committed
98
99
100
101
102
103
104
105
106
107
108
109
110
          const entry = { annotation }
          entry.title = meta.title || this.$t('labels.title_unknown')
          entries.push(entry)
        }
        this.currentVideos = entries
        this.loadingVideos = false
      },
      handleClickUnsetCurrentTimeline () {
        this.currentTimeline = null
        this.currentVideos = []
      },
      handleVideoItemClick () {
      },
Anton's avatar
Anton committed
111
112
113
114
115
116
117
118
119
      handleItemDragStart (event, item, component = 'CellVideo') {
        const resourceCell = {
          component,
          config: {},
          data: {
            id: item.id,
            sourceUuid: item._uuid,
            content: component === 'CellVideo' ? item.body.source.id : item._uuid
          }
Anton's avatar
Intial  
Anton committed
120
        }
Anton's avatar
Anton committed
121
        event.dataTransfer.setData('text/plain', JSON.stringify(resourceCell))
Anton's avatar
Intial  
Anton committed
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
      }
    }
  }
</script>

<style scoped lang="stylus">

  .piecemaker-source-container
    overflow auto

  .video-item

    .q-item-side
      width 20%

      .q-icon
        width 30px

    .q-item-main
      width 100%

</style>