diff options
Diffstat (limited to 'public/js/mx')
| -rw-r--r-- | public/js/mx/mx.js | 593 | ||||
| -rw-r--r-- | public/js/mx/mx.soundcloud.js | 130 | ||||
| -rw-r--r-- | public/js/mx/mx.video.js | 118 | ||||
| -rw-r--r-- | public/js/mx/mx.vimeo.js | 175 | ||||
| -rw-r--r-- | public/js/mx/mx.youtube.js | 204 |
5 files changed, 0 insertions, 1220 deletions
diff --git a/public/js/mx/mx.js b/public/js/mx/mx.js deleted file mode 100644 index 60651eb..0000000 --- a/public/js/mx/mx.js +++ /dev/null @@ -1,593 +0,0 @@ -/** - * Copyright (C) 2013 by Evan You - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ - -var MX = MX || (function (undefined) { - - var MX = { - version: '0.1.0', - prefix: undefined, - rotationUnit: 'rad', - } - - var floatPrecision = 5 - - // ======================================================================== - // Setup & Compatibility - // ======================================================================== - - var transformProp, - transitionProp, - transformOriginProp, - transformStyleProp, - perspectiveProp, - transitionEndEvent - - var positionAtCenter = true, // whether to auto center objects - centeringCSS // styles to inject for center positioning - - document.addEventListener('DOMContentLoaded', setup) - - function setup () { - - // sniff prefix - - var s = document.body.style - - MX.prefix = - 'webkitTransform' in s ? 'webkit' : - 'mozTransform' in s ? 'moz' : - 'msTransform' in s ? 'ms' : '' - - transformProp = MX.transformProp = addPrefix('transform') - transitionProp = MX.transitionProp = addPrefix('transition') - transformOriginProp = MX.transformOriginProp = addPrefix('transformOrigin') - transformStyleProp = MX.transformStyleProp = addPrefix('transformStyle') - perspectiveProp = MX.perspectiveProp = addPrefix('perspective') - transitionEndEvent = MX.transitionEndEvent = MX.prefix === 'webkit' ? 'webkitTransitionEnd' : 'transitionend' - - // shiv rAF - - var vendors = ['webkit', 'moz', 'ms'] - for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { - window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'] - window.cancelAnimationFrame = - window[vendors[x]+'CancelAnimationFrame'] || - window[vendors[x]+'CancelRequestAnimationFrame'] - } - - // inject centering css - - centeringCSS = document.createElement('style') - centeringCSS.type = 'text/css' - centeringCSS.innerHTML = - '.mx-object3d {' - + 'position: absolute;' - + 'top: 50%;' - + 'left: 50%;}' - injectCenteringCSS() - - window.scrollTo(0,0) - } - - function injectCenteringCSS () { - document.head.appendChild(centeringCSS) - } - - function removeCenteringCSS () { - document.head.removeChild(centeringCSS) - } - - // ======================================================================== - // Utils - // ======================================================================== - - function toDeg (rad) { - return rad / Math.PI * 180 - } - - function toRad (deg) { - return deg / 180 * Math.PI - } - - function buildRotationTranslation (obj) { - - // used when rotationOrigin is set - - var origin = obj.rotationOrigin - if (!origin) { - return - } else { - var dx = origin.x - obj.x, - dy = -(origin.y - obj.y), - dz = -(origin.z - obj.z) - return { - before: 'translate3d(' + dx.toFixed(floatPrecision) +'px,' + dy.toFixed(floatPrecision) + 'px,' + dz.toFixed(floatPrecision) + 'px) ', - after: 'translate3d(' + (-dx).toFixed(floatPrecision) + 'px,' + (-dy).toFixed(floatPrecision) + 'px,' + (-dz).toFixed(floatPrecision) + 'px) ' - } - } - } - - function addPrefix (string) { - if (MX.prefix) { - string = MX.prefix + string.charAt(0).toUpperCase() + string.slice(1) - } - return string - } - - // ======================================================================== - // Base Object3D - // ======================================================================== - - function Object3D (el) { - - this.setupDomElement(el) - this.setCSSTransformStyle('preserve-3d') - this.el.classList.add('mx-object3d') - - this.parent = undefined - this.children = [] - this.updateChildren = true - - this.inverseLookAt = false - - this.persisted = true - - this.reset() - -// this.quaternion = new MX.Quaternion () -// this.quaternion._euler = this - - var width, height, - self = this - - Object.defineProperty(this, 'width', { - get: function () { - return width - || parseInt(self.el.style.width, 10) * app_devicePixelRatio - || 0 - }, - set: function (val) { - width = val - this.el.style.width = (width/app_devicePixelRatio) + 'px' - } - }) - - Object.defineProperty(this, 'height', { - get: function () { - return height - || parseInt(self.el.style.height, 10) * app_devicePixelRatio - || 0 - }, - set: function (val) { - height = val - this.el.style.height = (height/app_devicePixelRatio) + 'px' - } - }) - } - - Object3D.prototype = { - - constructor: Object3D, - - reset: function () { - this.x = this.__x = 0 - this.y = this.__y = 0 - this.z = this.__z = 0 - this.rotationX = this.__rotationX = 0 - this.rotationY = this.__rotationY = 0 - this.rotationZ = this.__rotationZ = 0 - this.scaleX = this.__scaleX = 1 - this.scaleY = this.__scaleY = 1 - this.scaleZ = this.__scaleZ = 1 - this.scale = this.__scale = 1 - this.perspective = this.__perspective = 0 - this.rotationOrigin = undefined - this.followTarget = undefined -// this.quaternion = new MX.Quaternion() - this.dirty = true - this.update() - }, - - setupDomElement: function (el) { - this.el = undefined - if (el instanceof HTMLElement) { - this.el = el - } else if (typeof el === 'string') { - var tag = el.match(/^[^.#\s]*/)[1], - id = el.match(/#[^.#\s]*/), - classes = el.match(/\.[^.#\s]*/g) - this.el = document.createElement(tag || 'div') - if (id) { - this.el.id = id[0].slice(1) - } - if (classes) { - var i = classes.length - while (i--) { - this.el.classList.add(classes[i].slice(1)) - } - } - } else { - this.el = document.createElement('div') - } - }, - - update: function () { - - if (this.updateChildren) { - var i = this.children.length - while (i--) { - this.children[i].update() - } - } - - if (this.followTarget) { - this.lookAt(this.followTarget, false) - } - - if (this.scaleX !== this.__scaleX || - this.scaleY !== this.__scaleY || - this.scaleZ !== this.__scaleZ) { - this.__scaleX = this.scaleX - this.__scaleY = this.scaleY - this.__scaleZ = this.scaleZ - this.dirty = true - } - - if (this.scale !== this.__scale) { - this.scaleX = - this.scaleY = - this.scaleZ = - this.__scaleX = - this.__scaleY = - this.__scaleZ = - this.__scale = - this.scale - this.dirty = true - } - - if (this.rotationX !== this.__rotationX || - this.rotationY !== this.__rotationY || - this.rotationZ !== this.__rotationZ) { - this.__rotationX = this.rotationX - this.__rotationY = this.rotationY - this.__rotationZ = this.rotationZ - this.dirty = true - } - - if (this.x !== this.__x || - this.y !== this.__y || - this.z !== this.__z) { - this.__x = this.x - this.__y = this.y - this.__z = this.z - this.dirty = true - } - - if (this.perspective !== this.__perspective) { - this.__perspective = this.perspective - this.dirty = true - } - - if (this.dirty && this.el) { - - var rotationTranslation = buildRotationTranslation(this), - rotation = 'rotateX(' + this.rotationX.toFixed(floatPrecision) + MX.rotationUnit + ') ' - + 'rotateY(' + this.rotationY.toFixed(floatPrecision) + MX.rotationUnit + ') ' - + 'rotateZ(' + this.rotationZ.toFixed(floatPrecision) + MX.rotationUnit + ') ' - - var transformString = - (MX.positionAtCenter ? 'translate3d(-50%, -50%, 0) ' : '') - + (this.perspective ? 'perspective(' + this.perspective + 'px) ' : '') - + 'translate3d(' - + this.x.toFixed(floatPrecision || 0) + 'px,' - + (-this.y).toFixed(floatPrecision) + 'px,' - + (-this.z).toFixed(floatPrecision) + 'px) ' - + 'scale3d(' - + (app_devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' - + (app_devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' - + (app_devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' - - if (rotationTranslation) { - transformString += rotationTranslation.before - + rotation - + rotationTranslation.after - - } else { - transformString += rotation - } - - this.el.style[transformProp] = transformString - this.dirty = false - } - - return this - - }, - - // taken from three.js - setFromQuaternion: function ( q, order, update ) { - // q is assumed to be normalized - - // http://www.mathworks.com/matlabcentral/fileexchange/20696-function-to-convert-between-dcm-euler-angles-quaternions-and-euler-vectors/content/SpinCalc.m - - var sqx = q.x * q.x; - var sqy = q.y * q.y; - var sqz = q.z * q.z; - var sqw = q.w * q.w; - - this.rotationX = Math.atan2( 2 * ( q.x * q.w - q.y * q.z ), ( sqw - sqx - sqy + sqz ) ); - this.rotationY = Math.asin( clamp( 2 * ( q.x * q.z + q.y * q.w ), -1, 1 ) ); - this.rotationZ = Math.atan2( 2 * ( q.z * q.w - q.x * q.y ), ( sqw + sqx - sqy - sqz ) ); - }, - - lookAt: function (target, update) { - var r = this.getLookAtEuler(target) - this.setRotation(r) - if (update !== false) this.update() - return this - }, - - getLookAtEuler: function (target) { - // euler order XYZ - var r = {}, - dx = target.x - this.x, - dy = target.y - this.y, - dz = target.z - this.z - if (this.inverseLookAt) { - dx = -dx - dy = -dy - dz = -dz - } - if (dz === 0) dz = 0.001 - r.x = -Math.atan2(dy, dz) - var flip = dz > 0 ? 1 : -1 - r.y = flip * Math.atan2(dx * Math.cos(r.x), dz * -flip) - r.z = Math.atan2(Math.cos(r.x), Math.sin(r.x) * Math.sin(r.y)) - Math.PI / 2 - if (MX.rotationUnit === 'deg') { - r.x = toDeg(r.x) - r.y = toDeg(r.y) - r.z = toDeg(r.z) - } - return r - }, - - add: function () { - if (!this.el) return - var parent = this - Array.prototype.forEach.call(arguments, function (child) { - if (!child instanceof Object3D) return - parent.el.appendChild(child.el) - if (!parent.children) parent.children = [] - parent.children.push(child) - child.parent = parent - }) - return this - }, - - remove: function () { - var parent = this - Array.prototype.forEach.call(arguments, function (child) { - var index = parent.children.indexOf(child) - if (index !== -1) { - parent.children.splice(index, 1) - parent.el.removeChild(child.el) - child.parent = undefined - } - }) - return this - }, - - addTo: function (target) { - if (typeof target === 'string') { - target = document.querySelector(target) - } - if (target instanceof HTMLElement && target.appendChild) { - target.appendChild(this.el) - } else if (target instanceof Object3D || target instanceof Scene) { - target.add(this) - } - return this - }, - - removeElement: function () { - if (this.el.parentNode) { - this.el.parentNode.removeChild(this.el) - } - }, - - setPosition: function (tar) { - this.x = (tar.x || tar.x === 0) ? tar.x : this.x - this.y = (tar.y || tar.y === 0) ? tar.y : this.y - this.z = (tar.z || tar.z === 0) ? tar.z : this.z - }, - - setRotation: function (tar) { - this.rotationX = (tar.x || tar.x === 0) ? tar.x : this.rotationX - this.rotationY = (tar.y || tar.y === 0) ? tar.y : this.rotationY - this.rotationZ = (tar.z || tar.z === 0) ? tar.z : this.rotationZ - }, - - setScale: function (tar) { - this.scaleX = (tar.x || tar.x === 0) ? tar.x : this.scaleX - this.scaleY = (tar.y || tar.y === 0) ? tar.y : this.scaleY - this.scaleZ = (tar.z || tar.z === 0) ? tar.z : this.scaleZ - }, - - setCSSTransformOrigin: function (origin) { - this.el && (this.el.style[transformOriginProp] = origin) - return this - }, - - setCSSTransformStyle: function (style) { - this.el && (this.el.style[transformStyleProp] = style) - return this - }, - - setCSSTransition: function (trans) { - this.el && (this.el.style[transitionProp] = trans) - return this - }, - - setCSSPerspective: function (pers) { - this.el && (this.el.style[perspectiveProp] = pers) - return this - }, - - move: function(ops){ - var layer = this - layer.ops = defaults(ops, layer.ops) - for (var i in ops) { - layer[i] = ops[i] - } - layer.dirty = true - layer.update() - }, - - onTransitionEnd: function (callback) { - this.cancelTransitionEnd() - var el = this.el - el.addEventListener(transitionEndEvent, onEnd) - function onEnd () { - el.removeEventListener(transitionEndEvent, onEnd) - callback() - } - }, - - cancelTransitionEnd: function () { - this.el.removeEventListener(transitionEndEvent) - }, - - toString: function(params){ - params = params || "id width height depth x y z rotationX rotationY rotationZ scale".split(" ") - return this.__toString(params) - }, - - __toString: function(params, func){ - this.id = this.id || _.uniqueId() - var list = [], - obj = {}, - type = this.type || "Object3d", - name = type.toLowerCase(), - val, - param - for (var i in params) { - param = params[i] - val = this[param] - if (val === 0 && ! func) continue; - if (typeof val == "number") { - if (param.indexOf("rotation") != -1) { - obj[param] = Number(val.toFixed(3)) - } - else { - obj[param] = ~~val - } - } - else { - obj[param] = val - } - } - - return (func || "var " + name + " = new MX." + type ) + "(" + - JSON.stringify(obj, undefined, 2) + - ")\n" + (func ? "" : "scene.add(" + name + ")") - }, - - contains: function(x,y,z){ - var containsX = false, - containsY = false, - containsZ = false - - if (x === null) { - containsX = true - } - else { - containsX = abs(this.x - x) <= this.width/2 - } - - if (y === null) { - containsY = true - } - else { - containsY = abs(this.y - y) <= this.height/2 - } - - if (z === null) { - containsZ = true - } - else { - containsZ = abs(this.z - z) <= this.depth/2 - } - - return (containsX && containsY && containsZ) - } - - } - - // ======================================================================== - // Inheritance - // ======================================================================== - - Object3D.extend = extend.bind(Object3D) - - function extend (props) { - var Super = this - var ExtendedObject3D = function () { - Super.call(this) - props.init && props.init.apply(this, arguments) - } - ExtendedObject3D.prototype = Object.create(Super.prototype) - for (var prop in props) { - if (props.hasOwnProperty(prop) && prop !== 'init') { - ExtendedObject3D.prototype[prop] = props[prop] - } - } - ExtendedObject3D.extend = extend.bind(ExtendedObject3D) - return ExtendedObject3D - } - - // ======================================================================== - // Expose API - // ======================================================================== - - MX.Object3D = Object3D - MX.toRad = toRad - MX.toDeg = toDeg - - // center positioning getter setter - Object.defineProperty(MX, 'positionAtCenter', { - get: function () { - return positionAtCenter - }, - set: function (val) { - if (typeof val !== 'boolean') return - positionAtCenter = val - if (positionAtCenter) { - injectCenteringCSS() - } else { - removeCenteringCSS() - } - } - }) - - return MX - -})()
\ No newline at end of file diff --git a/public/js/mx/mx.soundcloud.js b/public/js/mx/mx.soundcloud.js deleted file mode 100644 index fecb2f4..0000000 --- a/public/js/mx/mx.soundcloud.js +++ /dev/null @@ -1,130 +0,0 @@ -MX.Soundcloud = MX.Object3D.extend({ - init: function (ops) { - - this.type = "Soundcloud" - this.media = ops.media - this.width = 0 - this.height = 0 - this.x = ops.x || 0 - this.y = ops.y || 0 - this.z = ops.z || 0 - this.scale = ops.scale || 1 - this.backface = ops.backface || false - - ops.className && this.el.classList.add(ops.className) - this.backface && this.el.classList.add("backface-visible") - this.el.classList.add("audio") - this.el.classList.add("mx-scenery") - - this.el.style.backgroundRepeat = 'no-repeat' - this.paused = true - - this.ops = ops - }, - - load: function(ops){ - if (ops) { - ops = this.ops = defaults(ops, this.ops) - } - else { - ops = this.ops - } - - this.width = ops.media.width - this.height = ops.media.height - - var tag = Parser.lookup.soundcloud.tag(ops.media) - var $iframe = $(tag) - var iframe = $iframe[0] - $iframe.css('z-index', '-1') - this.el.appendChild( iframe ) - - var overlay = this.overlay = document.createElement("div") - overlay.style.width = "100%" - overlay.style.height = "100%" - overlay.style.position = "absolute" - overlay.style.top = "0" - overlay.style.left = "0" - overlay.style.zIndex = "2" - overlay.className = "overlay" - this.el.appendChild(overlay) - - this.player = SC.Widget( iframe ) - this.player.setVolume(80) - - this.duration = 0 - - this.player.bind(SC.Widget.Events.READY, this.ready.bind(this)) -// this.player.bind(SC.Widget.Events.LOAD_PROGRESS, this.loadProgress.bind(this)) -// this.player.bind(SC.Widget.Events.PLAY_PROGRESS, this.playProgress.bind(this)) - this.player.bind(SC.Widget.Events.PLAY, this.didPlay.bind(this)) - this.player.bind(SC.Widget.Events.PAUSE, this.didPause.bind(this)) - this.player.bind(SC.Widget.Events.FINISH, this.finished.bind(this)) - }, - - ready: function(){ - this.seek( this.media.keyframe || 0 ) - - if (this.media.autoplay) { - this.play() - } - - this.player.getDuration(function(duration){ - this.duration = duration - }.bind(this)) - }, - - play: function(){ - this.player.play() - }, - - pause: function(){ - this.player.pause() - }, - - toggle: function(state){ - if (typeof state === "boolean") { - if (state) this.play() - else this.pause() - } - else { - this.player.toggle() - } - }, - - seek: function(n){ - if (n < 1) { - n = n * this.duration - } - this.player.seekTo(n) - }, - - setLoop: function(state){ - this.media.loop = state - }, - - setVolume: function(n){ - if (this.muted || ! this.player) return - this.player.setVolume(floor( n * 100 )) - }, - - didPlay: function(){ - this.paused = false - }, - - didPause: function(){ - this.paused = true - }, - - finished: function(){ - console.log("soundcloud finished") - if (this.media.loop) { - this.seek(0) - this.play() - } - else if (this.bound) { - $(".playButton").removeClass('playing') - } - }, - -}) diff --git a/public/js/mx/mx.video.js b/public/js/mx/mx.video.js deleted file mode 100644 index 53ccf2e..0000000 --- a/public/js/mx/mx.video.js +++ /dev/null @@ -1,118 +0,0 @@ -MX.Video = MX.Object3D.extend({ - - init: function (ops) { - - this.type = "Video" - - this.media = ops.media - this.width = ops.media.width - this.height = ops.media.height - this.x = ops.x || 0 - this.y = ops.y || 0 - this.z = ops.z || 0 - this.rotationX = ops.rotationX || 0 - this.rotationY = ops.rotationY || 0 - this.rotationZ = ops.rotationZ || 0 - this.scale = ops.scale || 1 - this.backface = ops.backface || false - - ops.className && this.el.classList.add(ops.className) - this.backface && this.el.classList.add("backface-visible") - this.el.classList.add("video") - this.el.classList.add("mx-scenery") - this.paused = !! this.media.autoplay - this.playing = false - this.muted = app.muted || !! this.media.mute - }, - - load: function(ops){ - this.paused = true - - this.player = document.createElement('video') - this.player.addEventListener("loadedmetadata", this.ready.bind(this)) - this.player.addEventListener("error", this.error.bind(this)) - this.player.addEventListener("ended", this.finished.bind(this)) - this.player.width = "100%" - this.player.height = "100%" - this.player.src = this.media.url - this.player.load() - - this.el.appendChild(this.player) - }, - - ready: function(){ - this.seek( this.media.keyframe || 0 ) - - if (this.media.mute) { - this.mute() - } - else { - this.unmute() - } - - if (this.media.autoplay) { - this.play() - } - }, - - error: function(err){ - console.log("video error", err) - }, - - play: function(){ - this.paused = false - this.playing = true - this.player.play() - }, - - pause: function(){ - this.paused = true - this.playing = false - this.player.pause() - }, - - seek: function(n){ - if (n < 1) { - n = n * this.duration() - } - this.player.currentTime = n - }, - - mute: function(){ - this.player.muted = true - this.player.volume = 0 - this.muted = true - }, - - unmute: function(){ - this.player.muted = false - this.player.volume = 0.8 - this.muted = false - }, - - setVolume: function(n){ - if (this.muted || ! this.player) return - this.player.volume = n - }, - - setLoop: function(state){ - this.media.loop = state - }, - - duration: function(){ - return this.player.duration - }, - - finished: function(){ - console.log("video finished") - if (this.media.loop) { - this.seek(0) - this.play() - } - else if (this.bound) { - $(".playButton").removeClass('playing') - } - }, - - -}) diff --git a/public/js/mx/mx.vimeo.js b/public/js/mx/mx.vimeo.js deleted file mode 100644 index af138ae..0000000 --- a/public/js/mx/mx.vimeo.js +++ /dev/null @@ -1,175 +0,0 @@ -MX.Vimeo = MX.Object3D.extend({ - - init: function (ops) { - - this.type = "Vimeo" - - this.media = ops.media - this.width = ops.media.width - this.height = ops.media.height - this.x = ops.x || 0 - this.y = ops.y || 0 - this.z = ops.z || 0 - this.rotationX = ops.rotationX || 0 - this.rotationY = ops.rotationY || 0 - this.rotationZ = ops.rotationZ || 0 - this.scale = ops.scale || 1 - this.backface = ops.backface || false - - ops.className && this.el.classList.add(ops.className) - this.backface && this.el.classList.add("backface-visible") - this.el.classList.add("video") - this.el.classList.add("mx-scenery") - this.playing = false - this.paused = !! this.media.autoplay - this.muted = app.muted || !! this.media.mute - this.started = false - }, - - load: function (ops) { - var uid = 'player-' + Uid () - var loop = this.media.loop ? 'loop=1' : "" - var preload = document.createElement("iframe") - preload.id = uid - preload.setAttribute("src", "//player.vimeo.com/video/" + this.media.token + "?api=1&badge=0&controls=0branding=0&byline=0&portrait=0&title=0&" + loop + "&player_id=" + uid) - preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" - preload.style.width = "100%" - preload.style.height = "100%" - preload.style.border = "0" - preload.style.pointerEvents = "none" - preload.className = "preload" - this.el.appendChild(preload) - this.player = $f(preload) - - this.player.addEvent('ready', $.proxy(this.ready, this)) - }, - - ready: function(){ - console.log("vimeo ready") - - this.started = true - - // wait until ready before binding events. other events: play, pause - this.player.addEvent('play', $.proxy(this.onPlay, this)) - this.player.addEvent('pause', $.proxy(this.onPause, this)) - this.player.addEvent('finish', $.proxy(this.finished, this)) - - // this is async on vimeo so call it asap - this.player.api('getDuration', $.proxy(function(n){ - console.log("vimeo duration", n) - this.player.duration = n - }, this)) - - if (this.media.mute) { - this.mute() - } - else { - this.unmute() - } - - this.seek( this.media.keyframe || 0 ) - - if (this.media.autoplay) { - this.play() - } - else { - this.pause() - } - }, - - error: function(err){ - console.log("vimeo error", err) - }, - - play: function(){ - this.paused = false - this.player.api('play') - }, - - pause: function(){ - this.paused = true - this.player.api('pause') - }, - - seek: function(n){ - // defer seek until we have duration - if (! this.duration()) { - setTimeout($.proxy(function(){ - this.seek(n) - }, this), 300) - return - } - - if (! this.started) { - return - } - - if (n < 1) { - n = n * this.duration() - } - this.player.api('seekTo', max(0, n-1)) - if (this.paused) { - this.paused = false - this.play() - this.pause() - setTimeout($.proxy(function(){ - this.pause() - }, this), 100) - } - }, - - duration: function(){ - return this.player.duration - }, - - mute: function(){ - this.player.api('setVolume', 0.0) - this.muted = true - }, - - unmute: function(){ - this.player.api('setVolume', 0.8) - this.muted = false - }, - - setVolume: function(n){ - if (this.muted || ! this.player) return - this.player.api('setVolume', n) - }, - - setLoop: function(state){ - this.media.loop = state - this.player.api('setLoop', state) - }, - - onPlay: function(){ - if (this.paused) { - this.pause() - } - else { - this.playing = true - } - }, - - onPause: function(){ - if (! this.paused) { - this.play() - } - else { - this.playing = false - } - }, - - finished: function(){ - console.log("vimeo finished") - if (this.media.loop) { - this.seek(0) - this.play() - } -// else if (this.bound) { - if (! this.media.loop && this.bound) { - $(".playButton").removeClass('playing') - } - } - -}) diff --git a/public/js/mx/mx.youtube.js b/public/js/mx/mx.youtube.js deleted file mode 100644 index 8cd9f59..0000000 --- a/public/js/mx/mx.youtube.js +++ /dev/null @@ -1,204 +0,0 @@ -MX.Youtube = MX.Object3D.extend({ - - init: function (ops) { - - this.type = "Youtube" - - this.media = ops.media - this.width = ops.media.width - this.height = ops.media.height - this.x = ops.x || 0 - this.y = ops.y || 0 - this.z = ops.z || 0 - this.rotationX = ops.rotationX || 0 - this.rotationY = ops.rotationY || 0 - this.rotationZ = ops.rotationZ || 0 - this.scale = ops.scale || 1 - this.backface = ops.backface || false - - ops.className && this.el.classList.add(ops.className) - this.backface && this.el.classList.add("backface-visible") - this.el.classList.add("video") - this.el.classList.add("mx-scenery") - this.paused = !! this.media.autoplay - this.playing = false - this.muted = app.muted || !! this.media.mute - }, - - load: function (ops) { - var base = this - var uid = 'player-' + Uid () - var preload = document.createElement("div") - preload.id = uid - preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" - preload.style.backgroundSize = "cover" - preload.style.width = "100%" - preload.style.height = "100%" - preload.style.pointerEvents = "none" - preload.style.position = "absolute" - preload.style.top = "0" - preload.style.left = "0" - preload.style.zIndex = "1" - preload.className = "preload" - this.el.appendChild(preload) - - var overlay = this.overlay = document.createElement("div") - overlay.style.width = "100%" - overlay.style.height = "100%" - overlay.style.position = "absolute" - overlay.style.top = "0" - overlay.style.left = "0" - overlay.style.zIndex = "2" - overlay.className = "overlay" - this.el.appendChild(overlay) - this.defer(uid) - }, - - defer: function (uid){ - if (! YT || ! YT.loaded) { - setTimeout(function(){ - this.defer(uid) - }.bind(this), 300) - } - else { - // not sure why i need to delay here.. - // stopped working until i added the setTimeout - setTimeout(function(){ - this.build(uid) - }.bind(this), 20) - } - }, - - build: function(uid){ - this.player = new YT.Player(uid, { - videoId: this.media.token, - width: this.width, - height: this.height, - events: { - onReady: this.ready.bind(this), - onError: this.error.bind(this), - onStateChange: this.statechange.bind(this), - }, - playerVars: { - autohide: 1, - autoplay: 0, - disablekb: 1, - controls: 0, - enablejsapi: 1, - origin: window.location.origin, - fs: 0, - modestbranding: 1, - iv_load_policy: 3, // no annotations - loop: 0, - showinfo: 0, - rel: 0, - wmode: 'opaque', - }, - }) - }, - - ready: function(){ - console.log("youtube ready") - - if (this.media.autoplay) { - this.play() - } - else { - this.pause() - } - - if (this.media.mute) { - this.mute() - } - else { - this.unmute() - } - - this.seek( this.media.keyframe || 0 ) - }, - - error: function(err){ - console.log("youtube error", err) - }, - - statechange: function(e){ - switch (e.data) { - case -1: // unstarted - break - case 0: // finished - this.finished() - break - case 1: // play - if (this.paused) { - this.pause() - } - break - case 2: // pause - break - case 3: // buffering - break - case 5: // cued - break - } - }, - - play: function(){ - this.paused = false - this.playing = true - this.player.playVideo() - }, - - pause: function(){ - this.paused = true - this.playing = false - this.player.pauseVideo() - }, - - seek: function(n, allowSeekAhead){ - if (n < 1) { - n = n * this.duration() - } - allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true - this.player.seekTo(n, true) // set to false if seeking manually - }, - - duration: function(){ - return this.player.getDuration() - }, - - mute: function(){ - this.player.mute() - this.muted = true - }, - - unmute: function(){ - this.player.unMute() - this.player.setVolume(80) - this.muted = false - }, - - setVolume: function(n){ - if (this.muted || ! this.player || ! this.player.setVolume) return - this.player.setVolume( floor(n * 100) ) - }, - - setLoop: function(state){ - this.media.loop = state - }, - - finished: function(){ - console.log("youtube finished") - if (this.media.loop) { - this.seek(0) - this.play() - } - else if (this.bound) { - $(".playButton").removeClass('playing') - } - } - -}) - -window.onYouTubePlayerAPIReady = function(){ - // console.log("youtube api ready") -} |