Add detail player to film detail page

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### Added
 
 - Bluesky support in footer links
+- Video player on film detail page for content creators
 
 ### Changed
 

package.json

@@ -42,7 +42,6 @@
   ],
   "author": "Shift72",
   "dependencies": {
-    "@rollup/plugin-buble": "^0.21.3",
     "autoprefixer": "^7.1.2",
     "bootstrap": "^4.6.1",
     "concat": "^1.0.3",
@@ -58,6 +57,9 @@
     "sass": "^1.36.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@rollup/plugin-babel": "^6.0.4",
     "eslint": "^7.30.0",
     "eslint-config-preact": "^1.1.4",
     "eslint-config-prettier": "^8.3.0",
@@ -147,5 +149,11 @@
       "scss/at-extend-no-missing-placeholder": null,
       "scss/at-import-no-partial-leading-underscore": null
     }
-  }
+  },
+  "browserslist": [
+    "defaults, > 0.2% and not dead",
+    "chrome >= 58",
+    "ios >= 13",
+    "safari >= 13"
+  ]
 }

rollup.config.js

@@ -1,5 +1,5 @@
-import buble from '@rollup/plugin-buble';
-import { terser } from "rollup-plugin-terser";
+import babel from  '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
 
 const production = process.env.NODE_ENV == 'production';
 
@@ -19,10 +19,16 @@ export default {
     sourcemap: !production
   },
   plugins: [
-    buble({ jsx: 's72.ui.h', objectAssign: 'Object.assign' }),
+    babel({
+      babelHelpers: 'bundled',
+      presets: [
+        ['@babel/preset-env'],
+        ['@babel/preset-react', { pragma: 's72.ui.h' }]
+      ],
+    }),
     (production && terser())
   ],
   watch: {
     clearScreen: false
   }
-};
+};

site/static/js/detail-player/detail-player-iframe.component.js

@@ -0,0 +1,24 @@
+import { Component } from 's72.ui';
+
+export class DetailPlayerIframe extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render(props) {
+    const {slug, onLoad} = props;
+    let startTime = new URLSearchParams(window.location.search).get('t');
+    let t = startTime ? startTime : 0;
+    return (
+      <iframe
+        id="detail-player"
+        src={`/play/#${slug}?tm=true&t=${t}&from=`}
+        width="100%"
+        height="100%"
+        frameborder={0}
+        allowFullScreen
+        onLoad={onLoad}
+      ></iframe>
+    );
+  }
+}

site/static/js/detail-player/detail-player-placeholder.component.js

@@ -0,0 +1,161 @@
+import { i18n } from 's72';
+import { AppComponent, classes } from 's72.ui';
+import { LockOpenIcon, LockClosedIcon, PlayIcon } from './icons';
+
+export class DetailPlayerPlaceholder extends AppComponent {
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      bgLoaded: !!!props.bgImage,
+      titleLoaded: !!!props.titleImage,
+      availabilityLoaded: false,
+      canBeWatched: false,
+      wigglin: false,
+      playClicked: false,
+      purchaseCompleted: false,
+      unlockBegin: false,
+      unlockAnim: 0,
+    }
+  }
+
+  async componentDidMount() {
+    this.app.messagebus.subscribe('shopping-session-completed', async () => {
+      if (await this.canBeWatched()) {
+        this.setState({ purchaseCompleted: true });
+      }
+    });
+    window.addEventListener('message', e => {
+      if (e.data.event == 's72-checkout:close' && this.state.purchaseCompleted) {
+        this.playUnlockAnimation();
+      }
+    });
+    this.setState({ availabilityLoaded: true, canBeWatched: await this.canBeWatched() });
+  }
+
+  componentWillUnmount() {
+    this.app.messagebus.unsubscribe('shopping-session-completed');
+  }
+
+  canBeWatched() {
+    return this.app.availabilityService.getAvailability(this.props.slug)
+      .then(a => a?.canBeWatched ?? false)
+      .catch(() => false);
+  }
+
+  render(props, state) {
+    const {playerLoaded} = props;
+    const showPlaceholder = (state.availabilityLoaded && state.bgLoaded && state.titleLoaded) && !playerLoaded;
+    return (
+      <div
+        class={classes('detail-player-placeholder', {'detail-player-placeholder--visible': showPlaceholder})}
+        onClick={() => this.playWiggleAnimation()}
+      >
+        {this.placeholderBG()}
+        <div class="detail-player-placeholder-overlay">
+          {state.canBeWatched && this.playButton() }
+          {!state.canBeWatched && this.lockedMessage()}
+          <div class="detail-player-placeholder-gradient" />
+          {this.titleLogo()}
+        </div>
+      </div>
+    );
+  }
+
+  placeholderBG() {
+    return (
+      <ImageLoader
+        src={this.props.bgImage}
+        state={this.state.bgLoaded}
+        onLoad={() => this.setState({ bgLoaded: true })}
+      >
+        <div
+          class="detail-player-placeholder-bg"
+          style={`background-image: url(${this.props.bgImage})`}
+        />
+      </ImageLoader>
+    );
+  }
+
+  titleLogo() {
+    return (
+      <ImageLoader
+        src={this.props.titleImage}
+        state={this.state.titleLoaded}
+        onLoad={() => this.setState({ titleLoaded: true })}
+      >
+        <img
+          class="detail-player-placeholder-title"
+          src={this.props.titleImage}
+        />
+      </ImageLoader>
+    );
+  }
+
+  playWiggleAnimation() {
+    if (!this.state.wigglin && !this.state.unlockBegin) {
+      this.setState({ wigglin: true });
+      setTimeout(() => {
+        this.setState({ wigglin: false });
+      }, 900);
+    }
+  }
+
+  lockedMessage() {
+    return (
+      <div class={classes('detail-player-locked-message', {'detail-player-locked-message--unlocked': this.state.unlockBegin})}>
+        <div class={classes('detail-player-lock-icon-wrapper', {
+          'detail-player-lock-icon-wrapper--wiggle': this.state.wigglin, 
+          'detail-player-lock-icon-wrapper--large': this.state.unlockBegin
+        })}>
+          <div class={`detail-player-lock-icon detail-player-lock-icon--anim-${this.state.unlockAnim}`}>
+            {this.state.unlockAnim < 2 ? <LockClosedIcon /> : <LockOpenIcon />}
+          </div>
+        </div>
+        <span class={classes('detail-player-locked-message-text', { 'detail-player-locked-message-text--unlocked': this.state.unlockBegin })}>
+          {i18n('detail_player_subscribe')}
+        </span>
+      </div>
+    );
+  }
+
+  playButton() {
+    return (
+      <div class={classes('detail-player-play-button', {'detail-player-play-button--clicked': this.state.playClicked})}
+        onClick={() => {
+          this.setState({ playClicked: true });
+          this.props.showPlayer();
+        }}
+      >
+        <PlayIcon />
+      </div>
+    );
+  }
+
+  playUnlockAnimation() {
+    setTimeout(() => { this.setState({ unlockBegin: true }) }, 500);
+    setTimeout(() => { this.setState({ unlockAnim: 1 }); }, 1000);
+    setTimeout(() => { this.setState({ unlockAnim: 2 }); }, 1800);
+    setTimeout(() => { this.setState({ unlockAnim: 3 }); }, 1900);
+    setTimeout(() => { this.props.showPlayer() }, 2000);
+  }
+
+}
+
+function ImageLoader(props) {
+  const {src, state, onLoad, children} = props;
+  if (!src) {
+    return;
+  }
+  return (
+    <div>
+      {!state && <img
+        class="detail-player-image-loader"
+        src={src}
+        onLoad={onLoad()}
+        onError={onLoad()}
+      />}
+      {state && children}
+    </div>
+  );
+}

