lvidarte/video-player

public/js/player.js

@@ -0,0 +1,58 @@
+Backbone.io.connect();
+var appCollection = new App.Collection();
+window.appCollection = appCollection;
+
+appCollection.fetch({success: function() {
+    window.LiveCollection = new Sketch.LiveCollection();
+    window.playerView = new PlayerView({ collection: LiveCollection });
+}});
+
+var player = {
+    scale: 0,
+    isFullscreen: false,
+
+    enterFullscreen: function() {
+        this.isFullscreen = true;
+        this.scale = playerView.view_model.scale();
+        var new_scale = screen.width * this.scale / parseFloat($('#video').css('width'));
+        playerView.view_model.scale(new_scale);
+        $('#video').css('top', 0);
+        $('#content').css('top', 0);
+        screenfull.request($('#player')[0]);
+    },
+
+    exitFullscreen: function() {
+        this.isFullscreen = false;
+        screenfull.exit();
+        playerView.view_model.scale(this.scale);
+        $('#video').css('top', '100px');
+        $('#content').css('top', '100px');
+    },
+
+    toggleFullscreen: function() {
+        if (this.isFullscreen) {
+            this.exitFullscreen();
+        } else {
+            this.enterFullscreen();
+        }
+    },
+
+    togglePlay: function() {
+        if ($('#video')[0].paused) {
+            $('#video')[0].play();
+        } else {
+            $('#video')[0].pause();
+        }
+    },
+};
+
+document.addEventListener('keyup', function(e) {
+    var F11   = 122;
+    var SPACE = 32;
+    if (e.which == F11) {
+        player.toggleFullscreen();
+    }
+    if (e.which == SPACE) {
+        player.togglePlay();
+    }
+});

public/js/views/playerview.js

@@ -0,0 +1,117 @@
+window.PlayerView= function(options) {
+
+    options = options || {};
+    collection = options['collection'];
+    this.collection = collection;
+
+    var el = options['el'] || $('body');
+    this.el = el;
+
+    var viewModel = kb.ViewModel.extend({
+        constructor: function(collection) {
+            kb.ViewModel.prototype.constructor.apply(this, arguments);
+
+            var self = this;
+            this.items = kb.collectionObservable(collection);
+
+            this.items.subscribe(function() {
+                self.scaleWidgets(self.scale());
+            })
+
+            this.__scale = ko.observable(1);
+            this.scale = ko.computed({
+                read: function() {
+                    return self.__scale();
+                },
+                write: function(scale) {
+                    self.scaleVideo(scale);
+                    self.scaleWidgets(scale);
+                    self.__scale(scale);
+                }
+            });
+
+            this.scaleVideo = function(scale) {
+                var video = $("#video");
+                var width = video.css('width');
+                var height = video.css('height');
+                video.css({
+                    width: this.getScaledValue(width, scale),
+                    height: this.getScaledValue(height, scale),
+                    'margin-left': "-" + this.getScaledValue(width, scale, .5),
+                });
+                $("#content").css({
+                    'margin-left': "-" + this.getScaledValue(width, scale, .5),
+                });
+            }
+
+            this.scaleWidgets = function(scale) {
+                _.each(self.items(), function(vm) {
+                    if (vm.scale == undefined || vm.scale != scale) {
+                        vm.scale = scale;
+                        switch (vm.type()) {
+                            case 'image':
+                            case 'animation':
+                                var attrs = ['width', 'height', 'top', 'left'];
+                                _.each(attrs, function(attr) {
+                                    var value = self.getScaledValue(vm[attr](), scale);
+                                    vm[attr](value);
+                                })
+                                break;
+                            case 'widget':
+                                var o = _.clone(vm.options());
+                                var attrs = [
+                                    'width', 'height', 'left',
+                                    'top', 'font-size', 'line-height'
+                                ];
+                                _.each(attrs, function(attr) {
+                                    var value = self.getScaledValue(o.style[attr], scale);
+                                    o.style[attr] = value;
+                                })
+                                vm.options(o);
+                                break;
+                        }
+                    }
+                });
+            }
+
+            this.getScaledValue = function(value, scale, mul) {
+                var scale = (scale == this.scale())
+                          ? scale
+                          : scale / this.scale();
+
+                switch (typeof value) {
+                    case 'string':
+                        var unit = value.match(/px|em$/);
+                        unit = (unit === null) ? '' : unit[0];
+                        value = parseFloat(value) * scale;
+                        if (mul) value *= mul;
+                        return value + unit;
+                    case 'number':
+                        if (mul) value *= mul;
+                        return value * scale;
+                }
+            }
+
+        }
+    });
+
+    this.view_model = new viewModel(collection);
+    window.vmc = this.view_model;
+
+    function render(time) {
+        webvfx.getImage("video").assignToHTMLImageElement(document.getElementById("image"));
+    }
+
+    function init() {
+        webvfx.renderRequested.connect(render);
+        webvfx.imageTypeMap = { "video" : webvfx.SourceImageType };
+        webvfx.readyRender(true);
+    }
+
+    if (typeof webvfx != 'undefined') {
+        init();
+    }
+
+    el.html(template.playerview({}));
+    ko.applyBindings(this.view_model, el[0]);
+};

