Video file playback and bug fixes
10 changed files with 257 additions and 23 deletions
BIN
app/content/videos/anim_01.mov
+ 23
- 2
app/data.json
@@ -307,7 +307,8 @@ |
||
| 307 | 307 |
{
|
| 308 | 308 |
"title" : "Trifonia", |
| 309 | 309 |
"link" : "/filmes/trifonia", |
| 310 |
- "videoUrl" : "fIEXEIOyh9Q" |
|
| 310 |
+ "videoUrl" : "fIEXEIOyh9Q", |
|
| 311 |
+ "videoType": "youtube" |
|
| 311 | 312 |
}, |
| 312 | 313 |
{
|
| 313 | 314 |
"title" : "Sonho contra-sono", |
@@ -315,7 +316,22 @@ |
||
| 315 | 316 |
}, |
| 316 | 317 |
{
|
| 317 | 318 |
"title" : "Animações", |
| 318 |
- "link" : "/filmes/animacoes" |
|
| 319 |
+ "link" : "submenu", |
|
| 320 |
+ "submenu" : |
|
| 321 |
+ [ |
|
| 322 |
+ {
|
|
| 323 |
+ "title" : "Video 1", |
|
| 324 |
+ "link" : "/filmes/animacao-01", |
|
| 325 |
+ "videoUrl" : "content/videos/anim_01.mov", |
|
| 326 |
+ "videoType": "file" |
|
| 327 |
+ }, |
|
| 328 |
+ {
|
|
| 329 |
+ "title" : "Video 2", |
|
| 330 |
+ "link" : "/filmes/animacao-01", |
|
| 331 |
+ "videoUrl" : "content/videos/anim_01.mov", |
|
| 332 |
+ "videoType": "file" |
|
| 333 |
+ } |
|
| 334 |
+ ] |
|
| 319 | 335 |
}, |
| 320 | 336 |
{
|
| 321 | 337 |
"title" : "Performances", |
@@ -336,6 +352,11 @@ |
||
| 336 | 352 |
"title" : "Currículo", |
| 337 | 353 |
"link" : "/textos/curriculo", |
| 338 | 354 |
"content": "<p><span>Veja o currículo <a href=\"http://google.com\">aqui</a><span></p>" |
| 355 |
+ }, |
|
| 356 |
+ {
|
|
| 357 |
+ "title" : "Contato", |
|
| 358 |
+ "link" : "/contato", |
|
| 359 |
+ "content": "<p><span>Entre em contato através do email <a href=\"mailto:cometogo2@gmail.com\">cometogo2@gmail.com</a> ou deixe uma mensagem:<span></p>" |
|
| 339 | 360 |
} |
| 340 | 361 |
] |
| 341 | 362 |
} |
+ 2
- 0
app/index.html
@@ -40,9 +40,11 @@ |
||
| 40 | 40 |
<script src="../app/scripts/controllers/slideshow.js"></script> |
| 41 | 41 |
<script src="../app/scripts/controllers/page.js"></script> |
| 42 | 42 |
<script src="../app/scripts/controllers/video.js"></script> |
| 43 |
+ <script src="../app/scripts/controllers/contact.js"></script> |
|
| 43 | 44 |
<script src="../app/scripts/directives/wallop-slider.js"></script> |
| 44 | 45 |
<script src="../app/scripts/services/data.js"></script> |
| 45 | 46 |
<script src="../app/scripts/services/getController.js"></script> |
| 47 |
+ <script src="../app/scripts/services/mandrill.js"></script> |
|
| 46 | 48 |
<!-- endbuild --> |
| 47 | 49 |
|
| 48 | 50 |
|
+ 10
- 3
app/scripts/app.js
@@ -25,15 +25,17 @@ angular |
||
| 25 | 25 |
'goApp.page', |
| 26 | 26 |
'goApp.video', |
| 27 | 27 |
'goApp.slider', |
| 28 |
+ 'goApp.contact', |
|
| 29 |
+ 'mandrill' |
|
| 28 | 30 |
]) |
| 29 | 31 |
|
| 30 |
- .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
|
|
| 32 |
+ .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function($stateProvider, $urlRouterProvider, $httpProvider) {
|
|
| 31 | 33 |
|
| 32 | 34 |
// Configs |
| 33 | 35 |
//Enable cross domain calls |
| 34 |
- //$httpProvider.defaults.useXDomain = true; |
|
| 36 |
+ $httpProvider.defaults.useXDomain = true; |
|
| 35 | 37 |
//Remove the header used to identify ajax call that would prevent CORS from working |
| 36 |
- //delete $httpProvider.defaults.headers.common['X-Requested-With']; |
|
| 38 |
+ delete $httpProvider.defaults.headers.common['X-Requested-With']; |
|
| 37 | 39 |
|
| 38 | 40 |
// UI router |
| 39 | 41 |
$stateProvider |
@@ -56,6 +58,11 @@ angular |
||
| 56 | 58 |
url: "/textos/:texto", |
| 57 | 59 |
templateUrl: "views/page.html", |
| 58 | 60 |
controller: 'PageController' |
| 61 |
+ }) |
|
| 62 |
+ .state('contato', {
|
|
| 63 |
+ url: "/contato", |
|
| 64 |
+ templateUrl: "views/contact.html", |
|
| 65 |
+ controller: 'ContactController' |
|
| 59 | 66 |
}); |
| 60 | 67 |
|
| 61 | 68 |
}]); |
+ 52
- 0
app/scripts/controllers/contact.js
@@ -0,0 +1,52 @@ |
||
| 1 |
+ |
|
| 2 |
+ |
|
| 3 |
+/** |
|
| 4 |
+ * @ngdoc function |
|
| 5 |
+ * @name domainManagerApp.controller:AboutCtrl |
|
| 6 |
+ * @description |
|
| 7 |
+ * # AboutCtrl |
|
| 8 |
+ * Controller of the domainManagerApp |
|
| 9 |
+ */ |
|
| 10 |
+angular.module('goApp.contact', ['ngFx', 'ngAnimate', 'goApp.data', 'mandrill'])
|
|
| 11 |
+ .controller('ContactController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', 'Mandrill', function ($scope, $rootScope, $famous, $timeline, $location, $route, $timeout, Data, Mandrill) {
|
|
| 12 |
+ |
|
| 13 |
+ 'use strict'; |
|
| 14 |
+ |
|
| 15 |
+ console.log('> Loading Contact Page');
|
|
| 16 |
+ |
|
| 17 |
+ // Get Page Data |
|
| 18 |
+ var link = $location.url(); |
|
| 19 |
+ $scope.pageData = Data.getPageData(link); |
|
| 20 |
+ $rootScope.$on('data:loaded', function(data) {
|
|
| 21 |
+ if(!$scope.$$phase) {
|
|
| 22 |
+ $scope.$apply(function(){
|
|
| 23 |
+ $scope.pageData = Data.getPageData(link); |
|
| 24 |
+ $scope.showSlider(); |
|
| 25 |
+ }); |
|
| 26 |
+ } |
|
| 27 |
+ }); |
|
| 28 |
+ |
|
| 29 |
+ $scope.sendMessage = function(msgData){
|
|
| 30 |
+ console.log("> Sending message from " + msgData.name)
|
|
| 31 |
+ Mandrill.sendMail(msgData); |
|
| 32 |
+ } |
|
| 33 |
+ |
|
| 34 |
+ // FadeIn |
|
| 35 |
+ $timeout(function(){
|
|
| 36 |
+ $scope.showView = true; |
|
| 37 |
+ },100); |
|
| 38 |
+ // FadeOut |
|
| 39 |
+ $scope.fadeOut = function() {
|
|
| 40 |
+ $scope.showView = false; |
|
| 41 |
+ $timeout(function(){
|
|
| 42 |
+ $scope.showView = false; |
|
| 43 |
+ $location.path("/");
|
|
| 44 |
+ },800); |
|
| 45 |
+ }; |
|
| 46 |
+ |
|
| 47 |
+ |
|
| 48 |
+ |
|
| 49 |
+ |
|
| 50 |
+ |
|
| 51 |
+ |
|
| 52 |
+ }]); |
+ 80
- 17
app/scripts/controllers/video.js
@@ -14,26 +14,35 @@ angular.module('goApp.video', ['ngFx', 'ngAnimate', 'goApp.data'])
|
||
| 14 | 14 |
|
| 15 | 15 |
console.log('> Loading Video Page');
|
| 16 | 16 |
|
| 17 |
- // Get Page Data |
|
| 18 |
- var link = $location.url(); |
|
| 19 |
- $scope.pageData = Data.getPageData(link); |
|
| 20 |
- console.log("> Youtube video: " + $scope.pageData.videoUrl);
|
|
| 21 |
- $rootScope.$on('data:loaded', function(data) {
|
|
| 22 |
- if(!$scope.$$phase) {
|
|
| 23 |
- $scope.$apply(function(){
|
|
| 24 |
- $scope.pageData = Data.getPageData(link); |
|
| 25 |
- }); |
|
| 26 |
- } else {
|
|
| 27 |
- $scope.pageData = Data.getPageData(link); |
|
| 17 |
+ $scope.showYoutube = false; |
|
| 18 |
+ $scope.showFile = false; |
|
| 19 |
+ |
|
| 20 |
+ $scope.getData = function() {
|
|
| 21 |
+ var link = $location.url(); |
|
| 22 |
+ $scope.pageData = Data.getPageData(link); |
|
| 23 |
+ console.log("> Youtube video: " + $scope.pageData.videoUrl);
|
|
| 24 |
+ if($scope.pageData.videoUrl != undefined){
|
|
| 25 |
+ $scope.startVideo(); |
|
| 28 | 26 |
} |
| 29 |
- }); |
|
| 27 |
+ $rootScope.$on('data:loaded', function(data) {
|
|
| 28 |
+ if(!$scope.$$phase) {
|
|
| 29 |
+ $scope.$apply(function(){
|
|
| 30 |
+ $scope.pageData = Data.getPageData(link); |
|
| 31 |
+ $scope.startVideo(); |
|
| 32 |
+ }); |
|
| 33 |
+ } else {
|
|
| 34 |
+ $scope.pageData = Data.getPageData(link); |
|
| 35 |
+ $scope.startVideo(); |
|
| 36 |
+ } |
|
| 37 |
+ }); |
|
| 38 |
+ } |
|
| 30 | 39 |
|
| 40 |
+ $scope.fadeIn = function() {
|
|
| 41 |
+ $timeout(function(){
|
|
| 42 |
+ $scope.showView = true; |
|
| 43 |
+ },100); |
|
| 44 |
+ } |
|
| 31 | 45 |
|
| 32 |
- // FadeIn |
|
| 33 |
- $timeout(function(){
|
|
| 34 |
- $scope.showView = true; |
|
| 35 |
- },100); |
|
| 36 |
- // FadeOut |
|
| 37 | 46 |
$scope.fadeOut = function() {
|
| 38 | 47 |
$scope.showView = false; |
| 39 | 48 |
$timeout(function(){
|
@@ -42,6 +51,60 @@ angular.module('goApp.video', ['ngFx', 'ngAnimate', 'goApp.data'])
|
||
| 42 | 51 |
},800); |
| 43 | 52 |
}; |
| 44 | 53 |
|
| 54 |
+ $scope.startVideo = function() {
|
|
| 55 |
+ if($scope.pageData.videoType == "youtube"){
|
|
| 56 |
+ if(!$scope.$$phase) {
|
|
| 57 |
+ $scope.$apply(function(){
|
|
| 58 |
+ $scope.showYoutube = true; |
|
| 59 |
+ }); |
|
| 60 |
+ } else {
|
|
| 61 |
+ $scope.showYoutube = true; |
|
| 62 |
+ } |
|
| 63 |
+ } |
|
| 64 |
+ if($scope.pageData.videoType == "file"){
|
|
| 65 |
+ if(!$scope.$$phase) {
|
|
| 66 |
+ $scope.$apply(function(){
|
|
| 67 |
+ $scope.showFile = true; |
|
| 68 |
+ $scope.startFileVideo(); |
|
| 69 |
+ }); |
|
| 70 |
+ } else {
|
|
| 71 |
+ $scope.showFile = true; |
|
| 72 |
+ $scope.startFileVideo(); |
|
| 73 |
+ } |
|
| 74 |
+ } |
|
| 75 |
+ } |
|
| 76 |
+ |
|
| 77 |
+ $scope.startFileVideo = function() {
|
|
| 78 |
+ console.log("> Playing video " + $scope.pageData.videoUrl);
|
|
| 79 |
+ var video = new VideoSurface({
|
|
| 80 |
+ size: [undefined, undefined], |
|
| 81 |
+ autoplay: true, |
|
| 82 |
+ src: $scope.pageData.videoUrl, |
|
| 83 |
+ properties: {
|
|
| 84 |
+ zIndex: 1, |
|
| 85 |
+ } |
|
| 86 |
+ }); |
|
| 87 |
+ |
|
| 88 |
+ video.setAttributes({ loop: '' });
|
|
| 89 |
+ var videoModifier = new Modifier(); |
|
| 90 |
+ videoModifier.transformFrom(function(){
|
|
| 91 |
+ //transform: Transform.translate(0, 0, 0); |
|
| 92 |
+ Transform.translate(0, 0, 0); |
|
| 93 |
+ }); |
|
| 94 |
+ console.log(video); |
|
| 95 |
+ $scope.mainView.add(videoModifier).add(video); |
|
| 96 |
+ }; |
|
| 97 |
+ |
|
| 98 |
+ var View = $famous['famous/core/View']; |
|
| 99 |
+ var Modifier = $famous['famous/core/Modifier']; |
|
| 100 |
+ var Surface = $famous['famous/core/Surface']; |
|
| 101 |
+ var Transform = $famous['famous/core/Transform']; |
|
| 102 |
+ var VideoSurface = $famous['famous/surfaces/VideoSurface']; |
|
| 103 |
+ $scope.mainView = new View(); |
|
| 104 |
+ |
|
| 105 |
+ $scope.fadeIn(); |
|
| 106 |
+ $scope.getData(); |
|
| 107 |
+ |
|
| 45 | 108 |
|
| 46 | 109 |
|
| 47 | 110 |
}]); |
+ 38
- 0
app/scripts/services/mandrill.js
@@ -0,0 +1,38 @@ |
||
| 1 |
+ |
|
| 2 |
+ |
|
| 3 |
+angular.module('mandrill', [])
|
|
| 4 |
+.service('Mandrill', [ '$rootScope', '$http', function($rootScope, $http) {
|
|
| 5 |
+ |
|
| 6 |
+ "use strict"; |
|
| 7 |
+ |
|
| 8 |
+ this.sendMail = function(msgData) {
|
|
| 9 |
+ |
|
| 10 |
+ var messagePost = {
|
|
| 11 |
+ key: "m14Wkh0PhF74K2cTvxWPHA", |
|
| 12 |
+ message: {
|
|
| 13 |
+ subject: msgData.name + " enviou uma mensagem", |
|
| 14 |
+ html: msgData.message, |
|
| 15 |
+ text: msgData.message, |
|
| 16 |
+ from_email: msgData.email, |
|
| 17 |
+ from_name: msgData.name, |
|
| 18 |
+ to: [ |
|
| 19 |
+ {
|
|
| 20 |
+ email: "james.peret@gmail.com", |
|
| 21 |
+ name: "James Peret", |
|
| 22 |
+ type: 'to' |
|
| 23 |
+ } |
|
| 24 |
+ ] |
|
| 25 |
+ } |
|
| 26 |
+ } |
|
| 27 |
+ console.log(messagePost); |
|
| 28 |
+ $http.post('https://mandrillapp.com/api/1.0/messages/send.json', { key: messagePost.key, message: messagePost.message })
|
|
| 29 |
+ .success(function(data, status, headers, config){
|
|
| 30 |
+ $rootScope.$broadcast('email:sent');
|
|
| 31 |
+ console.log("> Message sent succesfully!")
|
|
| 32 |
+ console.log(data) |
|
| 33 |
+ }); |
|
| 34 |
+ }; |
|
| 35 |
+ |
|
| 36 |
+ |
|
| 37 |
+ |
|
| 38 |
+}]); |
+ 24
- 0
app/styles/main.css
@@ -6,6 +6,7 @@ body {
|
||
| 6 | 6 |
margin: 0px; |
| 7 | 7 |
width: 100%; |
| 8 | 8 |
overflow-x: hidden; |
| 9 |
+ background-color: black; |
|
| 9 | 10 |
} |
| 10 | 11 |
|
| 11 | 12 |
.backfaceVisibility {
|
@@ -141,6 +142,7 @@ fa-app {
|
||
| 141 | 142 |
height: 100%; |
| 142 | 143 |
width: 100%; |
| 143 | 144 |
overflow: hidden; |
| 145 |
+ background-color: black; |
|
| 144 | 146 |
} |
| 145 | 147 |
|
| 146 | 148 |
.fixed-top-right {
|
@@ -191,10 +193,32 @@ fa-app {
|
||
| 191 | 193 |
} |
| 192 | 194 |
.page h1 span { background-color: white; }
|
| 193 | 195 |
.page .page-content { margin-top: 25px;}
|
| 196 |
+.page .page-content p { font-size: 16px; line-height: 22px; margin-top: 7px; margin-bottom: 7px;}
|
|
| 194 | 197 |
.page .page-content p span { background-color: white; padding-top: 1px; padding-left: 1px; padding-right: 1px;}
|
| 195 | 198 |
.page .page-content p span a { color: black; text-decoration: underline}
|
| 196 | 199 |
.page .page-content p span a:hover { color: white; text-decoration: none; background-color: black; padding-top: 1px;}
|
| 197 | 200 |
|
| 201 |
+.page .page-content input, .page .page-content textarea {
|
|
| 202 |
+ font-size: 16px; |
|
| 203 |
+ border: none; |
|
| 204 |
+ padding-top: 0px; |
|
| 205 |
+ padding-left: 1px; |
|
| 206 |
+ padding-right: 1px; |
|
| 207 |
+ padding-bottom: 1px; |
|
| 208 |
+ width: 300px; |
|
| 209 |
+} |
|
| 210 |
+ |
|
| 211 |
+.page .page-content textarea {
|
|
| 212 |
+ width: 500px; |
|
| 213 |
+} |
|
| 214 |
+ |
|
| 215 |
+.page .page-content .btn {
|
|
| 216 |
+ position: inherit; |
|
| 217 |
+ width: auto; |
|
| 218 |
+ padding-bottom: 1px; |
|
| 219 |
+ padding-top: 2px; |
|
| 220 |
+} |
|
| 221 |
+ |
|
| 198 | 222 |
.embed-responsive {
|
| 199 | 223 |
position: relative; |
| 200 | 224 |
display: block; |
+ 20
- 0
app/views/contact.html
@@ -0,0 +1,20 @@ |
||
| 1 |
+ |
|
| 2 |
+ <div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView"> |
|
| 3 |
+ <a class="btn-menu fixed-top-right" ng-click="fadeOut()">X</a> |
|
| 4 |
+ <div class="Aligner page"> |
|
| 5 |
+ <div class="Aligner-item Aligner-item--top"> |
|
| 6 |
+ <h1><span>{{pageData.title}}</span></h1>
|
|
| 7 |
+ <div class="page-content" ng-bind-html="pageData.content"></div> |
|
| 8 |
+ <form name="contactForm" id="contactForm" class="page-content" ng-submit="contactForm.$valid && sendTheMail()" novalidate> |
|
| 9 |
+ <p><span>Nome:</span> <input type="text" ng-model="msgData.name" id="userName" required></p> |
|
| 10 |
+ <p><span>Email:</span> <input type="email" ng-model="msgData.email" id="userEmail" required></p> |
|
| 11 |
+ <p><span>Mensagem:</span></p> |
|
| 12 |
+ <p><textarea type="text" ng-model="msgData.message" id="userMessage" required rows="10"></textarea></p> |
|
| 13 |
+ <input class="btn" type="submit" ng-click="sendMessage(msgData)" value="Enviar" id="SubmitBtn"> |
|
| 14 |
+ </form> |
|
| 15 |
+ |
|
| 16 |
+ |
|
| 17 |
+ </div> |
|
| 18 |
+ </div> |
|
| 19 |
+ |
|
| 20 |
+ </div> |
+ 8
- 1
app/views/video.html
@@ -2,11 +2,18 @@ |
||
| 2 | 2 |
<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView"> |
| 3 | 3 |
<a class="btn-menu fixed-top-right" ng-click="fadeOut()">X</a> |
| 4 | 4 |
<div class="Aligner video-page"> |
| 5 |
- <div class="Aligner-item"> |
|
| 5 |
+ <div class="Aligner-item" ng-show="showYoutube"> |
|
| 6 | 6 |
<div class="embed-responsive embed-responsive-16by9"> |
| 7 | 7 |
<youtube-video class="embed-responsive-item" video-id="pageData.videoUrl"></youtube-video> |
| 8 | 8 |
</div> |
| 9 | 9 |
</div> |
| 10 |
+ <div class="Aligner-item" ng-show="showFile"> |
|
| 11 |
+ <div class="embed-responsive embed-responsive-16by9"> |
|
| 12 |
+ <fa-app id="app2"> |
|
| 13 |
+ <fa-render-node fa-node="mainView" id="render"></fa-render-node> |
|
| 14 |
+ </fa-app> |
|
| 15 |
+ </div> |
|
| 16 |
+ </div> |
|
| 10 | 17 |
</div> |
| 11 | 18 |
|
| 12 | 19 |
</div> |