site/static/js/detail-player/detail-player.component.js

@@ -0,0 +1,54 @@
+import { bindEachComponent, AppComponent, attrs, h, render } from 's72.ui';
+import { DetailPlayerIframe } from './detail-player-iframe.component';
+import { DetailPlayerPlaceholder } from './detail-player-placeholder.component';
+
+export default class DetailPlayer extends AppComponent {
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      playerLoaded: false,
+      playerVisible: false,
+      placeholderVisible: true,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('message', e => {
+      const {event, value} = e.data;
+      if (event == 's72-player:theatre-mode-change') {
+        const container = document.querySelector('#main .detail-player-container');
+        container.querySelector('detail-player').scrollIntoView({ behavior: 'smooth', block: 'start' });
+        container.classList.toggle('detail-player-theatre-mode', value);
+        document.querySelector('.meta-detail-bg').classList.toggle('meta-detail-bg--lights-out', value);
+        document.querySelector('.poster-wrapper').classList.toggle('d-none', value);
+      }
+    });
+  }
+
+  render(props, state) {
+    if (!props.slug) {
+      return;
+    }
+    return (
+      <div class="detail-player-inner">
+        {state.playerVisible && <DetailPlayerIframe
+          slug={props.slug}
+          onLoad={() => {
+            this.setState({ playerLoaded: true });
+            setTimeout(() => this.setState({ placeholderVisible: false }), 1000);
+          }}
+        />}
+        {state.placeholderVisible && <DetailPlayerPlaceholder 
+          slug={props.slug}
+          bgImage={props.bgImage}
+          titleImage={props.titleImage}
+          showPlayer={() => setTimeout(() => this.setState({ playerVisible: true }), 500)}
+          playerLoaded={state.playerLoaded}
+        />}
+      </div>
+    );
+  }
+}
+
+bindEachComponent('detail-player', e => render(h(DetailPlayer, attrs(e)), e));

site/static/js/main.js

@@ -2,6 +2,7 @@ import './modernizr-custom.js';
 import './can-be-watched-button.component.js';
 import './external-purchase-button.component.js';
 import './carousel-video-mute-button.component.js';
+import './detail-player/detail-player.component.js';
 
 /*global Swiper, Modernizr, s72*/
 
@@ -567,3 +568,11 @@ document.addEventListener('s72loaded', event => {
   let app = event.detail.app;
   documentReady(app);
 });
+
+window.addEventListener('message', e => {
+  const {event, url, type} = e.data;
+  if (event == 's72-player:navigate-to') {
+    console.log(`navigating to ${url}, reason: ${type}`);
+    window.location.href = `${url}`;
+  }
+});

site/styles/_collections.scss

@@ -261,7 +261,7 @@
   }
 
   .caption {
-    padding: 0px 0 8px;
+    padding: 0 0 8px;
 
     .crumb {
       @extend .d-flex;