From 5253df77c9bd297eb6aa104b06a7fa56998dbc41 Mon Sep 17 00:00:00 2001 From: Leonardo Vidarte Date: Thu, 13 Mar 2014 16:55:46 -0300 Subject: [PATCH 1/7] Added resize elements on /filter according to scale --- public/js/views/liveview.js | 94 +++++++++++++++++++++++++++++++++-- styles/css/filter.less | 46 ++++++++++++++++- views/templates/liveview.jade | 10 ++++ 3 files changed, 146 insertions(+), 4 deletions(-) diff --git a/public/js/views/liveview.js b/public/js/views/liveview.js index d399b9d..e0ca1ce 100644 --- a/public/js/views/liveview.js +++ b/public/js/views/liveview.js @@ -7,9 +7,97 @@ window.LiveView= function(options) { var el = options['el'] || $('body'); this.el = el; - this.view_model = { - items: kb.collectionObservable(collection) - }; + 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) { + console.log('vm.scale', vm.scale, 'vm.type()', vm.type()); + 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")); diff --git a/styles/css/filter.less b/styles/css/filter.less index e39ee21..e0f10a2 100644 --- a/styles/css/filter.less +++ b/styles/css/filter.less @@ -12,7 +12,51 @@ html, body { width: 100%; height: 100%; margin: 0; + background-color: #222; } -#content { + +#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; } + diff --git a/views/templates/liveview.jade b/views/templates/liveview.jade index 6fcbe41..4153b73 100644 --- a/views/templates/liveview.jade +++ b/views/templates/liveview.jade @@ -1,4 +1,14 @@ block content + #controls + span scale + input(data-bind="value: scale") + //span + // a(href="#", title="Fullscreen Video", onclick="document.getElementById('video').webkitEnterFullScreen();") fsVideo + //span + // a(href="#", title="Fullscreen Webvfx", onclick="document.getElementById('content').webkitRequestFullScreen();") fsWebvfx + + video(src="http://ia600508.us.archive.org/20/items/Sita_Sings_the_Blues/Sita_Sings_the_Blues_480p_2150kbps.mp4#t=40", controls="true", autoplay="true", id="video") + img#image(style="position:absolute") #content(data-bind="foreach: items") From 2830e8dab2769a2692a081b6467eba10fdf5b590 Mon Sep 17 00:00:00 2001 From: Leonardo Vidarte Date: Fri, 14 Mar 2014 16:21:55 -0300 Subject: [PATCH 2/7] Created new view /player and restored old view /filter --- public/js/player.js | 8 +++ public/js/views/liveview.js | 94 +------------------------ public/js/views/playerview.js | 118 ++++++++++++++++++++++++++++++++ routes/index.js | 8 ++- styles/css/filter.less | 46 +------------ styles/css/player.less | 62 +++++++++++++++++ views/player.jade | 21 ++++++ views/templates/liveview.jade | 12 ---- views/templates/playerview.jade | 24 +++++++ 9 files changed, 243 insertions(+), 150 deletions(-) create mode 100644 public/js/player.js create mode 100644 public/js/views/playerview.js create mode 100644 styles/css/player.less create mode 100644 views/player.jade create mode 100644 views/templates/playerview.jade diff --git a/public/js/player.js b/public/js/player.js new file mode 100644 index 0000000..05c7db5 --- /dev/null +++ b/public/js/player.js @@ -0,0 +1,8 @@ +Backbone.io.connect(); +var appCollection = new App.Collection(); +window.appCollection = appCollection; + +appCollection.fetch({success: function() { + window.LiveCollection = new Sketch.LiveCollection(); + var live = new PlayerView({ collection: LiveCollection }); +}}); diff --git a/public/js/views/liveview.js b/public/js/views/liveview.js index e0ca1ce..d399b9d 100644 --- a/public/js/views/liveview.js +++ b/public/js/views/liveview.js @@ -7,97 +7,9 @@ window.LiveView= function(options) { 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) { - console.log('vm.scale', vm.scale, 'vm.type()', vm.type()); - 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; + this.view_model = { + items: kb.collectionObservable(collection) + }; function render(time) { webvfx.getImage("video").assignToHTMLImageElement(document.getElementById("image")); diff --git a/public/js/views/playerview.js b/public/js/views/playerview.js new file mode 100644 index 0000000..8a371ff --- /dev/null +++ b/public/js/views/playerview.js @@ -0,0 +1,118 @@ +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) { + console.log('vm.scale', vm.scale, 'vm.type()', vm.type()); + 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]); +}; diff --git a/routes/index.js b/routes/index.js index 5bebc5d..395a0b4 100644 --- a/routes/index.js +++ b/routes/index.js @@ -243,7 +243,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 +343,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 +362,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 }); }); diff --git a/styles/css/filter.less b/styles/css/filter.less index e0f10a2..e39ee21 100644 --- a/styles/css/filter.less +++ b/styles/css/filter.less @@ -12,51 +12,7 @@ html, body { width: 100%; height: 100%; margin: 0; - background-color: #222; } - -#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; + position: absolute; } - diff --git a/styles/css/player.less b/styles/css/player.less new file mode 100644 index 0000000..e0f10a2 --- /dev/null +++ b/styles/css/player.less @@ -0,0 +1,62 @@ +@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; +} + +#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; +} + diff --git a/views/player.jade b/views/player.jade new file mode 100644 index 0000000..837e55a --- /dev/null +++ b/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", + "/js/vendor_filter_others.js", + "/socket.io/socket.io.js", + "/socket.io/backbone.io.js", + "/js/templates_filter.js", + "/js/models_filter.js", + "/js/views_filter.js", + "/js/player.js" + ); + body + block content diff --git a/views/templates/liveview.jade b/views/templates/liveview.jade index 4153b73..ea0dc7a 100644 --- a/views/templates/liveview.jade +++ b/views/templates/liveview.jade @@ -1,14 +1,4 @@ block content - #controls - span scale - input(data-bind="value: scale") - //span - // a(href="#", title="Fullscreen Video", onclick="document.getElementById('video').webkitEnterFullScreen();") fsVideo - //span - // a(href="#", title="Fullscreen Webvfx", onclick="document.getElementById('content').webkitRequestFullScreen();") fsWebvfx - - video(src="http://ia600508.us.archive.org/20/items/Sita_Sings_the_Blues/Sita_Sings_the_Blues_480p_2150kbps.mp4#t=40", controls="true", autoplay="true", id="video") - img#image(style="position:absolute") #content(data-bind="foreach: items") @@ -22,5 +12,3 @@ block content #animation(data-bind="WebvfxAnimationWidget: { data: $data, path: 'uploads/' }") - - diff --git a/views/templates/playerview.jade b/views/templates/playerview.jade new file mode 100644 index 0000000..6feaa7a --- /dev/null +++ b/views/templates/playerview.jade @@ -0,0 +1,24 @@ +block content + #controls + span scale + input(data-bind="value: scale") + //span + // a(href="#", title="Fullscreen Video", onclick="document.getElementById('video').webkitEnterFullScreen();") fsVideo + //span + // a(href="#", title="Fullscreen Webvfx", onclick="document.getElementById('content').webkitRequestFullScreen();") fsWebvfx + + video(src="http://ia600508.us.archive.org/20/items/Sita_Sings_the_Blues/Sita_Sings_the_Blues_480p_2150kbps.mp4#t=40", controls="true", autoplay="true", id="video") + + img#image(style="position:absolute") + #content(data-bind="foreach: items") + + 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() }") + + + + #widget(data-bind="WebvfxSimpleWidget: $data") + + + + #animation(data-bind="WebvfxAnimationWidget: { data: $data, path: 'uploads/' }") + From 1fed6a6f615a1cb32b2c54ce95503ad079759762 Mon Sep 17 00:00:00 2001 From: Leonardo Vidarte Date: Fri, 14 Mar 2014 16:29:52 -0300 Subject: [PATCH 3/7] Restoring origina liveview.jade --- views/templates/liveview.jade | 2 ++ 1 file changed, 2 insertions(+) diff --git a/views/templates/liveview.jade b/views/templates/liveview.jade index ea0dc7a..6fcbe41 100644 --- a/views/templates/liveview.jade +++ b/views/templates/liveview.jade @@ -12,3 +12,5 @@ block content #animation(data-bind="WebvfxAnimationWidget: { data: $data, path: 'uploads/' }") + + From 32badc52f1449ec7f527b26df644d7de0e580d3c Mon Sep 17 00:00:00 2001 From: Leonardo Vidarte Date: Fri, 14 Mar 2014 16:31:54 -0300 Subject: [PATCH 4/7] Removed console.log --- public/js/views/playerview.js | 1 - 1 file changed, 1 deletion(-) diff --git a/public/js/views/playerview.js b/public/js/views/playerview.js index 8a371ff..d909b95 100644 --- a/public/js/views/playerview.js +++ b/public/js/views/playerview.js @@ -46,7 +46,6 @@ window.PlayerView= function(options) { this.scaleWidgets = function(scale) { _.each(self.items(), function(vm) { - console.log('vm.scale', vm.scale, 'vm.type()', vm.type()); if (vm.scale == undefined || vm.scale != scale) { vm.scale = scale; switch (vm.type()) { From bb61e57d878ee5f3241dfeb3325c93a8b20f3db8 Mon Sep 17 00:00:00 2001 From: Leonardo Vidarte Date: Thu, 27 Mar 2014 19:50:53 -0300 Subject: [PATCH 5/7] Added screenfull lib --- routes/index.js | 1 + views/player.jade | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/routes/index.js b/routes/index.js index 395a0b4..2620d4c 100644 --- a/routes/index.js +++ b/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 = [ diff --git a/views/player.jade b/views/player.jade index 837e55a..194d42b 100644 --- a/views/player.jade +++ b/views/player.jade @@ -9,9 +9,9 @@ html(lang='#{lang}') head.js( "/js/vendor_filter.js", "/js/widgets_filter.js", - "/js/vendor_filter_others.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", From 29543e01229038719eb1c252c68c3310eb85bb23 Mon Sep 17 00:00:00 2001 From: Leonardo Vidarte Date: Thu, 27 Mar 2014 19:52:22 -0300 Subject: [PATCH 6/7] Added player div to player view and changed some css styles --- styles/css/player.less | 9 +++++++++ views/templates/playerview.jade | 33 ++++++++++++++++----------------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/styles/css/player.less b/styles/css/player.less index e0f10a2..8664001 100644 --- a/styles/css/player.less +++ b/styles/css/player.less @@ -15,6 +15,9 @@ html, body { background-color: #222; } +#player { +} + #content, #video { position: absolute; @@ -60,3 +63,9 @@ html, body { color: #eee; } +#controls-help { + margin-top: 5px; + text-align: center; + font-family: monospace; + color: #666; +} diff --git a/views/templates/playerview.jade b/views/templates/playerview.jade index 6feaa7a..1d504ba 100644 --- a/views/templates/playerview.jade +++ b/views/templates/playerview.jade @@ -1,24 +1,23 @@ block content #controls span scale - input(data-bind="value: scale") - //span - // a(href="#", title="Fullscreen Video", onclick="document.getElementById('video').webkitEnterFullScreen();") fsVideo - //span - // a(href="#", title="Fullscreen Webvfx", onclick="document.getElementById('content').webkitRequestFullScreen();") fsWebvfx - - video(src="http://ia600508.us.archive.org/20/items/Sita_Sings_the_Blues/Sita_Sings_the_Blues_480p_2150kbps.mp4#t=40", controls="true", autoplay="true", id="video") + input(data-bind="value: scale", id="scale") + #controls-help Space: play/pause - F11: toggle fullscreen img#image(style="position:absolute") - #content(data-bind="foreach: items") - - 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() }") - - - #widget(data-bind="WebvfxSimpleWidget: $data") - + #player + video(src="/videos/sita.mp4#t=40", id="video") + + #content(data-bind="foreach: items") + + 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() }") + + + + #widget(data-bind="WebvfxSimpleWidget: $data") + - - #animation(data-bind="WebvfxAnimationWidget: { data: $data, path: 'uploads/' }") - + + #animation(data-bind="WebvfxAnimationWidget: { data: $data, path: 'uploads/' }") + From 70f92bbeb3687f5852801f99e0342099db438a39 Mon Sep 17 00:00:00 2001 From: Leonardo Vidarte Date: Thu, 27 Mar 2014 20:00:40 -0300 Subject: [PATCH 7/7] Added player objet to handle fullscreen and play/pause actions --- public/js/player.js | 52 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/public/js/player.js b/public/js/player.js index 05c7db5..cac6ec9 100644 --- a/public/js/player.js +++ b/public/js/player.js @@ -4,5 +4,55 @@ window.appCollection = appCollection; appCollection.fetch({success: function() { window.LiveCollection = new Sketch.LiveCollection(); - var live = new PlayerView({ collection: 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(); + } +});