Merge branch 'dev'

TheConnMan · Feb 27, 2017 · da5c8b7 · da5c8b7
2 parents bfa7745 + 072f854
commit da5c8b7
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 14 deletions.
diff --git a/api/services/YouTubeService.js b/api/services/YouTubeService.js
@@ -2,8 +2,14 @@ const Promise = require('promise');
 const request = require('request');
 const moment = require('moment');
 const log4js = require('log4js');
+const Youtube = require("youtube-api");
 const logger = log4js.getLogger();
 
+Youtube.authenticate({
+  type: 'key',
+  key: process.env.GOOGLE_API_KEY
+});
+
 module.exports = {
   parseYouTubeLink,
   getYouTubeVideo,
@@ -70,21 +76,46 @@ function search(query, maxResults) {
     request(`https://www.googleapis.com/youtube/v3/search?q=${query}&part=snippet&key=${process.env.GOOGLE_API_KEY}&maxResults=${maxResults || 15}&type=video,playlist`, (error, response, body) => {
       if (!error && response.statusCode == 200) {
         var results = JSON.parse(body).items.map(function(video) {
-          return {
+          var item = {
             playlistId: video.id.playlistId,
             key: video.id.videoId,
             thumbnail: video.snippet.thumbnails ? video.snippet.thumbnails.default.url : null,
-            title: video.snippet.title + (video.id.playlistId && video.snippet.title.toLowerCase().indexOf('playlist') == -1 ? ' (Playlist)' : '')
+            title: video.snippet.title
           };
+          return video.id.playlistId ? enrichPlaylist(item) : enrichVideo(item);
         });
-        resolve(results);
+        Promise.all(results).then(resolve);
       } else {
         reject(error);
       }
     });
   });
 }
 
