pageflow-vr 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d64b9e546c878f3b8c776389c782effceaa32cd6
+  data.tar.gz: 80b63f6cb35edf377b25376abff3285e62c1632d
+SHA512:
+  metadata.gz: fa32ef396c22ac55d0eae8a2b7296e3913fe79467b48b469fc82fc9c0bec2655505f6775b56e9e54a3f8f109688ed7ab5b5d3507a80e1d8c0d77b559cc9dafb0
+  data.tar.gz: ae3b1d9814509dcdace872650f5e938a53995e89c918ddc77e3b342e911fd840ec5030ca0af9008ca4022aa62d49c4c883db34caa64b366b1e1a3f8da1f5f8d7

data/.eslintrc

@@ -0,0 +1,38 @@
+{
+    "rules": {
+        "indent": [ 1, 2 ],
+        "quotes": [ 2, "single" ],
+        "linebreak-style": [ 2, "unix" ],
+        "semi": [ 2, "always" ],
+        "no-unused-vars": [ 1, {"vars": "all", "args": "none"} ],
+        "curly": [ 2 ],
+        "no-spaced-func": [ 2 ],
+        "space-before-blocks": [ 2 ],
+        "keyword-spacing": [ 2, { "after": true} ],
+        "no-console": 1,
+        "react/display-name": 0,
+        "react/no-danger": 0,
+        "react/prop-types": [0, { ignore: ['children']}]
+    },
+    "env": {
+        "es6": true,
+        "browser": true,
+        "mocha": true
+    },
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "parserOptions": {
+      "sourceType": "module",
+      "ecmaFeatures": {
+          "jsx": true,
+          "experimentalObjectRestSpread": true,
+          "modules": true
+      }
+    },
+    "plugins": [ "react" ],
+    "globals": {
+      "React": true,
+      "I18n": true,
+      "pageflow": true,
+      "PAGEFLOW_EDITOR": true,
+    }
+}

data/.gitignore

@@ -0,0 +1,10 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+/.localeapp

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.1.0
+before_install: gem install bundler -v 1.12.5

data/CHANGELOG.md

@@ -0,0 +1,7 @@
+# CHANGELOG
+
+### Version 1.0.0
+
+2017-08-11
+
+Initial release.

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at tfischbach@codevise.de. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in pageflow-vr.gemspec
+gemspec

data/README.md