routes/index.js

@@ -182,6 +182,7 @@ module.exports = function(app) {
         'backbone/backbone-min.js',
         'knockout.js/knockout.js',
         'knockback/knockback-core.min.js',
+        'screenfull/dist/screenfull.min.js',
     ];
 
     var vendorBower = [
@@ -243,7 +244,7 @@ module.exports = function(app) {
 
     app.get('/js/views.js', folio.serve(viewsJs));
 
-    var filterViews = [ 'liveview' ];
+    var filterViews = [ 'liveview', 'playerview' ];
     var viewsFilterJs = new folio.Glossary(filterViews.map(getViewFileName),
         { minify:app.get('minify') }
     );
@@ -343,7 +344,7 @@ module.exports = function(app) {
     // serve using express
     app.get('/js/templates.js', folio.serve(templateJs));
 
-    var filterTemplates = [ 'liveview' ];
+    var filterTemplates = [ 'liveview', 'playerview' ];
     var templateFilterJs = new folio.Glossary([
         jade_runtime,
         path.join(__dirname, '..', 'views/templates/js/header.js')].concat(
@@ -362,6 +363,10 @@ module.exports = function(app) {
         res.render('filter', {});
     });
 
+    app.get('/player', function(req, res) {
+        res.render('player', {});
+    });
+
     app.get('*',  function(req, res) {
         res.render('index', { name: conf.Branding.name, description: conf.Branding.description });
     });

styles/css/player.less

@@ -0,0 +1,71 @@
+@font-face {
+    font-family: 'ShareRegular';
+    src: url('fonts/ShareRegular.ttf');
+}
+
+@font-face {
+    font-family: 'ShareBold';
+    src: url('fonts/ShareBold.ttf');
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background-color: #222;
+}
+
+#player {
+}
+
+#content,
+#video {
+    position: absolute;
+    top: 100px;
+    left: 50%;
+    margin-left: -424px;
+}
+
+#content {
+    z-index: 1;
+}
+
+#video {
+    border: solid 2px #111;
+}
+
+#controls {
+    width: 300px;
+    text-align: center;
+    margin: 0 auto;
+    padding: 10px;
+    background-color: #111;
+    color: #eee;
+    font-size: 26px;
+    font-family: monospace;
+}
+
+#controls input {
+    width: 100px;
+    border: solid 1px #666;
+    background-color: #333;
+    color: #eee;
+    padding: 5px;
+    font-size: 26px;
+    font-family: monospace;
+}
+
+#controls span {
+    padding: 10px;
+}
+
+#controls a {
+    color: #eee;
+}
+
+#controls-help {
+    margin-top: 5px;
+    text-align: center;
+    font-family: monospace;
+    color: #666;
+}

views/player.jade

@@ -0,0 +1,21 @@
+!!!
+html(lang='#{lang}')
+  head
+    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    meta(charset="utf-8")
+    link(rel='stylesheet', href='/css/player.css')
+    script(src='/lib/head.min.js')
+    script(type='text/javascript')
+      head.js(
+        "/js/vendor_filter.js",
+        "/js/widgets_filter.js",
+        "/socket.io/socket.io.js",
+        "/socket.io/backbone.io.js",
+        "/js/vendor_others.js",
+        "/js/templates_filter.js",
+        "/js/models_filter.js",
+        "/js/views_filter.js",
+        "/js/player.js"
+      );
+  body
+    block content

views/templates/playerview.jade

@@ -0,0 +1,23 @@
+block content
+  #controls
+    span scale
+    input(data-bind="value: scale", id="scale")
+  #controls-help Space: play/pause - F11: toggle fullscreen
+
+  img#image(style="position:absolute")
+
+  #player
+    video(src="/videos/sita.mp4#t=40", id="video")
+
+    #content(data-bind="foreach: items")
+      <!-- ko if: type() == 'image' -->
+      img(data-bind="attr: { src: 'uploads/' + name() }, style: { position: 'absolute', top: top()+'px', width: width()+'px', height: height()+'px', left: left()+'px', right: right()+'px', bottom: bottom()+'px', zIndex: zindex() }")
+      <!-- /ko -->
+
+      <!-- ko if: type() == 'widget' -->
+      #widget(data-bind="WebvfxSimpleWidget: $data")
+      <!-- /ko -->
+
+      <!-- ko if: type() == 'animation' -->
+      #animation(data-bind="WebvfxAnimationWidget: { data: $data, path: 'uploads/' }")
+      <!-- /ko -->