@shift72/core-template 1.9.25 → 1.9.26

package/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>
+    );
+  }
+}

package/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>
+  );
+}

package/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));

package/site/static/js/detail-player/icons.js

@@ -0,0 +1,31 @@
+export const LockClosedIcon = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 50 50">
+      <path d="M 25 3 C 18.364481 3 13 8.3644809 13 15 L 13 20 L 9 20 C 7.3545455 20 6 21.354545 6 23 L 6 47 C 6 48.645455 7.3545455 50 9 50 L 41 50 C 42.645455 50 44 48.645455 44 47 L 44 23 C 44 21.354545 42.645455 20 41 20 L 37 20 L 37 15 C 37 8.3644809 31.635519 3 25 3 z M 25 5 C 30.564481 5 35 9.4355191 35 15 L 35 20 L 15 20 L 15 15 C 15 9.4355191 19.435519 5 25 5 z M 9 22 L 13.832031 22 A 1.0001 1.0001 0 0 0 14.158203 22 L 35.832031 22 A 1.0001 1.0001 0 0 0 36.158203 22 L 41 22 C 41.554545 22 42 22.445455 42 23 L 42 47 C 42 47.554545 41.554545 48 41 48 L 9 48 C 8.4454545 48 8 47.554545 8 47 L 8 23 C 8 22.445455 8.4454545 22 9 22 z M 25 30 C 23.3 30 22 31.3 22 33 C 22 33.9 22.4 34.699219 23 35.199219 L 23 38 C 23 39.1 23.9 40 25 40 C 26.1 40 27 39.1 27 38 L 27 35.199219 C 27.6 34.699219 28 33.9 28 33 C 28 31.3 26.7 30 25 30 z"></path>
+    </svg>
+  );
+}
+
+export const LockOpenIcon = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 50 50">
+      <path d="M 22.78125 0 C 21.605469 -0.00390625 20.40625 0.164063 19.21875 0.53125 C 12.902344 2.492188 9.289063 9.269531 11.25 15.59375 L 11.25 15.65625 C 11.507813 16.367188 12.199219 18.617188 12.625 20 L 9 20 C 7.355469 20 6 21.355469 6 23 L 6 47 C 6 48.644531 7.355469 50 9 50 L 41 50 C 42.644531 50 44 48.644531 44 47 L 44 23 C 44 21.355469 42.644531 20 41 20 L 14.75 20 C 14.441406 19.007813 13.511719 16.074219 13.125 15 L 13.15625 15 C 11.519531 9.722656 14.5 4.109375 19.78125 2.46875 C 25.050781 0.832031 30.695313 3.796875 32.34375 9.0625 C 32.34375 9.066406 32.34375 9.089844 32.34375 9.09375 C 32.570313 9.886719 33.65625 13.40625 33.65625 13.40625 C 33.746094 13.765625 34.027344 14.050781 34.386719 14.136719 C 34.75 14.226563 35.128906 14.109375 35.375 13.832031 C 35.621094 13.550781 35.695313 13.160156 35.5625 12.8125 C 35.5625 12.8125 34.433594 9.171875 34.25 8.53125 L 34.25 8.5 C 32.78125 3.761719 28.601563 0.542969 23.9375 0.0625 C 23.550781 0.0234375 23.171875 0 22.78125 0 Z M 9 22 L 41 22 C 41.554688 22 42 22.445313 42 23 L 42 47 C 42 47.554688 41.554688 48 41 48 L 9 48 C 8.445313 48 8 47.554688 8 47 L 8 23 C 8 22.445313 8.445313 22 9 22 Z M 25 30 C 23.300781 30 22 31.300781 22 33 C 22 33.898438 22.398438 34.6875 23 35.1875 L 23 38 C 23 39.101563 23.898438 40 25 40 C 26.101563 40 27 39.101563 27 38 L 27 35.1875 C 27.601563 34.6875 28 33.898438 28 33 C 28 31.300781 26.699219 30 25 30 Z"></path>
+    </svg>
+  );
+}
+
+export const PlayIcon = () => {
+  return (
+    <svg className='detail-player-play-button-icon' fill="currentColor" height="1em" width="1em" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+      <g>
+        <path d={`M46.0136986,31.1054993L25.1973,20.6973c-0.3096008-0.1532993-0.6777992-0.1387005-0.9727001,0.0438995
+          C23.9297009,20.9237995,23.75,21.2451,23.75,21.5918007v20.8163986c0,0.3467026,0.1797009,0.6679993,0.4745998,0.8506012
+          C24.3848,43.3583984,24.5674,43.4081993,24.75,43.4081993c0.1532993,0,0.3057003-0.035099,0.4473-0.1054001l20.8163986-10.4081993
+          c0.3388023-0.1699982,0.5527-0.5157013,0.5527-0.8945999C46.5663986,31.6210995,46.3525009,31.2754002,46.0136986,31.1054993z
+          M25.75,40.7901001v-17.580101L43.330101,32L25.75,40.7901001z`} />
+        <path d={`M32,0C14.3268995,0,0,14.3268995,0,32s14.3268995,32,32,32s32-14.3269005,32-32S49.6730995,0,32,0z M32,62
+          C15.4579,62,2,48.542099,2,32C2,15.4580002,15.4579,2,32,2c16.5419998,0,30,13.4580002,30,30C62,48.542099,48.5419998,62,32,62z`} />
+      </g>
+    </svg>
+  );
+}

package/site/static/js/main.js

@@ -2,6 +2,8 @@ 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';
+import './comments.js';
 
 /*global Swiper, Modernizr, s72*/
 
