pageflow-vr 1.0.0

data/app/assets/javascripts/pageflow/vr/editor/views/configuration_editor_view.js

@@ -0,0 +1,65 @@
+pageflow.vr.ConfigurationEditorView = pageflow.ConfigurationEditorView.extend({
+  configure: function() {
+    this.tab('general', function() {
+      this.group('general');
+
+      this.input('additional_title', pageflow.TextInputView);
+      this.input('additional_description', pageflow.TextAreaInputView, {size: 'short'});
+
+      this.input('control_bar_text', pageflow.TextInputView, {
+        placeholder: I18n.t('pageflow.public.vr.start', {
+          locale: pageflow.entry.configuration.get('locale')
+        })
+      });
+    });
+
+    this.tab('files', function() {
+      this.input('video_id', pageflow.FileInputView, {
+        collection: 'video_files',
+        filter: 'with_projection',
+        positioning: false
+      });
+      this.input('autoplay', pageflow.CheckBoxInputView);
+      this.input('start_yaw', pageflow.SliderInputView, {
+        unit: '°',
+        maxValue: 360
+      });
+      this.input('poster_id', pageflow.FileInputView, {
+        collection: 'image_files',
+        filter: 'with_projection',
+        positioning: false
+      });
+      this.input('thumbnail_image_id', pageflow.FileInputView, {
+        collection: 'image_files',
+        positioning: false
+      });
+    });
+
+    this.tab('vr_fallback', function() {
+      this.input('preview_vr_fallback', pageflow.CheckBoxInputView);
+
+      this.group('background', {
+        propertyNamePrefix: 'fallback'
+      });
+
+      this.input('fallback_text', pageflow.TextAreaInputView, {
+        size: 'short'
+      });
+      this.input('fallback_you_tube_url', pageflow.UrlInputView, {
+        permitHttps: true,
+        displayPropertyName: 'display_fallback_you_tube_url',
+        supportedHosts: [
+          'http://youtube.com',
+          'https://youtube.com'
+        ]
+      });
+      this.view(pageflow.vr.FallbackPreviewModeView, {
+        model: this.model
+      });
+    });
+
+    this.tab('options', function() {
+      this.group('options');
+    });
+  }
+});

data/app/assets/javascripts/pageflow/vr/editor/views/fallback_preview_mode_view.js

@@ -0,0 +1,9 @@
+pageflow.vr.FallbackPreviewModeView = Backbone.Marionette.View.extend({
+  render: function() {
+    return this;
+  },
+
+  onClose: function() {
+    this.model.unset('preview_vr_fallback');
+  }
+});

data/app/assets/javascripts/pageflow/vr/editor.js

@@ -0,0 +1,73 @@
+//= require_tree ./editor/
+//= require_self
+
+pageflow.vr = pageflow.vr || {};
+
+pageflow.editor.pageTypes.register('vr', {
+  configurationEditorView: pageflow.vr.ConfigurationEditorView,
+});
+
+_(['video_files', 'image_files']).each(function(collectionName) {
+  pageflow.editor.fileTypes.modify(collectionName, {
+    configurationEditorInputs: function(model) {
+      var values = ['equirectangular_mono', 'equirectangular_stereo'];
+      var valuesWithAutoDetect = ['auto_detect'].concat(values);
+
+      var options = {
+        includeBlank: true,
+        values: values
+      };
+
+      if (collectionName == 'video_files') {
+        if (model.isNew()) {
+          options = {
+            includeBlank: true,
+            ensureValueDefined: true,
+            values: valuesWithAutoDetect
+          };
+        }
+        else if (!model.isReady() && model.configuration.get('projection') == 'auto_detect') {
+          options = {
+            includeBlank: true,
+            disabled: true,
+            values: valuesWithAutoDetect
+          };
+        }
+      }
+
+      return [
+        {
+          name: 'projection',
+          inputView: pageflow.SelectInputView,
+          inputViewOptions: options
+        }
+      ];
+    },
+
+    configurationUpdaters: [
+      function(configuration, newAttributes) {
+        if (configuration.get('projection') == 'auto_detect' &&
+            newAttributes.projection != 'auto_detect') {
+          configuration.set('projection', newAttributes.projection);
+        }
+      }
+    ],
+
+    confirmUploadTableColumns: [
+      {
+        name: 'projection',
+        cellView: pageflow.EnumTableCellView
+      }
+    ],
+
+    filters: [
+      {
+        name: 'with_projection',
+        matches: function(file) {
+          return !!file.configuration.get('projection') &&
+            file.configuration.get('projection') != 'auto_detect';
+        }
+      }
+    ]
+  });
+});

