Actualización

app/Resources/public/assets/vrview/src/api/README.md

@@ -0,0 +1,2 @@
+This directory contains all of the JavaScript that is required for the
+VR View JavaScript API.

app/Resources/public/assets/vrview/src/api/iframe-message-sender.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var Message = require('../message');
+
+/**
+ * Sends events to the embedded VR view IFrame via postMessage. Also handles
+ * messages sent back from the IFrame:
+ *
+ *    click: When a hotspot was clicked.
+ *    modechange: When the user changes viewing mode (VR|Fullscreen|etc).
+ */
+function IFrameMessageSender(iframe) {
+  if (!iframe) {
+    console.error('No iframe specified');
+    return;
+  }
+  this.iframe = iframe;
+
+  // On iOS, if the iframe is across domains, also send DeviceMotion data.
+  if (this.isIOS_()) {
+    window.addEventListener('devicemotion', this.onDeviceMotion_.bind(this), false);
+  }
+}
+
+/**
+ * Sends a message to the associated VR View IFrame.
+ */
+IFrameMessageSender.prototype.send = function(message) {
+  var iframeWindow = this.iframe.contentWindow;
+  iframeWindow.postMessage(message, '*');
+};
+
+IFrameMessageSender.prototype.onDeviceMotion_ = function(e) {
+  var message = {
+    type: Message.DEVICE_MOTION,
+    deviceMotionEvent: this.cloneDeviceMotionEvent_(e)
+  };
+
+  this.send(message);
+};
+
+IFrameMessageSender.prototype.cloneDeviceMotionEvent_ = function(e) {
+  return {
+    acceleration: {
+      x: e.acceleration.x,
+      y: e.acceleration.y,
+      z: e.acceleration.z,
+    },
+    accelerationIncludingGravity: {
+      x: e.accelerationIncludingGravity.x,
+      y: e.accelerationIncludingGravity.y,
+      z: e.accelerationIncludingGravity.z,
+    },
+    rotationRate: {
+      alpha: e.rotationRate.alpha,
+      beta: e.rotationRate.beta,
+      gamma: e.rotationRate.gamma,
+    },
+    interval: e.interval,
+    timeStamp: e.timeStamp
+  };
+};
+
+IFrameMessageSender.prototype.isIOS_ = function() {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+};
+
+module.exports = IFrameMessageSender;

app/Resources/public/assets/vrview/src/api/main.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var Player = require('./player');
+
+var VRView = {
+  Player: Player
+};
+
+module.exports = VRView;

app/Resources/public/assets/vrview/src/api/player.js

