Implemented video previews in Backend #25

- Added previews for create & edit controller - Added missing translations - Added copy-to-clipboard for UUIDs - Fixes and template improvements
sitcomlab · Aug 20, 2017 · 1db4c4d · 1db4c4d · nicho90 · Aug 20, 2017
1 parent 7fcf025
commit 1db4c4d
Show file tree

Hide file tree

Showing 52 changed files with 874 additions and 360 deletions.
diff --git a/bower.json b/bower.json
@@ -1,35 +1,36 @@
 {
-    "name": "ive",
-    "homepage": "https://github.com/sitcomlab/IVE",
-    "authors": [
-        "Nicholas Schiestel <[email protected]>"
-    ],
-    "description": "",
-    "main": "",
-    "license": "MIT",
-    "private": true,
-    "dependencies": {
-        "angular": "^1.6.4",
-        "jquery": "^3.1.0",
-        "angular-route": "^1.6.4",
-        "angular-translate": "^2.11.1",
-        "font-awesome": "^4.6.3",
-        "bootstrap": "v4.0.0-alpha.6",
-        "angular-socket-io": "^0.7.0",
-        "socket.io-client": "^1.5.0",
-        "angular-sanitize": "^1.6.4",
-        "videogular": "^1.4.4",
-        "videogular-themes-default": "^1.4.4",
-        "videogular-controls": "^1.4.4",
-        "underscore": "^1.8.3",
-        "angular-underscore-module": "^1.0.3",
-        "moment": "^2.17.1",
-        "angular-momentjs": "^0.2.2",
-        "three.js": "threejs#*",
-        "components-threejs": "^0.0.79"
-    },
-    "resolutions": {
-        "angular": "1.6.4",
-        "bootstrap": "v4.0.0-alpha.6"
-    }
+  "name": "ive",
+  "homepage": "https://github.com/sitcomlab/IVE",
+  "authors": [
+    "Nicholas Schiestel <[email protected]>"
+  ],
+  "description": "",
+  "main": "",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "angular": "^1.6.4",
+    "jquery": "^3.1.0",
+    "angular-route": "^1.6.4",
+    "angular-translate": "^2.11.1",
+    "font-awesome": "^4.6.3",
+    "bootstrap": "v4.0.0-alpha.6",
+    "angular-socket-io": "^0.7.0",
+    "socket.io-client": "^1.5.0",
+    "angular-sanitize": "^1.6.4",
+    "videogular": "^1.4.4",
+    "videogular-themes-default": "^1.4.4",
+    "videogular-controls": "^1.4.4",
+    "underscore": "^1.8.3",
+    "angular-underscore-module": "^1.0.3",
+    "moment": "^2.17.1",
+    "angular-momentjs": "^0.2.2",
+    "three.js": "threejs#*",
+    "components-threejs": "^0.0.79",
+    "ngclipboard": "^1.1.1"
+  },
+  "resolutions": {
+    "angular": "1.6.4",
+    "bootstrap": "v4.0.0-alpha.6"
+  }
 }
diff --git a/public/backend/css/styles.css b/public/backend/css/styles.css
@@ -47,6 +47,9 @@ footer {
     border: 1px solid rgba(0, 0, 0, .125);
 }
 