data/app/assets/javascripts/pageflow/vr/page_type.js

@@ -0,0 +1,2 @@
+pageflow.pageType.register('vr',
+                           pageflow.react.createPageType(pageflow.vr.Page));

data/app/assets/javascripts/pageflow/vr/player/media_events.js

@@ -0,0 +1,36 @@
+pageflow.vr.Player.mediaEvents = function(player, context) {
+  function triggerMediaEvent(name, event) {
+    pageflow.events.trigger('media:' + name, {
+      fileName: event.currentSrc,
+      context: context,
+      currentTime: event.currentTime,
+      duration: event.duration,
+      volume: player.volume(),
+      bitrate: getBitrate(event.currentSrc)
+    });
+  }
+
+  player.on('play', function(event) {
+    triggerMediaEvent('play', event);
+  });
+
+  player.on('timeupdate', function(event) {
+    triggerMediaEvent('timeupdate', event);
+  });
+
+  player.on('pause', function(event) {
+    triggerMediaEvent('pause', event);
+  });
+
+  function getBitrate(src) {
+    if (src.match(/4k/)) {
+      return 22000000;
+    }
+    else if (src.match(/fullhd/)) {
+      return 6000000;
+    }
+    else {
+      return 3500000;
+    }
+  }
+};

data/app/assets/javascripts/pageflow/vr/player.js

@@ -0,0 +1,93 @@
+//= require_self
+//= require ./player/media_events
+
+pageflow.vr.Player = pageflow.Object.extend({
+  initialize: function(iframe) {
+    this.iframe = iframe;
+    this.cachedVolume = 1;
+    this.cachedPaused = iframe.src.indexOf('no_autoplay=true') >= 0;
+    this.id = getIdParam(iframe.src);
+
+    this.messageListener = this.onMessage.bind(this);
+
+    if (this.id) {
+      window.addEventListener('message', this.messageListener);
+    }
+  },
+
+  dispose: function() {
+    this.off(null, null, null);
+    window.removeEventListener('message', this.messageListener);
+  },
+
+  play: function() {
+    this.cachedPaused = false;
+    this.sendCommand('play');
+  },
+
+  pause: function() {
+    this.cachedPaused = true;
+    this.sendCommand('pause');
+  },
+
+  paused: function() {
+    return this.cachedPaused;
+  },
+
+  volume: function(value) {
+    if (typeof value === 'undefined') {
+      return this.cachedVolume;
+    }
+    else {
+      this.cachedVolume = value;
+      this.sendCommand('volume', Math.max(0, Math.min(1, value)));
+    }
+  },
+
+  enterVRMode: function() {
+    this.sendCommand('enterVRMode');
+  },
+
+  sendCommand: function(name, value) {
+    this.iframe.contentWindow.postMessage({
+      type: 'PlayerCommand',
+      command: name,
+      value: value
+    }, '*');
+  },
+
+  onMessage: function(event) {
+    var message = event.data;
+
+    if (message.type == 'VrViewEvent' &&
+        message.vrViewId == this.id) {
+
+      this.trigger(message.event, message.eventData);
+    }
+  },
+
+  one: function() {
+    this.once.apply(this, arguments);
+  }
+});
+
+function getIdParam(url) {
+  var result = url.match(/id=(\d+)/);
+  return result && result[1];
+}
+
+pageflow.vr.Player.create = function(iframe, options) {
+  if (!iframe) {
+    return null;
+  }
+
+  var player = new pageflow.vr.Player(iframe);
+
+  pageflow.mediaPlayer.enhance(player, {
+    volumeFading: true
+  });
+
+  pageflow.vr.Player.mediaEvents(player, options.context);
+
+  return player;
+};

