Home Explore Help
Register Sign In
jamesperet
/
portfolio-go
Watch 1
Star 0
Fork 0

Browse Source
Video preloader

James Peret 8 years ago
parent
436a88a220
commit
552c3bcc13
7 changed files with 87 additions and 47 deletions
Show Diff Stats
  1. 7 0
      app/data.json
  2. 2 2
      app/index.html
  3. 63 31
      app/scripts/controllers/background.js
  4. 0 1
      app/scripts/controllers/index.js
  5. 4 11
      app/scripts/controllers/navigation.js
  6. 9 1
      app/scripts/services/data.js
  7. 2 1
      bower.json

+ 7 - 0
app/data.json
View File 

@@ -1,5 +1,12 @@
1 1 
 {
2 2 
   "website-name" : "Portfolio Go",
3 
+  "backgrounds" :
4 
+  [
5 
+    "content/videos/bg_1.mov",
6 
+    "content/videos/bg_2.mov",
7 
+    "content/videos/bg_3.mov",
8 
+    "content/videos/bg_4.mov"
9 
+  ],
3 10 
 	"navigation" :
4 11 
   [
5 12 
     {

+ 2 - 2
app/index.html
View File 

@@ -17,7 +17,6 @@
17 17 
 		<script src="../bower_components/angular/angular.js"></script>
18 18 
 		<script src="../bower_components/famous-angular/dist/famous-angular.js"></script>
19 19 
     <script src="../bower_components/famous/dist/famous-global.min.js"></script>
20 
-		<script src="../bower_components/requirejs/require.js"></script>
21 20 
 		<script src="../bower_components/angular-animate/angular-animate.js"></script>
22 21 
 		<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
23 22 
 		<script src="../bower_components/angular-resource/angular-resource.js"></script>
 
@@ -28,7 +27,8 @@
28 27 
 		<script src="../bower_components/ngFx/dist/ngFx.js"></script>
29 28 
 		<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
30 29 
 		<script src="../bower_components/angular-youtube-mb/src/angular-youtube-embed.js"></script>
31 
-		<!-- endbower -->
30 
+		<script src="../bower_components/createjs-preloadjs/lib/preloadjs-0.6.1.combined.js"></script>
31 
+    <!-- endbower -->
32 32 
     <!-- endbuild -->
33 33 
     <script src="https://www.youtube.com/iframe_api"></script>
34 34

+ 63 - 31
app/scripts/controllers/background.js
View File 

@@ -6,47 +6,79 @@
6 6 
  * Controller of the domainManagerApp
7 7 
  */
8 8
9 
-angular.module('goApp.background', ['famous.angular'])
10 
-  .controller('BackgroundController',['$scope', '$rootScope', '$famous', '$timeline', function ($scope,  $rootScope, $famous, $timeline) {
9 
+angular.module('goApp.background', ['famous.angular', 'goApp.data'])
10 
+  .controller('BackgroundController',['$scope', '$rootScope', '$famous', '$timeline', 'Data', '$timeout', function ($scope,  $rootScope, $famous, $timeline, Data, $timeout) {
11 11
12 12 
     'use strict';
13 13
14 
-    var View = $famous['famous/core/View'];
15 
-    var Modifier = $famous['famous/core/Modifier'];
16 
-    var Surface = $famous['famous/core/Surface'];
17 
-    var Transform = $famous['famous/core/Transform'];
18 
-    var VideoSurface = $famous['famous/surfaces/VideoSurface'];
14 
+    // Functions
15 
+
16 
+    $scope.loadBackgroundData = function() {
17 
+      $scope.videos = Data.getBackgrounds();
18 
+      $rootScope.$on('data:loaded', function(data) {
19 
+        if(!$scope.$$phase) {
20 
+          $scope.$apply(function(){
21 
+            $scope.videos = Data.getBackgrounds();
22 
+            $scope.preload();
23 
+          });
24 
+        } else {
25 
+          $scope.videos = Data.getBackgrounds();
26 
+          $scope.preload();
27 
+        }
28 
+      });
29 
+    }
30 
+
31 
+    $scope.preload = function() {
32 
+      $scope.current_video = $scope.videos[$scope.randomIntFromInterval(0,3)];
33 
+      console.log("> Preloading video: " + $scope.current_video)
34 
+      var preload = new createjs.LoadQueue();
35 
+      preload.addEventListener("complete", handleFileComplete);
36 
+      // for (var i = 0; i < $scope.videos.length; i++) {
37 
+      //     preload.loadFile($scope.videos[i]);
38 
+      // }
39 
+      preload.loadFile($scope.current_video);
40 
+      function handleFileComplete(event) {
41 
+          console.log("> Preload Complete");
42 
+          $scope.startBackgroundVideo();
43 
+          $timeout(function(){
44 
+            $rootScope.$broadcast('background:loaded');
45 
+          },1000);
46 
+      }
47 
+    }
19 48
20 49 
     $scope.randomIntFromInterval = function(min,max) {
21 50 
         return Math.floor(Math.random()*(max-min+1)+min);
22 51 
     };
23 52
24 
-    $scope.videos = ['content/videos/bg_1.mov', 'content/videos/bg_2.mov', 'content/videos/bg_1.mov', 'content/videos/bg_2.mov', 'content/videos/bg_3.mov', 'content/videos/bg_4.mov'];
25 
-    $scope.current_video = $scope.videos[$scope.randomIntFromInterval(0,5)];
53 
+    $scope.startBackgroundVideo = function() {
54 
+      console.log("> Playing background video")
55 
+      var video = new VideoSurface({
56 
+          size: [undefined, undefined],
57 
+          autoplay: true,
58 
+          src: $scope.current_video,
59 
+          classes: ['bg_video'],
60 
+          properties: {
61 
+              zIndex: 1,
62 
+          }
63 
+      });
64 
+      video.setAttributes({ loop: '' });
65 
+      var videoModifier = new Modifier();
66 
+      videoModifier.transformFrom(function(){
67 
+          //transform: Transform.translate(0, 0, 0);
68 
+          Transform.translate(0, 0, 0);
69 
+      });
70 
+      $scope.backgroundView.add(videoModifier).add(video);
71 
+    }
26 72
27 
-    $scope.backgroundView = new View();
28 
-
29 
-    var video = new VideoSurface({
30 
-        size: [undefined, undefined],
31 
-        autoplay: true,
32 
-        src: $scope.current_video,
33 
-        classes: ['bg_video'],
34 
-        properties: {
35 
-            zIndex: 1,
36 
-        }
37 
-    });
38 
-    video.setAttributes({
39 
-        loop: ''
40 
-     });
41 
-
42 
-    var videoModifier = new Modifier();
43 
-    videoModifier.transformFrom(function(){
44 
-        //transform: Transform.translate(0, 0, 0);
45 
-        Transform.translate(0, 0, 0);
46 
-    });
47 
-
48 
-    $scope.backgroundView.add(videoModifier).add(video);
73 
+    // Start Background Controller
49 74
75 
+    var View = $famous['famous/core/View'];
76 
+    var Modifier = $famous['famous/core/Modifier'];
77 
+    var Surface = $famous['famous/core/Surface'];
78 
+    var Transform = $famous['famous/core/Transform'];
79 
+    var VideoSurface = $famous['famous/surfaces/VideoSurface'];
80 
+    $scope.backgroundView = new View();
50 81
82 
+    $scope.loadBackgroundData();
51 83
52 84 
   }]);

+ 0 - 1
app/scripts/controllers/index.js
View File 

@@ -12,5 +12,4 @@ angular.module('goApp.index', ['famous.angular', 'ngFx', 'ngAnimate'])
12 12
13 13 
     'use strict';
14 14
15 
-
16 15 
   }]);

+ 4 - 11
app/scripts/controllers/navigation.js
View File 

@@ -12,23 +12,16 @@ angular.module('goApp.navigation', ['famous.angular', 'ngRoute', 'ngFx', 'ngAnim
12 12
13 13 
     'use strict';
14 14
15 
-    $rootScope.$on('data:loaded', function(data) {
15 
+    $rootScope.$on('background:loaded', function() {
16 16 
       if(!$scope.$$phase) {
17 17 
         $scope.$apply(function(){
18 
-          $scope.navigation = Data.get();
18 
+          $scope.navigation = Data.getNavigation();
19 19 
         });
20 
+      } else {
21 
+        $scope.navigation = Data.getNavigation();
20 22 
       }
21 23 
     });
22 24
23 
-    $http({
24 
-      method: 'GET',
25 
-      url: 'data.json'
26 
-    }).success(function(data) {
27 
-      $timeout(function(){
28 
-        $scope.navigation = data.navigation;
29 
-      },500);
30 
-    });
31 
-
32 25 
     $scope.subNavigation = [];
33 26 
     $scope.sub2Navigation = [];
34 27 
     $scope.last_click = "";

+ 9 - 1
app/scripts/services/data.js
View File 

@@ -14,8 +14,8 @@ angular.module('goApp.data', [])
14 14 
   }).success(function(json_data) {
15 15 
     data = json_data;
16 16 
     data_loaded = true;
17 
-    $rootScope.$broadcast('data:loaded', data);
18 17 
     console.log('> Loaded data.json');
18 
+    $rootScope.$broadcast('data:loaded', data);
19 19 
   });
20 20
21 21 
   this.get = function() {
 
@@ -51,4 +51,12 @@ angular.module('goApp.data', [])
51 51 
     return page_data;
52 52 
   };
53 53
54 
+  this.getNavigation = function() {
55 
+    return data.navigation;
56 
+  };
57 
+
58 
+  this.getBackgrounds = function() {
59 
+    return data.backgrounds;
60 
+  };
61 
+
54 62 
 }]);

+ 2 - 1
bower.json
View File 

@@ -32,7 +32,8 @@
32 32 
     "famous-bkimagesurface": "~1.0.3",
33 33 
     "angular-ui": "~0.4.0",
34 34 
     "angular-ui-router": "~0.2.15",
35 
-    "angular-youtube-mb": "~1.0.2"
35 
+    "angular-youtube-mb": "~1.0.2",
36 
+    "createjs-preloadjs": "~0.6.1"
36 37 
   },
37 38 
   "resolutions": {
38 39 
     "angular": "1.3.8"