@@ -0,0 +1,316 @@
+/*
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var EventEmitter = require('eventemitter3');
+var IFrameMessageSender = require('./iframe-message-sender');
+var Message = require('../message');
+var Util = require('../util');
+
+// Save the executing script. This will be used to calculate the embed URL.
+var CURRENT_SCRIPT_SRC = Util.getCurrentScript().src;
+var FAKE_FULLSCREEN_CLASS = 'vrview-fake-fullscreen';
+
+/**
+ * Entry point for the VR View JS API.
+ *
+ * Emits the following events:
+ *    ready: When the player is loaded.
+ *    modechange: When the viewing mode changes (normal, fullscreen, VR).
+ *    click (id): When a hotspot is clicked.
+ */
+function Player(selector, contentInfo) {
+  // Create a VR View iframe depending on the parameters.
+  var iframe = this.createIframe_(contentInfo);
+  this.iframe = iframe;
+
+  var parentEl = document.querySelector(selector);
+  parentEl.appendChild(iframe);
+
+  // Make a sender as well, for relying commands to the child IFrame.
+  this.sender = new IFrameMessageSender(iframe);
+
+  // Listen to messages from the IFrame.
+  window.addEventListener('message', this.onMessage_.bind(this), false);
+
+  // Expose a public .isPaused attribute.
+  this.isPaused = false;
+
+  // Expose a public .isMuted attribute.
+  this.isMuted = false;
+  if (typeof contentInfo.muted !== 'undefined') {
+    this.isMuted = contentInfo.muted;
+  }
+
+  // Other public attributes
+  this.currentTime = 0;
+  this.duration = 0;
+  this.volume = contentInfo.volume != undefined ? contentInfo.volume : 1;
+
+  if (Util.isIOS()) {
+    this.injectFullscreenStylesheet_();
+  }
+}
+Player.prototype = new EventEmitter();
+
+/**
+ * @param pitch {Number} The latitude of center, specified in degrees, between
+ * -90 and 90, with 0 at the horizon.
+ * @param yaw {Number} The longitude of center, specified in degrees, between
+ * -180 and 180, with 0 at the image center.
+ * @param radius {Number} The radius of the hotspot, specified in meters.
+ * @param distance {Number} The distance of the hotspot from camera, specified
+ * in meters.
+ * @param hotspotId {String} The ID of the hotspot.
+ */
+Player.prototype.addHotspot = function(hotspotId, params) {
+  // TODO: Add validation to params.
+  var data = {
+    pitch: params.pitch,
+    yaw: params.yaw,
+    radius: params.radius,
+    distance: params.distance,
+    id: hotspotId
+  };
+  this.sender.send({type: Message.ADD_HOTSPOT, data: data});
+};
+
+Player.prototype.play = function() {
+  this.sender.send({type: Message.PLAY});
+};
+
+Player.prototype.pause = function() {
+  this.sender.send({type: Message.PAUSE});
+};
+
+/**
+ * Equivalent of HTML5 setSrc().
+ * @param {String} contentInfo
+ */
+Player.prototype.setContent = function(contentInfo) {
+  this.absolutifyPaths_(contentInfo);
+  var data = {
+    contentInfo: contentInfo
+  };
+  this.sender.send({type: Message.SET_CONTENT, data: data});
+};
+
+/**
+ * Sets the software volume of the video. 0 is mute, 1 is max.
+ */
+Player.prototype.setVolume = function(volumeLevel) {
+  var data = {
+    volumeLevel: volumeLevel
+  };
+  this.sender.send({type: Message.SET_VOLUME, data: data});
+};
+
+Player.prototype.getVolume = function() {
+  return this.volume;
+};
+
+/**
+ * Sets the mute state of the video element. true is muted, false is unmuted.
+ */
+Player.prototype.mute = function(muteState) {
+  var data = {
+    muteState: muteState
+  };
+  this.sender.send({type: Message.MUTED, data: data});
+};
+
+/**
+ * Set the current time of the media being played
+ * @param {Number} time
+ */
+Player.prototype.setCurrentTime = function(time) {
+  var data = {
+    currentTime: time
+  };
+  this.sender.send({type: Message.SET_CURRENT_TIME, data: data});
+};
+
+Player.prototype.getCurrentTime = function() {
+  return this.currentTime;
+};
+
+Player.prototype.getDuration = function() {
+  return this.duration;
+};
+Player.prototype.setFullscreen = function() {
+  this.sender.send({type: Message.SET_FULLSCREEN});
+};
+
+/**
+ * Helper for creating an iframe.
+ *
+ * @return {IFrameElement} The iframe.
+ */
+Player.prototype.createIframe_ = function(contentInfo) {
+  this.absolutifyPaths_(contentInfo);
+
+  var iframe = document.createElement('iframe');
+  iframe.setAttribute('allowfullscreen', true);
+  iframe.setAttribute('scrolling', 'no');
+  iframe.style.border = 0;
+
+  // Handle iframe size if width and height are specified.
+  if (contentInfo.hasOwnProperty('width')) {
+    iframe.setAttribute('width', contentInfo.width);
+    delete contentInfo.width;
+  }
+  if (contentInfo.hasOwnProperty('height')) {
+    iframe.setAttribute('height', contentInfo.height);
+    delete contentInfo.height;
+  }
+
+  var url = this.getEmbedUrl_() + Util.createGetParams(contentInfo);
+  iframe.src = url;
+
+  return iframe;
+};
+
+Player.prototype.onMessage_ = function(event) {
+  var message = event.data;
+  if (!message || !message.type) {
+    console.warn('Received message with no type.');
+    return;
+  }
+  var type = message.type.toLowerCase();
+  var data = message.data;
+  switch (type) {
+    case 'ready':
+      if (data !== undefined && data.duration !== undefined) {
+        this.duration = data.duration;
+      }
+    case 'modechange':
+    case 'error':
+    case 'click':
+    case 'ended':
+    case 'getposition':
+      this.emit(type, data);
+      break;
+    case 'volumechange':
+      this.volume = data;
+      this.emit('volumechange', data);
+      break;
+    case 'muted':
+      this.isMuted = data;
+      this.emit('mute', data);
+      break;
+    case 'timeupdate':
+      this.currentTime = data;
+      this.emit('timeupdate', {
+        currentTime: this.currentTime,
+        duration: this.duration
+      });
+      break;
+    case 'play':
+    case 'paused':
+      this.isPaused = data;
+      if (this.isPaused) {
+        this.emit('pause', data);
+      } else {
+        this.emit('play', data);
+      }
+      break;
+    case 'enter-fullscreen':
+    case 'enter-vr':
+      this.setFakeFullscreen_(true);
+      break;
+    case 'exit-fullscreen':
+      this.setFakeFullscreen_(false);
+      break;
+    default:
+      console.warn('Got unknown message of type %s from %s', message.type, message.origin);
+  }
+};
+
+/**
+ * Note: iOS doesn't support the fullscreen API.
+ * In standalone <iframe> mode, VR View emulates fullscreen by redirecting to
+ * another page.
+ * In JS API mode, we stretch the iframe to cover the extent of the page using
+ * CSS. To do this cleanly, we also inject a stylesheet.
+ */
+Player.prototype.setFakeFullscreen_ = function(isFullscreen) {
+  if (isFullscreen) {
+    this.iframe.classList.add(FAKE_FULLSCREEN_CLASS);
+  } else {
+    this.iframe.classList.remove(FAKE_FULLSCREEN_CLASS);
+  }
+};
+
+Player.prototype.injectFullscreenStylesheet_ = function() {
+  var styleString = [
+    'iframe.' + FAKE_FULLSCREEN_CLASS,
+    '{',
+      'position: fixed !important;',
+      'display: block !important;',
+      'z-index: 9999999999 !important;',
+      'top: 0 !important;',
+      'left: 0 !important;',
+      'width: 100% !important;',
+      'height: 100% !important;',
+      'margin: 0 !important;',
+    '}',
+  ].join('\n');
+  var style = document.createElement('style');
+  style.innerHTML = styleString;
+  document.body.appendChild(style);
+};
+
+Player.prototype.getEmbedUrl_ = function() {
+  // Assume that the script is in $ROOT/build/something.js, and that the iframe
+  // HTML is in $ROOT/index.html.
+  //
+  // E.g: /vrview/2.0/build/vrview.min.js => /vrview/2.0/index.html.
+  var path = CURRENT_SCRIPT_SRC;
+  var split = path.split('/');
+  var rootSplit = split.slice(0, split.length - 2);
+  var rootPath = rootSplit.join('/');
+  return rootPath + '/index.html';
+};
+
+Player.prototype.getDirName_ = function() {
+  var path = window.location.pathname;
+  path = path.substring(0, path.lastIndexOf('/'));
+  return location.protocol + '//' + location.host + path;
+};
+
+/**
+ * Make all of the URLs inside contentInfo absolute instead of relative.
+ */
+Player.prototype.absolutifyPaths_ = function(contentInfo) {
+  var dirName = this.getDirName_();
+  var urlParams = ['image', 'preview', 'video'];
+
+  for (var i = 0; i < urlParams.length; i++) {
+    var name = urlParams[i];
+    var path = contentInfo[name];
+    if (path && Util.isPathAbsolute(path)) {
+      var absolute = Util.relativeToAbsolutePath(dirName, path);
+      contentInfo[name] = absolute;
+      //console.log('Converted to absolute: %s', absolute);
+    }
+  }
+};
+/**
+ * Get position YAW, PITCH
+ */
+Player.prototype.getPosition = function() {
+    this.sender.send({type: Message.GET_POSITION, data: {}});
+};
+
+module.exports = Player;