Merge branch 'master' of github.com:anrope/gifmusicvideo

5 files changed, 49 insertions, 15 deletions

diff --git a/play.js b/play.js
index 3e74648..a6a62d4 100644
--- a/play.js
+++ b/play.js
@@ -15,4 +15,4 @@ module.exports = function(req, res) {
             'song_name': song_name
         });
     });
-};
+};
\ No newline at end of file
diff --git a/public/css/play.css b/public/css/play.css
index 68a420a..887ffab 100644
--- a/public/css/play.css
+++ b/public/css/play.css
@@ -78,12 +78,12 @@
     #edit_toggle {
         height: 30px;
         text-align: center;
-        width: 102px;
+        width: 120px;
         background: #000;
         color: #fff;
         position: absolute;
-        bottom: 0;
         right: 0;
+        top: 0;
         font-family: sans-serif;
         font-size: 12px;
         letter-spacing: 1px;
@@ -91,6 +91,8 @@
         padding-top: 10px;
         padding-left: 6px;
         cursor: pointer;
+        box-shadow: 0 1px 1px rgba(0,0,0,0.4);
+        z-index: 9999;
     }
     .gif_box {
         width: 140px;
diff --git a/public/js/controllers.js b/public/js/controllers.js
index 3b5d0af..9e100b2 100644
--- a/public/js/controllers.js
+++ b/public/js/controllers.js
@@ -21,8 +21,8 @@ function PlayerCtrl($scope, $http) {
     $http.get(suggest_api).success(function(data) {
         $scope.base_url = data.base_url;
 
-        //image_slots = Math.floor(($('#side_bottom').width() / 140) - 9);
-        image_slots = 3;
+        image_slots = Math.floor(($('#side_bottom').width() / 140) - 2);
+        // image_slots = 3;
         console.log('image_slots ' + image_slots + ' ' + $('#side_bottom').width());
 
         $scope.images = data.images.slice(0, image_slots);
@@ -92,18 +92,20 @@ function PlayerCtrl($scope, $http) {
     var imageBuffer = [];
 
     function renderNewImages(ms) {
-        var loadBuffer = 8; //sec
-        var renderBuffer = 1; //sec
-        var max = ms + loadBuffer*1000;
+        var offset = position_to_timestamp($('#gif_inner').width());
+        var loadBuffer = 8000 + offset; //msec
+        var renderBuffer = 1000 + offset; //msec
+        var max = ms + loadBuffer;
         var gifs = $scope.song.gifs;
         for(var i=nextImageInStrip; i < gifs.length && gifs[i].timestamp < max; i++) {
             (function() {
                 var gif = gifs[i];
-                console.log(gif);
                 var img = bufferImage(gif.gif);
+                var insertDelay = gif.timestamp < ms + renderBuffer ? 0 : 
+                                    ( gif.timestamp < ms + loadBuffer ? (loadBuffer - renderBuffer - gif.timestamp) : (loadBuffer - renderBuffer) );
                 setTimeout(function() {
-                    addImage(gif.gif, ms);
-                }, (loadBuffer - renderBuffer) * 1000);
+                    addImage(gif.gif, gif.timestamp);
+                }, insertDelay);
                 nextImageInStrip++;
             }());
         }
@@ -115,7 +117,13 @@ function PlayerCtrl($scope, $http) {
     }
 
     function addImage(url, ms) {
-        console.log(arguments);
+        var pos = timestamp_to_position(ms);
+        
+        place_gif({
+            left: pos,
+            background_url: url
+        });
+        console.log(url, pos);
     }
 
     function removePastImages(ms) {
diff --git a/public/js/play_page.js b/public/js/play_page.js
index f128d7d..e76946c 100644
--- a/public/js/play_page.js
+++ b/public/js/play_page.js
@@ -1,6 +1,30 @@
 function setUpDrag() {
     $('#edit_toggle').click( function() {
-        $('#gif_block').toggleClass('expanded');
+        if ( $('#gif_block').hasClass('expanded') ) {
+            $('#gif_block').removeClass('expanded');
+            $(this).text('focus');
+            var window_height = $(window).height()
+            var strip_height = window_height - $('#gif_strip').height();
+            $('#gif_block').height(strip_height);
+            $('#gif_inner').height(strip_height);
+            var placer_height = strip_height;
+            var placer_width = placer_height * 1.25;
+            $('.gif_placed_box').css({
+                'height' : placer_height,
+                'width' : placer_width
+            });
+        } else {
+            $('#gif_block').addClass('expanded').height('100%');
+            $(this).text('contribute');
+            var window_height = $(window).height()
+            $('#gif_inner').height('100%');
+            var placer_height = window_height;
+            var placer_width = placer_height * 1.25;
+            $('.gif_placed_box').css({
+                'height' : placer_height,
+                'width' : placer_width
+            });
+        }
     });
     // Set up strip height
     var window_height = $(window).height();
@@ -23,7 +47,7 @@ function setUpDrag() {
         },
         stop: function() {
             $('#placer').remove();
-            $('#gif_strip').addClass('drag_in_progress');
+            $('#gif_strip').removeClass('drag_in_progress');
         },
         drag: function() {
             var scrolled = parseInt($('#gif_inner').css('left'), 10);
diff --git a/views/play.ejs b/views/play.ejs
index c3368bf..d3b46c7 100644
--- a/views/play.ejs
+++ b/views/play.ejs
@@ -13,8 +13,8 @@
             <div id="pause_icon"></div>
         </div>
     </div>
-    <div id="edit_toggle">contribute</div>
 </div>
+<div id="edit_toggle">focus</div>
 <div id="gif_strip">
     <div id="side_bottom">
         <div ng-repeat="gif in images" class="gif_box" style="background-image: url({{base_url}}{{gif.filename}});"></div>