data/app/assets/javascripts/pageflow/vr.js

@@ -0,0 +1,7 @@
+//= require_self
+
+//= require_tree ./vr/browser
+//= require ./vr/components
+//= require ./vr/player
+
+pageflow.vr = pageflow.vr || {};

data/app/assets/stylesheets/pageflow/vr/themes/default.scss

@@ -0,0 +1,85 @@
+@include pageflow-page-type("vr");
+@include pageflow-page-type-pictograms("vr");
+
+$vr-loading-indicator-color: #fff !default;
+
+$vr-no-vr-background-color: rgba(17, 17, 17, 0.9) !default;
+
+$vr-no-vr-icon-color: #555 !default;
+
+.pageflow_vr-vr_view {
+  pointer-events: all;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.pageflow_vr-vr_view-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;;
+}
+
+.pageflow_vr-page_loading_indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  @include transform(translate(-50%, -50%));
+  @include transition(opacity 0.5s, visibility 0.5s);
+}
+
+.pageflow_vr-page_loading_indicator_icon {
+  display: block;
+  width: 200px;
+  height: 200px;
+  fill: $vr-loading-indicator-color;
+  @include animation(pageflow_vr-blink 3s infinite ease);
+}
+
+.pageflow_vr-page_loading_indicator-hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.pageflow_vr-no_vr_view {
+  margin: 5em auto 0 auto;
+  padding: 20px;
+  background-color: $vr-no-vr-background-color;
+  max-width: 500px;
+  border-radius: 2px;
+
+  a {
+    @extend %anchor;
+    color: $main-color;
+    pointer-events: all;
+  }
+
+  p {
+    width: auto;
+  }
+
+  svg {
+    width: 100px;
+    height: 100px;
+    fill: $vr-no-vr-icon-color;
+    margin: 0 auto 20px auto;
+    display: block;
+  }
+}
+
+@include keyframes(pageflow_vr-blink) {
+  0% {
+    opacity: 0.7;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    opacity: 0.7;
+  }
+}

data/app/controllers/pageflow/vr/static_files_controller.rb

@@ -0,0 +1,13 @@
+module Pageflow
+  module Vr
+    class StaticFilesController < ActionController::Base
+      def vrview
+        respond_to do |format|
+          format.html
+          format.css
+          format.js
+        end
+      end
+    end
+  end
+end

data/app/views/pageflow/vr/static_files/vrview.css

@@ -0,0 +1,55 @@
+html, body {
+  background-color: #000;
+  color: #eee;
+  margin: 0px;
+  padding: 0px;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.dialog {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-family: sans-serif;
+  font-size: 170%;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.dialog.visible {
+  display: flex;
+}
+.dialog .wrap {
+  padding: 30px 60px;
+  margin: 20px auto;
+  width: 60%;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 5px;
+}
+.dialog h1 {
+  margin: 0;
+}
+
+a, a:visited {
+  color: skyblue;
+}
+
+canvas {
+  cursor: -webkit-grab;
+}
+canvas:active {
+  cursor: -webkit-grabbing;
+}
+
+.webvr-button:first-of-type,
+.webvr-button:nth-of-type(2) {
+  display: none !important;
+}

data/app/views/pageflow/vr/static_files/vrview.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>VR</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="stylesheet" href="/pageflow_vr/vrview.css">
+  </head>
+  <body>
+    <div id="error" class="dialog">
+      <div class="wrap">
+        <h1 class="title">Error</h1>
+        <p class="message">An unknown error occurred.</p>
+      </div>
+    </div>
+
+    <script src="/pageflow_vr/vrview.js"></script>
+  </body>
+</html>