@@ -567,3 +569,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}`;
+  }
+});

package/site/styles/_carousel.scss

@@ -44,13 +44,23 @@ s72-carousel {
     object-fit: cover;
     object-position: var(--carousel-image-object-position);
     width: 100%;
+
+    opacity: 0;
+    transition: opacity 0.25s ease;
+
     z-index: -1;
+
     @include media-breakpoint-up(sm) {
       object-position: var(--carousel-image-object-position-sm);
     }
     @include media-breakpoint-up(lg) {
       object-position: var(--carousel-image-object-position-lg);
     }
+
+    &.s72-image--loaded {
+      opacity: 1;
+    }
+
     &.focus-left {
       object-position: left;
     }

package/site/styles/_collections.scss

@@ -35,6 +35,11 @@
   display: block;
 }
 
+.page-collection-item {
+  display: flex;
+  flex-direction: column;
+}
+
 /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
 .page-collection-item,
 .slider-item,
@@ -261,7 +266,8 @@
   }
 
   .caption {
-    padding: 0px 0 8px;
+    padding: 0 0 8px;
+    margin-top: 4px;
 
     .crumb {
       @extend .d-flex;

package/site/styles/_detail-player.scss

@@ -0,0 +1,182 @@
+.detail-player {
+  &-inner {
+    background-color: var(--detail-player-fallback-color);
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    iframe {
+      border: 0;
+      height: 100%;
+      overflow: hidden;
+      position: absolute;
+      width: 100%;
+      z-index: 0;
+    }
+  }
+
+  &-placeholder {
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    transition: 1s;
+    width: 100%;
+    z-index: 1;
+
+    &--visible {
+      opacity: 1;
+    }
+
+    &-image-loader {
+      display: none;
+      height: 0;
+      width: 0;
+    }
+
+    &-bg {
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      background-size: cover;
+      height: 100%;
+      position: absolute;
+      width: 100%;
+    }
+
+    &-overlay {
+      align-items: center;
+      background-color: var(--detail-player-overlay-color);
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+    }
+
+    &-gradient {
+      @extend .bottom-gradient-bg;
+      width: 100%;
+      height: 30%;
+    }
+
+    &-title {
+      position: absolute;
+      bottom: 20px;
+      left: 20px;
+      max-width: 40%;
+      max-height: 50%;
+      z-index: 10;
+    }
+  }
+
+  &-locked-message {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    user-select: none;
+    background-color: rgba(var(--detail-player-messsage-bg-color), 0.3);
+    padding: 15px 25px;
+    border-radius: 100px;
+    box-shadow: 3px 3px 3px #0005;
+    transition: 0.5s;
+
+    &--unlocked {
+      background-color: rgba(var(--detail-player-messsage-bg-color), 0);
+      box-shadow: 3px 3px 3px #0000;
+      backdrop-filter: blur(0);
+    }
+
+    &-text {
+      color: var(--detail-player-messsage-font-color);
+      font-size: var(--detail-player-message-font-size);
+      opacity: 1;
+      flex-shrink: 1;
+      overflow: hidden;
+      transition: 0.5s;
+      white-space: nowrap;
+      width: auto;
+      max-width: 999px;
+      margin-top: 5px;
+      &--unlocked {
+        opacity: 0;
+        max-width: 0;
+      }
+    }
+  }
+
+  &-lock-icon-wrapper {
+    color: var(--detail-player-lock-icon-color);
+    font-size: 45px;
+    margin-right: 12px;
+    transition: 0.5s;
+
+    svg {
+      display: block;
+    }
+
+    @keyframes wiggle {
+      0% {
+        transform: rotate(0deg);
+      }
+      20%,
+      40%,
+      60% {
+        transform: rotate(8deg);
+      }
+      30%,
+      50%,
+      70% {
+        transform: rotate(-8deg);
+      }
+      80% {
+        transform: rotate(4deg);
+      }
+      90% {
+        transform: rotate(-4deg);
+      }
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+    &--large {
+      filter: drop-shadow(5px 5px 3px #0008);
+      transform: scale(1.5);
+    }
+    &--wiggle {
+      animation: wiggle 0.9s;
+    }
+  }
+
+  &-lock-icon {
+    transform-origin: 0% 80%;
+    &--anim-1 {
+      rotate: 12deg;
+      transition: 0.7s;
+    }
+    &--anim-2 {
+      rotate: -6deg;
+      transition: linear 0.1s;
+    }
+    &--anim-3 {
+      opacity: 0;
+      rotate: -12deg;
+      transition: linear 0.1s;
+    }
+  }
+
+  &-play-button {
+    cursor: pointer;
+    transition: 0.3s;
+    &-icon {
+      color: var(--detail-player-play-icon-color);
+      font-size: 80px;
+    }
+    &:hover {
+      transform: scale(1.2);
+    }
+    &--clicked {
+      opacity: 0;
+      pointer-events: none;
+      transform: scale(1.6) !important;
+    }
+  }
+}

package/site/styles/_forms.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 label {
   @include subtitle-1-style;
   margin-bottom: 0.25rem;
@@ -220,7 +222,7 @@ s72-confirm-delete-form,
     .s72-btn-modal-cancel {
       border-color: transparent;
       color: var(--body-color);
-      margin-right: $grid-gutter-width / 3;
+      margin-right: math.div($grid-gutter-width, 3);
 
       &:hover {
         background-color: var(--hover-background);

package/site/styles/_globals.scss

@@ -1,3 +1,14 @@
+body {
+  // Makes the fonts look a lot sharper on macOS. This is a pretty standard part
+  // of most CSS resets.
+  -webkit-font-smoothing: antialiased;
+
+  // prevents Safari (especially) from synthesizing bold or italic version of
+  // font faces (e.g. if you specify a font weight that isn't loaded). These
+  // look really bad.
+  font-synthesis: none;
+}
+
 small {
   font-size: 85%;
 }