GridEditorSourceYouTube.vue 3.39 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
74
75
76
77
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template lang="pug">

  q-list.youtube-source-container

    q-list-header
      q-input(v-model="searchTerm")

    q-item-separator

    // loading, nothing here
    template(v-if="loadingVideos")
      q-item
        q-item-side
          q-spinner(style="margin-right: 1em")
        q-item-main Loading videos for »{{lastSearchTerm}}«
      q-item-separator
    template(v-else-if="searchResults.length === 0")
      q-item No Videos Found!

    // videos, annotations
    template(v-if="searchResults.length > 0")
      template(v-for="(video, i) in searchResults")
        template(v-if="i > 0")
          q-item-separator
        q-item(draggable="true", @dragstart.native="event => {handleVideoItemDragStart(event, video)}")
          q-item-side
            template(v-if="video.snippet.thumbnails.default")
              img(:src="video.snippet.thumbnails.default.url", style="width: 100%; max-width: 50px")
            template(v-else)
              q-icon(name="local movies", style="font-size: 1.8rem")
          q-item-main
            a(@click.prevent="event => {handleVideoItemClick(event, video)}") {{video.snippet.title.substring(0, 100)}}

</template>

<script>
  const YOUTUBE_API_KEY = 'AIzaSyCMfeZXhTec0elm19N_2TTBHNZR2hpl-5Q'
  const apiBase = 'https://www.googleapis.com'
  const apiSearchVideos = '/youtube/v3/search'

  export default {
    data () {
      return {
        searchTerm: '',
        searchResults: [],
        loadingVideos: false,
        lastSearchTerm: ''
      }
    },
    watch: {
      searchTerm () {
        if (!this.loadingVideos) {
          this.loadVideos()
        }
      }
    },
    methods: {
      loadVideos () {
        const _this = this
        if (this.searchTerm.length >= 3) {
          this.loadingVideos = true
          this.lastSearchTerm = this.searchTerm
          // TODO: check if change from superagent to axios plugin is breaking
          this.$axios
            .get(apiBase + apiSearchVideos, {
              params: {
                q: this.searchTerm,
                part: 'snippet',
                maxResults: 30,
                key: YOUTUBE_API_KEY
              }
            })
            .then(results => {
              _this.searchResults = results.data.items
              _this.checkNewSearchTerm()
            })
            .catch(() => {
              console.log('Failed to load YouTube results for', _this.searchTerm)
              _this.checkNewSearchTerm()
            })
        }
        else if (this.searchTerm.length === 0) {
          this.searchResults = []
          this.lastSearchTerm = ''
        }
      },
      checkNewSearchTerm () {
        if (this.searchTerm !== this.lastSearchTerm) {
          this.loadVideos()
        }
        else {
          this.loadingVideos = false
        }
      },
      handleVideoItemClick () {
      },
      handleVideoItemDragStart (event, video) {
        let videoCell = {
          uuid: null,
          type: 'Video',
          x: 1,
          y: 1,
          width: 1,
          height: 1,
          content: 'https://www.youtube.com/watch?v=' + video.id.videoId
        }
        event.dataTransfer.setData('text/plain', JSON.stringify(videoCell))
      }
    }
  }
</script>

<style scoped lang="stylus">

  .q-list-header
    padding-left 0

    .q-input
      padding-left 1em
      padding-right 1em

    .q-input:before
    .q-input:after
      display none

  .q-input
    padding-left 0

</style>