Personal portfolio website for Regina Carvalho. Built with Famous.js library.

video.js 3.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /**
  2. * @ngdoc function
  3. * @name domainManagerApp.controller:AboutCtrl
  4. * @description
  5. * # AboutCtrl
  6. * Controller of the domainManagerApp
  7. */
  8. angular.module('goApp.video', ['ngFx', 'ngAnimate', 'goApp.data'])
  9. .controller('VideoController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', '$mixpanel', function ($scope, $rootScope, $famous, $timeline, $location, $route, $timeout, Data, $mixpanel) {
  10. 'use strict';
  11. console.log('> Loading Video Page');
  12. $scope.showYoutube = false;
  13. $scope.showFile = false;
  14. $scope.getData = function() {
  15. var link = $location.url();
  16. $scope.pageData = Data.getPageData(link);
  17. console.log("> Youtube video: " + $scope.pageData.videoUrl);
  18. if($scope.pageData.videoUrl !== undefined){
  19. $scope.startVideo();
  20. }
  21. $rootScope.$on('data:loaded', function(data) {
  22. if(!$scope.$$phase) {
  23. $scope.$apply(function(){
  24. $scope.pageData = Data.getPageData(link);
  25. $scope.startVideo();
  26. });
  27. } else {
  28. $scope.pageData = Data.getPageData(link);
  29. $scope.startVideo();
  30. }
  31. });
  32. };
  33. $scope.fadeIn = function() {
  34. $timeout(function(){
  35. $scope.showView = true;
  36. },100);
  37. };
  38. $scope.fadeOut = function() {
  39. $scope.showView = false;
  40. $timeout(function(){
  41. $scope.showView = false;
  42. $location.path("/");
  43. },800);
  44. };
  45. $scope.startVideo = function() {
  46. if($scope.pageData.videoType === "file"){
  47. if(!$scope.$$phase) {
  48. $scope.$apply(function(){
  49. $scope.showFile = true;
  50. $scope.startFileVideo();
  51. });
  52. } else {
  53. $scope.showFile = true;
  54. $scope.startFileVideo();
  55. }
  56. }
  57. if($scope.pageData.videoType === "youtube"){
  58. if(!$scope.$$phase) {
  59. $scope.$apply(function(){
  60. $scope.showYoutube = true;
  61. });
  62. } else {
  63. $scope.showYoutube = true;
  64. }
  65. }
  66. $mixpanel.track('Page View', { "Page": $scope.pageData.link });
  67. };
  68. $scope.startFileVideo = function() {
  69. console.log("> Playing video " + $scope.pageData.videoUrl);
  70. var video = new VideoSurface({
  71. size: [undefined, undefined],
  72. autoplay: true,
  73. src: $scope.pageData.videoUrl,
  74. properties: {
  75. zIndex: 1,
  76. }
  77. });
  78. video.setAttributes({ loop: '' });
  79. var videoModifier = new Modifier();
  80. videoModifier.transformFrom(function(){
  81. //transform: Transform.translate(0, 0, 0);
  82. Transform.translate(0, 0, 0);
  83. });
  84. console.log(video);
  85. $scope.mainView.add(videoModifier).add(video);
  86. };
  87. var View = $famous['famous/core/View'];
  88. var Modifier = $famous['famous/core/Modifier'];
  89. var Surface = $famous['famous/core/Surface'];
  90. var Transform = $famous['famous/core/Transform'];
  91. var VideoSurface = $famous['famous/surfaces/VideoSurface'];
  92. $scope.mainView = new View();
  93. $scope.fadeIn();
  94. $scope.getData();
  95. }]);