@@ -0,0 +1,60 @@
+# Pageflow VR
+
+[![Gem Version](https://badge.fury.io/rb/pageflow-vr.svg)](http://badge.fury.io/rb/pageflow-vr)
+
+Page type to display 360° videos.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    # Gemfile
+    gem 'pageflow-vr'
+
+Register the plugin:
+
+    # config/initializers/pageflow.rb
+    Pageflow.configure do |config|
+      config.plugin(Pageflow::Vr.plugin)
+    end
+
+Include javascripts and stylesheets:
+
+    # app/assets/javascripts/components.js
+    //= require "pageflow/vr/components"
+
+    # app/assets/javascripts/pageflow/application.js
+    //= require "pageflow/vr"
+
+    # app/assets/javascripts/pageflow/editor.js
+    //= require pageflow/vr/editor
+
+    # app/assets/stylesheets/pageflow/themes/default.scss
+    @import "pageflow/vr/themes/default";
+
+Install the routes:
+
+    # config/routes.rb
+    MyPageflow::Application.routes.draw do
+      Pageflow::Vr.routes(self)
+    end
+
+Execute `bundle install` and restart the application server.
+
+Now you can enable the page type in your feature settings.
+
+## Troubleshooting
+
+If you run into problems while installing the page type, please also
+refer to the
+[Troubleshooting](https://github.com/codevise/pageflow/wiki/Troubleshooting)
+wiki page in the
+[Pageflow repository](https://github.com/codevise/pageflow). If that
+doesn't help, consider
+[filing an issue](https://github.com/codevise/pageflow-vr/issues).
+
+## Contributing Locales
+
+Edit the translations directly on the
+[pageflow-vr](http://www.localeapp.com/projects/public?search=tf/pageflow-vr)
+locale project.

data/Rakefile

@@ -0,0 +1,9 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+require 'semmy'
+Semmy::Tasks.install
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

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

@@ -0,0 +1,3 @@
+pageflow.browser.feature('vr view cardboard support', function(has) {
+  return has('phone platform');
+});

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

@@ -0,0 +1,4 @@
+pageflow.browser.feature('vr view support', function(has) {
+  return !pageflow.browser.agent.matchesMobileSafari() &&
+    !pageflow.browser.agent.matchesIEUpTo11();
+});

data/app/assets/javascripts/pageflow/vr/components/icons/cardboard.jsx

@@ -0,0 +1,10 @@
+const {SvgIcon} = pageflow.react;
+
+pageflow.react.iconMapping['pageflow-vr.cardboard'] = function(props) {
+  return (
+    <SvgIcon {...props} viewBoxWidth={24} viewBoxHeight={24}>
+      <path d="M20.74 6H3.21C2.55 6 2 6.57 2 7.28v10.44c0 .7.55 1.28 1.23 1.28h4.79c.52 0 .96-.33 1.14-.79l1.4-3.48c.23-.59.79-1.01 1.44-1.01s1.21.42 1.45 1.01l1.39 3.48c.19.46.63.79 1.11.79h4.79c.71 0 1.26-.57 1.26-1.28V7.28c0-.7-.55-1.28-1.26-1.28zM7.5 14.62c-1.17 0-2.13-.95-2.13-2.12 0-1.17.96-2.13 2.13-2.13 1.18 0 2.12.96 2.12 2.13s-.95 2.12-2.12 2.12zm9 0c-1.17 0-2.13-.95-2.13-2.12 0-1.17.96-2.13 2.13-2.13s2.12.96 2.12 2.13-.95 2.12-2.12 2.12z"/>
+      <path fill="none" d="M0 0h24v24H0V0z"/>
+    </SvgIcon>
+  );
+};

data/app/assets/javascripts/pageflow/vr/components/icons/play.jsx

@@ -0,0 +1,11 @@
+const {SvgIcon} = pageflow.react;
+
+pageflow.react.iconMapping['pageflow-vr.play'] = function(props) {
+  return (
+    <SvgIcon {...props} viewBoxLeft={-10} viewBoxTop={-20} viewBoxWidth={626.65} viewBoxHeight={636.65}>
+      <path d="M308.32,616.65a308.32,308.32,0,0,1-218-526.34,308.32,308.32,0,1,1,436,436A306.3,306.3,0,0,1,308.32,616.65Zm0-580.65A272.32,272.32,0,0,0,115.76,500.88,272.32,272.32,0,0,0,500.88,115.76,270.54,270.54,0,0,0,308.32,36Z"/>
+      <path d="M308.32,456.59c-74.08,0-143.85-14.91-196.46-42-54.3-27.93-84.2-65.68-84.2-106.3S57.56,230,111.86,202c52.61-27.06,122.38-42,196.46-42S452.17,175,504.78,202C559.08,230,589,267.71,589,308.32s-29.9,78.37-84.2,106.3C452.17,441.69,382.4,456.59,308.32,456.59Zm0-280.54c-71.58,0-138.75,14.28-189.14,40.2C70.48,241.31,43.66,274,43.66,308.32s26.82,67,75.52,92.07c50.39,25.92,117.56,40.2,189.14,40.2s138.75-14.28,189.14-40.2c48.7-25.05,75.52-57.75,75.52-92.07s-26.82-67-75.52-92.07C447.07,190.33,379.9,176.06,308.32,176.06Z"/>
+      <path d="M308.32,589c-40.61,0-78.36-29.9-106.3-84.2-27.06-52.61-42-122.38-42-196.46S175,164.47,202,111.86c27.93-54.3,65.68-84.2,106.3-84.2s78.37,29.9,106.3,84.2c27.06,52.61,42,122.38,42,196.46s-14.91,143.85-42,196.46C386.69,559.08,348.94,589,308.32,589Zm0-545.32c-34.32,0-67,26.82-92.07,75.52-25.92,50.39-40.2,117.56-40.2,189.14s14.28,138.75,40.2,189.14C241.31,546.16,274,573,308.32,573s67-26.82,92.07-75.52c25.92-50.39,40.2-117.56,40.2-189.14s-14.28-138.75-40.2-189.14C375.34,70.48,342.64,43.66,308.32,43.66Z"/>
+    </SvgIcon>
+  );
+};

data/app/assets/javascripts/pageflow/vr/components/no_vr_view.jsx

@@ -0,0 +1,34 @@
+(function() {
+  const {Icon} = pageflow.react.components;
+
+  function NoVrView(props) {
+    return (
+      <div className="pageflow_vr-no_vr_view">
+        <Icon name="pageflow-vr.play" />
+        <p dangerouslySetInnerHTML={text(props)} />
+        {renderYouTubeLink(props)}
+      </div>
+    );
+  }
+
+  function text(props) {
+    return {__html: props.text || props.t('pageflow.public.vr.no_vr.text')};
+  }
+
+  function renderYouTubeLink(props) {
+    if (props.youTubeUrl) {
+      return (
+        <a href={props.youTubeUrl} className="pageflow_vr-no_vr_view_link">
+          {props.t('pageflow.public.vr.no_vr.link')}
+        </a>
+      );
+    }
+  }
+
+  const {connect, combine} = pageflow.react;
+  const {t} = pageflow.react.selectors;
+
+  pageflow.vr.NoVrView = connect(combine({
+    t
+  }))(NoVrView);
+}());

data/app/assets/javascripts/pageflow/vr/components/page.jsx

@@ -0,0 +1,201 @@
+(function() {
+  const {classNames} = pageflow.react;
+
+  const {
+    PageWithInteractiveBackground,
+    PageWrapper, PageContent, PageHeader, PageText, Icon,
+  } = pageflow.react.components;
+
+  const {MediaPageBackground} = pageflow.react.components;
+
+  const {
+    VrView, NoVrView
+  } = pageflow.vr;
+
+  class Page extends React.Component {
+    constructor(props, context) {
+      super(props, context);
+
+      this.state = {
+        isVrViewReady: false,
+        isVrViewPlaying: false
+      };
+
+      this.onVrViewLoading = () => {
+        this.setState({isVrViewReady: false});
+      };
+
+      this.onVrViewReady = () => {
+        this.setState({isVrViewReady: true});
+      };
+
+      this.onEnterBackground = () => {
+        this.setState({isInBackground: true});
+      };
+
+      this.onLeaveBackground = () => {
+        this.setState({isInBackground: false});
+      };
+
+      this.onCardboardButtonClick = () => {
+        this.setState({isCardboardModeRequested: true});
+      };
+
+      this.onExitCardboardMode = () => {
+        this.setState({isCardboardModeRequested: false});
+      };
+    }
+
+    render() {
+      if (!pageflow.browser || !pageflow.browser.has('vr view support') ||
+          (PAGEFLOW_EDITOR && this.props.page.previewVrFallback)) {
+        return this.renderFallbackPage();
+      }
+      else {
+        return this.renderVrViewPage();
+      }
+    }
+
+    renderVrViewPage() {
+      const props = this.props;
+
+      return (
+        <PageWithInteractiveBackground page={props.page}
+                                       playButtonIconName="pageflow-vr.play"
+                                       defaultControlBarText={props.t('pageflow.public.vr.start')}
+                                       qualityMenuButtonTitle={props.t('pageflow.public.vr.select_quality')}
+                                       qualityMenuItems={this.qualityMenuItems()}
+                                       additionalMenuBarButtons={this.additionalMenuBarButtons()}
+                                       onAdditionalButtonClick={this.onCardboardButtonClick}
+                                       onEnterBackground={this.onEnterBackground}
+                                       onLeaveBackground={this.onLeaveBackground}
+                                       onQualityMenuItemClick={props.onQualityChange}>
+
+          <VrView id={props.page.permaId}
+                  videoId={props.page.videoId}
+                  posterId={props.page.posterId}
+                  startYaw={props.page.startYaw}
+                  quality={this.activeQuality()}
+                  isPlaying={props.pageIsActive && (this.state.isInBackground || props.page.autoplay)}
+                  isCardboardModeRequested={this.state.isCardboardModeRequested}
+                  onLoading={this.onVrViewLoading}
+                  onReady={this.onVrViewReady}
+                  onExitCardboardMode={this.onExitCardboardMode} />
+
+          {this.renderLoadingIndicator()}
+        </PageWithInteractiveBackground>
+      );
+    }
+
+    renderLoadingIndicator() {
+      const className = classNames('pageflow_vr-page_loading_indicator',
+                                   {'pageflow_vr-page_loading_indicator-hidden': this.state.isVrViewReady});
+      return (
+        <div className={className}>
+          <Icon name="pageflow-vr.play" className="pageflow_vr-page_loading_indicator_icon" />
+        </div>
+      );
+    }
+
+    renderFallbackPage() {
+      const props = this.props;
+
+      return (
+        <PageWrapper>
+          <MediaPageBackground page={props.page}
+                               propertyNamePrefix="fallback" />
+
+          <PageContent>
+            <PageHeader page={props.page} />
+            <PageText page={props.page} />
+
+            <NoVrView text={props.page.fallbackText}
+                      youTubeUrl={props.page.fallbackYouTubeUrl} />
+          </PageContent>
+        </PageWrapper>
+      );
+    }
+
+    qualityMenuItems() {
+      const t = this.props.t;
+      const activeQuality = this.activeQuality();
+
+      return this.availableQualitiesInDescendingOrder().map(value => {
+        return {
+          value,
+          label: t(`pageflow.public.vr.video_qualities.${value}`),
+          annotation: t(`pageflow.public.vr.video_quality_annotations.${value}`),
+          active: activeQuality == value,
+        };
+      });
+    }
+
+    additionalMenuBarButtons() {
+      if (!pageflow.browser || !pageflow.browser.has('vr view cardboard support')) {
+        return [];
+      }
+      else {
+        return [
+          {
+            name: 'cardboard',
+            label: this.props.t('pageflow.public.vr.start_cardboard'),
+            iconName: 'pageflow-vr.cardboard'
+          }
+        ];
+      }
+    }
+
+    activeQuality() {
+      if (this.availableQualitiesInDescendingOrder().indexOf(this.props.requestedQuality) >= 0) {
+        return this.props.requestedQuality;
+      }
+      else {
+        return this.fullHdOrHighQuality();
+      }
+    }
+
+    fullHdOrHighQuality() {
+      var qualities = this.availableQualitiesInDescendingOrder();
+      return qualities[1] || qualities[0];
+    }
+
+    availableQualitiesInDescendingOrder() {
+      return ['4k', 'fullhd', 'high'].filter(quality =>
+        this.props.videoFile && this.props.videoFile.urls[quality]
+      );
+    }
+  }
+
+  const {registerPageType, connectInPage, combine, combineReducers} = pageflow.react;
+  const {pageAttributes, pageAttribute, pageIsActive, t, setting, file} = pageflow.react.selectors;
+  const {updateSetting} = pageflow.react.actions;
+
+  const qualitySetting = 'vr.videoQuality';
+
+  registerPageType('vr', {
+    component: connectInPage(
+      combine({
+        page: pageAttributes(),
+        pageIsActive: pageIsActive(),
+        videoFile: file('videoFiles', {
+          id: pageAttribute('videoId')
+        }),
+        t,
+        requestedQuality: setting({
+          property: qualitySetting
+        })
+      }),
+      {
+        onQualityChange: value => updateSetting({
+          property: qualitySetting,
+          value
+        })
+      }
+    )(Page),
+
+    reduxModules: [
+      pageflow.react.pageWithInteractiveBackgroundReduxModule,
+      pageflow.react.mediaPageBackgroundReduxModule
+    ]
+  });
+}());

data/app/assets/javascripts/pageflow/vr/components/vr_view.jsx

@@ -0,0 +1,160 @@
+(function() {
+  class VrView extends React.Component {
+    constructor(props, context) {
+      super(props, context);
+
+      this._lastCurrentTime = -1;
+      this._lastSource = null;
+
+      this.bindPlayer = iframe => {
+        if (this.player) {
+          this.player.dispose();
+        }
+
+        this.player = pageflow.vr.Player.create(iframe, {
+          context: this.context.mediaContext
+        });
+
+        if (this.player) {
+          this.player.on({
+            loading: () => {
+              this._lastCurrentTime = 0;
+
+              if (this.props.onLoading) {
+                this.props.onLoading();
+              }
+            },
+
+            ready: () => {
+              if (this.props.onReady) {
+                this.props.onReady();
+              }
+            },
+
+            canplay: () => {
+              if (this.props.isPlaying) {
+                this.player.play();
+              }
+            },
+
+            timeupdate: (event) => {
+              if (this._lastCurrentTime >= 0) {
+                this._lastCurrentTime = event.currentTime;
+              }
+            }
+          });
+        }
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (this.props.videoId != nextProps.videoId) {
+        this._lastCurrentTime = -1;
+      }
+
+      if (!this.player) {
+        return;
+      }
+
+      if (nextProps.isPlaying) {
+        // Calling play while already playing is no-op. Since play
+        // might fail when not inside user gesture, always try to play
+        // when prop is set.
+        this.player.play();
+      }
+      else if (this.props.isPlaying && !nextProps.isPlaying) {
+        this.player.fadeOutAndPause(200);
+      }
+
+      if (!this.props.isCardboardModeRequested && nextProps.isCardboardModeRequested) {
+        this.player.enterVRMode();
+
+        // Trigger reset of prop right away. This should listen for events emitted by the iframe instead.
+        if (nextProps.onExitCardboardMode) {
+          setTimeout(() => {
+            nextProps.onExitCardboardMode();
+          }, 100);
+        }
+      }
+    }
+
+    render() {
+      return (
+        <div className="pageflow_vr-vr_view">
+          {this.renderIframeIfPrepared()}
+        </div>
+      );
+    }
+
+    renderIframeIfPrepared() {
+      if (this.props.pageIsPrepared && this.source()) {
+        return this.renderIframe();
+      }
+    }
+
+    renderIframe() {
+      return (
+        <iframe ref={this.bindPlayer}
+                className="pageflow_vr-vr_view-frame"
+                allowFullScreen
+                frameBorder="0"
+                src={this.sourceWithUpdatingStartTime()}>
+        </iframe>
+      );
+    }
+
+    sourceWithUpdatingStartTime() {
+      // Only update the start time if the iframe src would change anyway
+      // to prevent reloading the iframe by only changing the start time.
+      if (this.source() != this._lastSource) {
+        this._startTime = this._lastCurrentTime >= 0 ? this._lastCurrentTime : 0;
+      }
+
+      this._lastSource = this.source();
+      return this._lastSource;
+    }
+
+    source() {
+      const props = this.props;
+
+      if (!props.videoFile || !props.videoFile.urls[props.quality]) {
+        return null;
+      }
+
+      return url({
+        id: props.id,
+        video: props.videoFile.urls[props.quality],
+        preview: props.posterFile ? props.posterFile.urls.ultra : props.videoFile.urls.poster_ultra,
+        is_stereo: props.videoFile.projection == 'equirectangular_stereo' ? 'true' : 'false',
+        start_yaw: props.startYaw,
+        start_time: this._startTime,
+        no_autoplay: true
+      });
+    }
+  }
+
+  VrView.contextTypes = {
+    mediaContext: React.PropTypes.object
+  };
+
+  function url(params) {
+    const paramsString = Object.keys(params).map((key) =>
+      `${key}=${params[key]}`
+    ).join('&');
+
+    return `/pageflow_vr/vrview.html?${paramsString}`;
+  }
+
+  const {connectInPage, combine} = pageflow.react;
+  const {pageIsPrepared, file, prop} = pageflow.react.selectors;
+
+  pageflow.vr.VrView = connectInPage(combine({
+    pageIsPrepared: pageIsPrepared(),
+    videoFile: file('videoFiles', {
+      id: prop('videoId')
+    }),
+    posterFile: file('imageFiles', {
+      id: prop('posterId')
+    })
+  }))(VrView);
+}());

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

@@ -0,0 +1,7 @@
+//= require_self
+//= require_tree ./components/icons
+//= require ./components/vr_view
+//= require ./components/no_vr_view
+//= require ./components/page
+
+pageflow.vr = pageflow.vr || {};