+function enrichPlaylist(playlist) {
+  return new Promise((resolve, reject) => {
+    Youtube.playlistItems.list({
+      playlistId: playlist.playlistId,
+      part: 'snippet,contentDetails'
+    }, (err, data) => {
+      playlist.playlistItems = data.pageInfo.totalResults;
+      resolve(playlist);
+    });
+  });
+}
+
+function enrichVideo(video) {
+  return new Promise((resolve, reject) => {
+    Youtube.videos.list({
+      id: video.key,
+      part: 'snippet,contentDetails'
+    }, (err, data) => {
+      video.duration = data.items.length == 1 ? moment.duration(data.items[0].contentDetails.duration).asMilliseconds() : undefined;
+      resolve(video);
+    });
+  });
+}
+
 function nextRelated(key) {
   return Promise.all([relatedVideos(key, 5), Video.find({
       where: {

diff --git a/assets/components/playlist-item.html b/assets/components/playlist-item.html
@@ -5,8 +5,11 @@
   <a class="header" ng-href="https://www.youtube.com/watch?v={{$ctrl.video.key}}" target="_blank">
     {{$ctrl.video.title}}
   </a>
-  <div class="meta" ng-if="$ctrl.showAddedBy">
-    Added by {{$ctrl.video.user}} ({{$ctrl.formatDuration()}})
+  <div class="meta">
+    <div ng-if="$ctrl.showAddedBy">
+      Added by {{$ctrl.video.user}}
+    </div>
+    ({{$ctrl.formatDuration()}})
   </div>
   <div class="meta" ng-if="!$ctrl.video.played && !$ctrl.video.playing && !$ctrl.isSuggestion">
     <i class="calendar icon"></i> {{$ctrl.expectedPlayTime()}}

diff --git a/assets/components/playlist.html b/assets/components/playlist.html
@@ -1,5 +1,5 @@
 <div class="ui top attached tabular menu">
-  <div
+  <div style="cursor: pointer;"
     ng-click="$ctrl.setTab('up-next')"
     ng-class="($ctrl.activeTab==='up-next') ? 'active item' : 'item'"
   >
@@ -14,7 +14,7 @@
       <label></label>
     </div>
   </div>
-  <div
+  <div style="cursor: pointer;"
     ng-click="$ctrl.setTab('related')"
     ng-class="($ctrl.activeTab==='related') ? 'active item' : 'item'"
   >
@@ -31,6 +31,7 @@
     show-expected-playtime=true
     show-added-by=true
     is-suggestion=false
+    can-scroll=true
     ng-if="$ctrl.activeTab==='up-next'"
     ng-repeat="video in $ctrl.getVideos() | orderBy: createdAt track by video.id">
   </playlistitem>
@@ -42,6 +43,7 @@
     show-expected-playtime=false
     show-added-by=false
     is-suggestion=true
+    can-scroll=false
     scroll-to-bottom="$ctrl.scrollToBottom()"
     ng-if="$ctrl.activeTab==='related'"
     ng-repeat="video in $ctrl.relatedVideos | orderBy: createdAt track by video.key">

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -20,6 +20,7 @@ app.controller('controller', function($scope, $rootScope, $notification, $storag
         onResponse(videos) {
           return {
             results: $.map(videos, (v) => {
+              v.title = v.title + ' (' + (v.playlistId ? v.playlistItems + ' videos' : moment.duration(v.duration).format('H:mm:ss')) + ')';
               v.image = v.thumbnail;
               return v;
             })
@@ -102,7 +103,7 @@ app.controller('controller', function($scope, $rootScope, $notification, $storag
     };
 
     $scope.skip = function() {
-      return $video.skip();
+      return $video.skip($scope.username);
     };
 
     $scope.findVideoById = function(id) {
@@ -139,6 +140,14 @@ app.controller('controller', function($scope, $rootScope, $notification, $storag
             start: $scope.startTime()
           }
         });
+
+        let $playing = $('#video-list .yellow').closest('playlistitem');
+
+        if ($playing.length) {
+          $playing[0].scrollIntoView({
+            behavior: 'smooth'
+          });
+        }
       }, 0);
     }, true);
 

diff --git a/assets/js/components/playlist-item.js b/assets/js/components/playlist-item.js
@@ -8,13 +8,16 @@ function PlaylistItemController($scope, $http, $video, $storage) {
   };
 
   this.skip = function() {
-    return $video.skip(this.username)
-      .then(() => this.scrollToBottom());
+    return $video.skip(this.username);
   };
 
   this.readd = function() {
     return $video.addByKey(this.username, this.video.key)
-      .then(() => this.scrollToBottom());
+      .then(() => {
+        if (this.canScroll) {
+          this.scrollToBottom();
+        }
+      });
   };
 
   this.remove = function() {
@@ -47,6 +50,7 @@ angular
     scrollToBottom: '&',
     showAddedBy: '<',
     showExpectedPlaytime: '<',
-    isSuggestion: '<'
+    isSuggestion: '<',
+    canScroll: '<'
   }
 });
diff --git a/assets/js/components/playlist.js b/assets/js/components/playlist.js
@@ -47,13 +47,27 @@ function PlaylistController($rootScope, $scope, $video, $storage, $log, $notific
 
   this.scrollToBottom = function() {
     let $list = $('#video-list');
+
     $list.animate({
      scrollTop: $list.prop('scrollHeight')
     }, 1000);
   };
 
+  this.scrollToCurrentlyPlaying = function() {
+    let $list = $('#video-list');
+    let $playing = $list.find('.yellow').closest('playlistitem');
+
+    if ($playing.length) {
+      $playing[0].scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }
+
   this.setTab = function(tab) {
     this.activeTab = tab;
+
+    window.setTimeout(() => this.scrollToCurrentlyPlaying(), 250);
   };
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "JukeBot",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Slack-Enabled Syncronized Music Listening",
   "keywords": [],
   "dependencies": {
@@ -23,7 +23,8 @@
     "rc": "1.0.1",
     "sails": "~0.12.7",
     "sails-disk": "~0.10.9",
-    "slack-webhook": "^1.0.0"
+    "slack-webhook": "^1.0.0",
+    "youtube-api": "^2.0.6"
   },
   "scripts": {
     "debug": "node debug app.js",