+.uuid {
+    cursor: pointer;
+}
 
 .card-footer > .btn-block-xs-only, .btn-block-xs-only {
     margin-top: 1px;

diff --git a/public/backend/index.html b/public/backend/index.html
@@ -48,6 +48,8 @@
         <script src="../bower_components/angular-translate/angular-translate.min.js"></script>
         <script src="../bower_components/angular-underscore-module/angular-underscore-module.js"></script>
         <script src="../bower_components/angular-momentjs/angular-momentjs.js"></script>
+        <script src="../bower_components/clipboard/dist/clipboard.min.js"></script>
+        <script src="../bower_components/ngclipboard/dist/ngclipboard.min.js"></script>
         <script src="../bower_components/videogular/videogular.js"></script>
         <script src="../bower_components/videogular-controls/vg-controls.js"></script>
         <script src="../bower_components/three.js/dist/three.min.js"></script>

diff --git a/public/backend/js/app.js b/public/backend/js/app.js
@@ -13,6 +13,7 @@ var app = angular.module("ive", [
     "pascalprecht.translate",
     "angular-momentjs",
     "underscore",
+    "ngclipboard",
     "com.2fdevs.videogular",
 	"com.2fdevs.videogular.plugins.controls",
 	//"com.2fdevs.videogular.plugins.overlayplay",

diff --git a/public/backend/js/controllers/relationship/create/embeddedInController.js b/public/backend/js/controllers/relationship/create/embeddedInController.js
@@ -1,7 +1,7 @@
 var app = angular.module("ive");
 
 // Relationship embedded_in create controller
-app.controller("embeddedInCreateController", function($scope, $rootScope, $routeParams, $filter, $translate, $location, config, $window, $authenticationService, $relationshipService, $scenarioService, $videoService, $overlayService) {
+app.controller("embeddedInCreateController", function($scope, $rootScope, $routeParams, $interval, $filter, $translate, $location, config, $window, $authenticationService, $relationshipService, $scenarioService, $videoService, $overlayService, _) {
 
     /*************************************************
         FUNCTIONS
@@ -109,6 +109,7 @@ app.controller("embeddedInCreateController", function($scope, $rootScope, $route
                             first_video = $scope.videos[0].video_id;
                         }
                         $scope.relationship.video_id = first_video;
+                        $scope.findVideo();
 
                         // Update UI
                         $scope.videoDropdown.status = false;
@@ -128,6 +129,7 @@ app.controller("embeddedInCreateController", function($scope, $rootScope, $route
                             first_video = $scope.videos[0].video_id;
                         }
                         $scope.relationship.video_id = first_video;
+                        $scope.findVideo();
 
                         // Update UI
                         $scope.videoDropdown.status = false;
@@ -140,14 +142,73 @@ app.controller("embeddedInCreateController", function($scope, $rootScope, $route
                 break;
             }
         }
-     };
+    };
+
+
+    /**
+     * [description]
+     * @return {[type]} [description]
+     */
+    $scope.findVideo = function(){
+        if($scope.relationship.video_id !== null){
+            $scope.selectedVideo = _.findWhere($scope.videos, { video_id: $scope.relationship.video_id });
+            $scope.selectedVideo.thumbnail = $filter('thumbnail')($scope.selectedVideo, 1);
+        } else {
+            $scope.selectedVideo;
+        }
+    };
+
+
+    /**
+     * [startPreview description]
+     * @param  {[type]} video [description]
+     * @return {[type]}       [description]
+     */
+    $scope.startPreview = function(video) {
+        // store the interval promise
+        $scope.currentPreview = 1;
+        $scope.maxPreview = video.thumbnails;
+
+        // stops any running interval to avoid two intervals running at the same time
+        $interval.cancel(promise);
+
+        // store the interval promise
+        promise = $interval(function() {
+            if($scope.selectedVideo.thumbnails > 1){
+                if($scope.currentPreview >= $scope.maxPreview){
+                    $scope.currentPreview = 1;
+                }
+                $scope.selectedVideo.thumbnail = $filter('thumbnail')($scope.selectedVideo, $scope.currentPreview);
+            }
+            $scope.currentPreview++;
+        }, config.thumbnailSpeed);
+    };
+
+    /**
+     * [stopPreview description]
+     * @param  {[type]} video [description]
+     * @return {[type]}       [description]
+     */
+    $scope.stopPreview = function(video) {
+        $interval.cancel(promise);
+    };
+
+
+    /*************************************************
+        LISTENERS
+     *************************************************/
+    $scope.$on('$destroy', function() {
+        $interval.cancel(promise);
+    });
 
 
     /*************************************************
         INIT
      *************************************************/
     $scope.relationship = $relationshipService.init('embedded_in');
+    $scope.selectedVideo;
     $scope.$parent.loading = { status: false, message: "" };
+    var promise;
 
     // Prepare dropdowns
     $scope.overlayDropdown = {

diff --git a/public/backend/js/controllers/relationship/create/recordedAtController.js b/public/backend/js/controllers/relationship/create/recordedAtController.js
@@ -1,7 +1,7 @@
 var app = angular.module("ive");
 
 // Relationship recorded_at create controller
-app.controller("recordedAtCreateController", function($scope, $rootScope, $routeParams, $filter, $translate, $location, config, $window, $authenticationService, $relationshipService, $scenarioService, $locationService, $videoService) {
+app.controller("recordedAtCreateController", function($scope, $rootScope, $routeParams, $interval, $filter, $translate, $location, config, $window, $authenticationService, $relationshipService, $scenarioService, $locationService, $videoService, _) {
 
     /*************************************************
         FUNCTIONS
@@ -58,6 +58,7 @@ app.controller("recordedAtCreateController", function($scope, $rootScope, $route
                             first_video = $scope.videos[0].video_id;
                         }
                         $scope.relationship.video_id = first_video;
+                        $scope.findVideo();
 
                         // Update UI
                         $scope.videoDropdown.status = false;
@@ -77,6 +78,7 @@ app.controller("recordedAtCreateController", function($scope, $rootScope, $route
                             first_video = $scope.videos[0].video_id;
                         }
                         $scope.relationship.video_id = first_video;
+                        $scope.findVideo();
 
                         // Update UI
                         $scope.videoDropdown.status = false;
@@ -134,12 +136,70 @@ app.controller("recordedAtCreateController", function($scope, $rootScope, $route
         }
     };
 
+    /**
+     * [description]
+     * @return {[type]} [description]
+     */
+    $scope.findVideo = function(){
+        if($scope.relationship.video_id !== null){
+            $scope.selectedVideo = _.findWhere($scope.videos, { video_id: $scope.relationship.video_id });
+            $scope.selectedVideo.thumbnail = $filter('thumbnail')($scope.selectedVideo, 1);
+        } else {
+            $scope.selectedVideo;
+        }
+    };
+
+
+    /**
+     * [startPreview description]
+     * @param  {[type]} video [description]
+     * @return {[type]}       [description]
+     */
+    $scope.startPreview = function(video) {
+        // store the interval promise
+        $scope.currentPreview = 1;
+        $scope.maxPreview = video.thumbnails;
+
+        // stops any running interval to avoid two intervals running at the same time
+        $interval.cancel(promise);
+
+        // store the interval promise
+        promise = $interval(function() {
+            if($scope.selectedVideo.thumbnails > 1){
+                if($scope.currentPreview >= $scope.maxPreview){
+                    $scope.currentPreview = 1;
+                }
+                $scope.selectedVideo.thumbnail = $filter('thumbnail')($scope.selectedVideo, $scope.currentPreview);
+            }
+            $scope.currentPreview++;
+        }, config.thumbnailSpeed);
+    };
+
+    /**
+     * [stopPreview description]
+     * @param  {[type]} video [description]
+     * @return {[type]}       [description]
+     */
+    $scope.stopPreview = function(video) {
+        $interval.cancel(promise);
+    };
+
+
+    /*************************************************
+        LISTENERS
+     *************************************************/
+    $scope.$on('$destroy', function() {
+        $interval.cancel(promise);
+    });
+
 
     /*************************************************
         INIT
      *************************************************/
     $scope.relationship = $relationshipService.init('recorded_at');
+    $scope.selectedVideo;
     $scope.$parent.loading = { status: false, message: "" };
+    var promise;
 
     // Prepare dropdowns
     $scope.videoDropdown = {

diff --git a/public/backend/js/controllers/relationship/detailsController.js b/public/backend/js/controllers/relationship/detailsController.js
@@ -1,7 +1,7 @@
 var app = angular.module("ive");
 
 // Relationship details controller
-app.controller("relationshipDetailsController", function($scope, $rootScope, $routeParams, $filter, $translate, $location, config, $window, $authenticationService, $relationshipService) {
+app.controller("relationshipDetailsController", function($scope, $rootScope, $routeParams, $interval, $filter, $translate, $location, config, $window, $authenticationService, $relationshipService) {
 
     /*************************************************
         FUNCTIONS
@@ -17,12 +17,56 @@ app.controller("relationshipDetailsController", function($scope, $rootScope, $ro
     };
 
 
+    /**
+     * [startPreview description]
+     * @param  {[type]} video [description]
+     * @return {[type]}       [description]
+     */
+    $scope.startPreview = function(video) {
+        // store the interval promise
+        $scope.currentPreview = 1;
+        $scope.maxPreview = video.thumbnails;
+
+        // stops any running interval to avoid two intervals running at the same time
+        $interval.cancel(promise);
+
+        // store the interval promise
+        promise = $interval(function() {
+            if($scope.relationship.thumbnails > 1){
+                if($scope.currentPreview >= $scope.maxPreview){
+                    $scope.currentPreview = 1;
+                }
+                $scope.relationship.thumbnail = $filter('thumbnail')($scope.relationship, $scope.currentPreview);
+            }
+            $scope.currentPreview++;
+        }, config.thumbnailSpeed);
+    };
+
+    /**
+     * [stopPreview description]
+     * @param  {[type]} video [description]
+     * @return {[type]}       [description]
+     */
+    $scope.stopPreview = function(video) {
+        $interval.cancel(promise);
+    };
+
+
+    /*************************************************
+        LISTENERS
+     *************************************************/
+    $scope.$on('$destroy', function() {
+        $interval.cancel(promise);
+    });
+
+
     /*************************************************
         INIT
      *************************************************/
     $scope.$parent.loading = { status: true, message: $filter('translate')('LOADING_RELATIONSHIP') };
     $scope.relationship_label = $routeParams.relationship_label;
     $scope.relationship_type = $routeParams.relationship_type || undefined;
+    var promise;
 
     $relationshipService.retrieve_by_id($scope.relationship_label, $routeParams.relationship_id, $scope.relationship_type)
     .then(function onSuccess(response) {
@@ -33,4 +77,5 @@ app.controller("relationshipDetailsController", function($scope, $rootScope, $ro
         $window.alert(response.data);
     });
 
+
 });