@shift72/core-template 1.9.20 → 1.9.21

package/CHANGELOG.md

@@ -1,10 +1,29 @@
 # Changelog
 
-## [Unreleased](https://github.com/shift72/core-template/compare/1.9.20...HEAD)
+## [Unreleased](https://github.com/shift72/core-template/compare/1.9.21...HEAD)
+
+## [1.9.21](https://github.com/shift72/core-template/compare/1.9.20...1.9.21)
+
+### Added
+
+- Purchase gift CTA button
+- Carousel video support
+
+### Fixed
+
+- Turn off infinite scroll on the wishlist/continue watching sliders. This
+  caused some funkiness if items were removed after scrolling the slider.
+- Fixed alignment on collection rows. The first item had a negative margin hack
+  to align with headings, but this didn't affect subsequent rows causing the
+  posters to be skewed by 5px. The fix applies the negative margin to the
+  entire container.
+- Slightly reduce spacing between poster and the title below. In grid views this
+  makes it less ambiguous which poster the text is associated with.
 
 ## [1.9.20](https://github.com/shift72/core-template/compare/1.9.19...1.9.20)
 
 ### Fixed
+
 - Typo in translation for ad tracking settings
 - Positioning of plan label
 - TV seasons not showing season number under posters in sliders / search results etc.
@@ -12,22 +31,27 @@
 ## [1.9.19](https://github.com/shift72/core-template/compare/1.9.18...1.9.19)
 
 ### Added
+
 - Support for Ad consent tracking option on user account settings
 
 ### Changed
+
 - Deploy commands, now use npm run deploy to deploy
 
 ## [1.9.18](https://github.com/shift72/core-template/compare/1.9.17...1.9.18)
 
 ### Changed
+
 - Remove polyfill.io CDN in favour for Cloudflare
 
 ## [1.9.17](https://github.com/shift72/core-template/compare/1.9.16...1.9.17)
 
 ### Added
+
 - Continue watching slider
 
 ### Changed
+
 - Reduced carousel height slightly
 - css: use `--button-text-color` instead of `--body-bg` for `--tooltip-color`
 

package/kibble.json

@@ -194,5 +194,5 @@
       "pageSize": 0
     }
   ],
-  "coreTemplateVersion": "1.9.20"
+  "coreTemplateVersion": "1.9.21"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shift72/core-template",
-  "version": "1.9.20",
+  "version": "1.9.21",
   "description": "Shift72 core template",
   "license": "MIT",
   "scripts": {

package/site/ar_LB.all.json

@@ -1803,5 +1803,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "إعدادات خصوصية الإعلان"
+  },
+  "gift_purchase_button_label": {
+    "other": "شراء كهدية"
   }
 }

package/site/ca_ES.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Configuració de privadesa dels anuncis"
+  },
+  "gift_purchase_button_label": {
+    "other": "Compra com a regal"
   }
 }

package/site/da_DK.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Indstillinger for annoncebeskyttelse"
+  },
+  "gift_purchase_button_label": {
+    "other": "Køb som gave"
   }
 }

package/site/de_DE.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Datenschutzeinstellungen für Anzeigen"
+  },
+  "gift_purchase_button_label": {
+    "other": "Als Geschenk kaufen"
   }
 }

package/site/el_EL.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Ρυθμίσεις απορρήτου διαφημίσεων"
+  },
+  "gift_purchase_button_label": {
+    "other": "Αγορά ως δώρο"
   }
 }

package/site/en_AU.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Ad privacy settings"
+  },
+  "gift_purchase_button_label": {
+    "other": "Purchase as gift"
   }
-}
+}

package/site/es_ES.all.json

@@ -1743,5 +1743,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Configuración de privacidad de anuncios"
+  },
+  "gift_purchase_button_label": {
+    "other": "Comprar como regalo"
   }
 }

package/site/es_MX.all.json

@@ -1743,5 +1743,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Configuración de privacidad de anuncios"
+  },
+  "gift_purchase_button_label": {
+    "other": "Comprar como regalo"
   }
 }

package/site/et_ET.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Reklaami privaatsusseaded"
+  },
+  "gift_purchase_button_label": {
+    "other": "Ostke kingituseks"
   }
 }

package/site/fi_FI.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Mainosten tietosuoja-asetukset"
+  },
+  "gift_purchase_button_label": {
+    "other": "Osta lahjaksi"
   }
 }

package/site/fr_FR.all.json

@@ -1743,5 +1743,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Paramètres de confidentialité des annonces"
+  },
+  "gift_purchase_button_label": {
+    "other": "Acheter en cadeau"
   }
 }

package/site/hr_HR.all.json

@@ -1741,5 +1741,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Postavke privatnosti oglasa"
+  },
+  "gift_purchase_button_label": {
+    "other": "Kupiti kao poklon"
   }
 }

package/site/hu_HU.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Hirdetések adatvédelmi beállításai"
+  },
+  "gift_purchase_button_label": {
+    "other": "Vásároljon ajándékba"
   }
 }

package/site/it_IT.all.json

@@ -1743,5 +1743,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Impostazioni sulla privacy degli annunci"
+  },
+  "gift_purchase_button_label": {
+    "other": "Acquista come regalo"
   }
 }

package/site/ja_JP.all.json

@@ -1726,5 +1726,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "広告のプライバシー設定"
+  },
+  "gift_purchase_button_label": {
+    "other": "ギフトとして購入"
   }
 }

package/site/lt_LT.all.json

@@ -1771,5 +1771,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Skelbimų privatumo nustatymai"
+  },
+  "gift_purchase_button_label": {
+    "other": "Pirkti kaip dovaną"
   }
 }

package/site/nl_BE.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Privacy-instellingen voor advertenties"
+  },
+  "gift_purchase_button_label": {
+    "other": "Aankoop als geschenk"
   }
 }

package/site/no_NO.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Personverninnstillinger for annonser"
+  },
+  "gift_purchase_button_label": {
+    "other": "Kjøp som gave"
   }
 }

package/site/pl_PL.all.json

@@ -1816,5 +1816,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Ustawienia prywatności reklam"
+  },
+  "gift_purchase_button_label": {
+    "other": "Kup na prezent"
   }
-}
+}

package/site/pt_BR.all.json

@@ -1743,5 +1743,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Configurações de privacidade de anúncios"
+  },
+  "gift_purchase_button_label": {
+    "other": "Comprar como presente"
   }
 }

package/site/pt_PT.all.json

@@ -1743,5 +1743,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Configurações de privacidade de anúncios"
+  },
+  "gift_purchase_button_label": {
+    "other": "Comprar como presente"
   }
 }

package/site/ru_RU.all.json

@@ -1793,5 +1793,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Настройки конфиденциальности рекламы"
+  },
+  "gift_purchase_button_label": {
+    "other": "Покупка в подарок"
   }
 }

package/site/sr_SR.all.json

@@ -1755,5 +1755,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Подешавања приватности огласа"
+  },
+  "gift_purchase_button_label": {
+    "other": "Купите као поклон"
   }
 }

package/site/static/js/carousel-video-mute-button.component.js

@@ -0,0 +1,38 @@
+import { AppComponent, bindAllComponents, render, h, attrs, Tooltip } from 's72.ui';
+import CarouselVideoMutedIcon from './icons/carousel-video-muted-icon.js';
+import CarouselVideoUnMutedIcon from './icons/carousel-video-unmuted-icon.js';
+
+export default class CarouselVideoMuteButton extends AppComponent {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { muted: true };
+  }
+
+  toggleBackgroundMute(e) {
+    e.preventDefault();
+
+    let video = document.querySelector('.s72-carousel-item.current video');
+
+    if (video.muted) {
+      video.muted = false;
+      this.setState({ muted: false });
+    } else {
+      video.muted = true;
+      this.setState({ muted: true });
+    }
+  }
+
+  render() {
+    return (
+      <Tooltip tooltip={this.state.muted ? 'Unmute' : 'Mute'} position="bottom">
+        <button id="muteBtn" class="s72-btn mute-btn" onClick={e => this.toggleBackgroundMute(e)}>
+          {this.state.muted ? <CarouselVideoMutedIcon /> : <CarouselVideoUnMutedIcon />}
+        </button>
+      </Tooltip>
+    );
+  }
+}
+
+bindAllComponents('carousel-video-mute-button', elements => {
+  return elements.map(e => render(h(CarouselVideoMuteButton, attrs(e)), e));
+});

package/site/static/js/icons/carousel-video-muted-icon.js

@@ -0,0 +1,7 @@
+const CarouselVideoMutedIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path d="M301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z" />
+  </svg>
+);
+
+export default CarouselVideoMutedIcon;

package/site/static/js/icons/carousel-video-unmuted-icon.js

@@ -0,0 +1,7 @@
+const CarouselVideoUnMutedIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z" />
+  </svg>
+);
+
+export default CarouselVideoUnMutedIcon;

package/site/static/js/main.js

@@ -1,6 +1,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';
 
 /*global Swiper, Modernizr, s72*/
 
@@ -66,49 +67,49 @@ function initializeSwiper(element, force) {
 
     if (layout == 'portrait') {
       switch (itemsPerRow) {
-      case '6':
-        defaultSlidesPerView = 8;
-        slidesPerView[1600] = 6;
-        slidesPerView[1440] = 6;
-        slidesPerView[1200] = 5;
-        slidesPerView[992] = 4;
-        slidesPerView[768] = 4;
-        slidesPerView[667] = 3;
-        slidesPerView[568] = 3;
-        break;
-
-      case '4':
-        defaultSlidesPerView = 6;
-        slidesPerView[1600] = 5;
-        slidesPerView[1440] = 5;
-        slidesPerView[1200] = 4;
-        slidesPerView[992] = 3;
-        slidesPerView[768] = 3;
-        slidesPerView[667] = 3;
-        slidesPerView[568] = 2;
-        break;
+        case '6':
+          defaultSlidesPerView = 8;
+          slidesPerView[1600] = 6;
+          slidesPerView[1440] = 6;
+          slidesPerView[1200] = 5;
+          slidesPerView[992] = 4;
+          slidesPerView[768] = 4;
+          slidesPerView[667] = 3;
+          slidesPerView[568] = 3;
+          break;
+
+        case '4':
+          defaultSlidesPerView = 6;
+          slidesPerView[1600] = 5;
+          slidesPerView[1440] = 5;
+          slidesPerView[1200] = 4;
+          slidesPerView[992] = 3;
+          slidesPerView[768] = 3;
+          slidesPerView[667] = 3;
+          slidesPerView[568] = 2;
+          break;
       }
     } else if (layout == 'landscape') {
       switch (itemsPerRow) {
-      case '4':
-        defaultSlidesPerView = 5;
-        slidesPerView[1600] = 4;
-        slidesPerView[1440] = 4;
-        slidesPerView[1200] = 3;
-        slidesPerView[992] = 3;
-        slidesPerView[768] = 3;
-        slidesPerView[568] = 2;
-        break;
-
-      case '3':
-        defaultSlidesPerView = 4;
-        slidesPerView[1600] = 3;
-        slidesPerView[1440] = 3;
-        slidesPerView[1200] = 3;
-        slidesPerView[992] = 2;
-        slidesPerView[768] = 2;
-        slidesPerView[568] = 2;
-        break;
+        case '4':
+          defaultSlidesPerView = 5;
+          slidesPerView[1600] = 4;
+          slidesPerView[1440] = 4;
+          slidesPerView[1200] = 3;
+          slidesPerView[992] = 3;
+          slidesPerView[768] = 3;
+          slidesPerView[568] = 2;
+          break;
+
+        case '3':
+          defaultSlidesPerView = 4;
+          slidesPerView[1600] = 3;
+          slidesPerView[1440] = 3;
+          slidesPerView[1200] = 3;
+          slidesPerView[992] = 2;
+          slidesPerView[768] = 2;
+          slidesPerView[568] = 2;
+          break;
       }
     }
   }
@@ -462,6 +463,58 @@ function toggleScroll() {
   }
 }
 
+function initCarouselVideo(app) {
+  // pause carousel trailer video when trailer is opened in modal
+  document.querySelectorAll('s72-modal-player button').forEach(b =>
+    b.addEventListener('click', () => {
+      let video = document.querySelector('.s72-carousel-item.current video');
+      if (video) {
+        video.pause();
+      }
+    })
+  );
+
+  // listen for s72-carousel events
+  document.querySelectorAll('s72-carousel').forEach(c => {
+    c.addEventListener('s72-carousel:slide-hidden', e => {
+      pauseVideoSlide(e.target);
+    });
+    c.addEventListener('s72-carousel:slide-shown', e => {
+      playVideoSlide(e.target);
+    });
+  });
+
+  // resume carousel trailer video when trailer modal is closed.
+  app.messagebus.subscribe('modal-closed', () => {
+    let v = document.querySelector('.s72-carousel-item.current video');
+    if (v) {
+      v.play();
+    }
+  });
+
+  // play first carousel video trailer on load if there
+  let s = document.querySelector('.s72-carousel-item.current video source');
+  if (s) {
+    s.setAttribute('src', s.parentNode.getAttribute('data-src'));
+    s.parentNode.load();
+  }
+}
+
+function playVideoSlide(slide) {
+  const video = slide.querySelector('video');
+  let s = video.querySelector('source');
+  if (s.getAttribute('src')) {
+    video.play();
+  } else {
+    s.setAttribute('src', video.getAttribute('data-src'));
+    video.load();
+  }
+}
+function pauseVideoSlide(slide) {
+  const video = slide.querySelector('video');
+  video.pause();
+}
+
 function documentReady(app) {
   initializeCustomSliders();
 
@@ -473,7 +526,7 @@ function documentReady(app) {
   let swipers = document.getElementsByClassName('swiper-container');
   for (let i = 0; i < swipers.length; i++) {
     let el = swipers[i];
-    if (el.getAttribute('is-wishlist') == undefined) {
+    if (el.getAttribute('is-dynamic-slider') == undefined) {
       let swiper = initializeSwiper(el, false);
       init(swiper);
 
@@ -496,6 +549,7 @@ function documentReady(app) {
     initSearch();
   }
   initScroll();
+  initCarouselVideo(app);
 }
 
 function detectTouchscreen() {
@@ -506,6 +560,7 @@ function detectTouchscreen() {
 function isTouchscreenEnabled() {
   return document.querySelector('html').getAttribute('is-touchscreen') === 'true';
 }
+
 document.addEventListener('s72loaded', event => {
   let app = event.detail.app;
   documentReady(app);

package/site/styles/_buttons.scss

@@ -257,7 +257,8 @@ s72-userwishlist-button {
 
   .s72-btn-trailer,
   s72-share-modal .s72-btn,
-  .s72-btn-wishlist {
+  .s72-btn-wishlist,
+  .s72-btn-gift {
     height: 42px;
     padding: 0;
     width: 42px;

package/site/styles/_carousel.scss

@@ -99,6 +99,19 @@ s72-carousel {
       }
     }
   }
+
+  .carousel-item-video {
+    height: var(--carousel-height);
+    object-fit: cover;
+    width: 100vw;
+    @include media-breakpoint-up(sm) {
+      height: var(--carousel-height-sm);
+    }
+
+    @include media-breakpoint-up(lg) {
+      height: var(--carousel-height-lg);
+    }
+  }
 }
 
 .carousel-item-caption {

package/site/styles/_collections.scss

@@ -42,9 +42,6 @@
   @extend .meta-item;
   float: left;
   padding: 5px;
-  &:first-child {
-    margin-left: -5px;
-  }
 
   h2 {
     @include subtitle-1-style;
@@ -264,7 +261,7 @@
   }
 
   .caption {
-    padding: 4px 0;
+    padding: 0px 0 8px;
 
     .crumb {
       @extend .d-flex;
@@ -342,3 +339,11 @@
 .collection-items {
   margin: 0 auto;
 }
+
+// To cancel out the 5px padding on items, add some negative margin to the containers
+.swiper-wrapper,
+.page-collection-items,
+.s72-userlibrary-items,
+.s72-userwishlist-items {
+  margin-left: -5px;
+}

package/site/styles/_cta-buttons.scss

@@ -185,6 +185,22 @@
       grid-column: auto;
       grid-row: 1;
     }
+    carousel-video-mute-button {
+      margin-left: -6px;
+    }
+    .mute-btn {
+      background: transparent;
+      border: 0;
+      height: 42px;
+      padding: 0;
+      width: 42px;
+
+      svg {
+        fill: #fff;
+        height: 26px;
+        width: 26px;
+      }
+    }
   }
 }
 /* stylelint-enable selector-max-compound-selectors, max-nesting-depth */

package/site/styles/_library.scss

@@ -1,3 +1,9 @@
+.library-page s72-userlibrary {
+  // It looks a bit silly if the user library stretches too wide -- the gap
+  // between items gets big rather than adding more items!
+  max-width: 1920px;
+}
+
 .s72-userlibrary-items {
   @extend .d-flex;
 

package/site/styles/_variables.scss

@@ -111,8 +111,8 @@
   --signin-sso-btn-background-hover-color: var(--button-background-hover);
 
   // Carousel
-  --carousel-height: 82vh;
-  --carousel-height-sm: 82vh;
+  --carousel-height: 52vh;
+  --carousel-height-sm: 68vh;
   --carousel-height-lg: 82vh;
   --carousel-bottom-gradient-height: 200px; // Increase this to 300px for light theme.
   --carousel-bottom-gradient-height-sm: 200px; // Increase this to 300px for light theme.

package/site/styles/_wishlist.scss

@@ -53,3 +53,7 @@
   margin: 0;
   padding: 0;
 }
+
+.wishlist-page s72-userwishlist {
+  max-width: 1920px;
+}

package/site/templates/application/application.jet

@@ -5,10 +5,10 @@
 {{import "./pixel.jet"}}
 {{import "./footer/footer.jet" }}
 
-{{useLocalDevRelish := false}}
+{{useLocalDevRelish := false }}
 {{useLocalDevCheckout := false}}
 
-{{CDN := useLocalDevRelish ? "//localhost:3000" : "//cdn.shift72.com/1.4"}}
+{{CDN := useLocalDevRelish ? "//localhost:3000" : "//cdn.shift72.com/" + config("s72_web_version", "1.4")}}
 
 {{CSSFileURL := site.SiteBrand.GetLink("css", "")}}
 {*{CSSFileURL := "/styles/local.css"}*}

package/site/templates/collection/carousel/item/image.jet

@@ -1,4 +1,5 @@
-{{block carouselItemImage()}}
+{{import "./video.jet"}}
+{{block carouselItemImage(showTrailerBg, trailerURL)}}
   {{if isset(.Images["Carousel"])}}
     {* If carousel focus is set for film (film infos metadata) or tv season (tv seasons metadata) or custom fields for Pages / Bundles then it will set a class accordingly to position the carousel image *}
     {{focusClass = ""}}
@@ -11,6 +12,13 @@
         {{focusClass = "focus-center"}}
       {{end}}
     {{end}}
-    <s72-image src="{{.Images.Carousel}}" alt="{{.Title}}" class="carousel-item-image {{focusClass}}"></s72-image>
+
+
+    {{if showTrailerBg}}
+      {{yield carouselItemVideo() item.InnerItem}}
+
+    {{else}}
+      <s72-image src="{{.Images.Carousel}}" alt="{{.Title}}" class="carousel-item-image {{focusClass}}"></s72-image>
+    {{end}}
   {{end}}
 {{end}}

package/site/templates/collection/carousel/item/video.jet

@@ -0,0 +1,6 @@
+{{block carouselItemVideo()}} 
+  <video autoplay muted loop playsInline class="carousel-item-video" data-src="{{trailerURL}}" poster="{{.Images.Carousel}}">
+    <s72-image src="{{.Images.Carousel}}" alt="{{.Title}}" class="carousel-item-image {{focusClass}}"></s72-image>
+    <source src="" type="video/mp4">
+  </video>
+{{end}}

package/site/templates/collection/carousel/item.jet

@@ -6,13 +6,22 @@
 {{import "../../common/sponsor-image.jet"}}
 {{import "../../common/cta_buttons.jet"}}
 
+
+
 {{block carouselItem(item)}}
+
+  {{itemType := item.ItemType}}
+  {{isFilm := itemType == "film"}}
+  {{isSeason := itemType == "tvseason"}}
+  {{isBundle := itemType == "bundle"}}
+  {{trailerURL := isBundle ? item.InnerItem.PromoURL : (isFilm || isSeason) && len(item.InnerItem.Trailers) > 0 ? item.InnerItem.Trailers[0].URL : ""}}
+  {{showTrailerBg := trailerURL ? item.InnerItem.CustomFields.GetBool("use_trailer_as_background_video", false) : "" }}
   {{showItemContent := !isset(item["PageType"]) || item.PageType != "external"}}
 
   <div class="s72-carousel-item" data-slug="{{item.Slug}}">
     <a href="{{routeToSlug(item.Slug)}}" class="carousel-item-link" aria-label="{{item.Title}}">
 
-      {{yield carouselItemImage() item}}
+      {{yield carouselItemImage(showTrailerBg=showTrailerBg, trailerURL=trailerURL) item}}
 
       {{if showItemContent}}
         <div class="carousel-item-caption">
@@ -39,9 +48,12 @@
             <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
 
             {{yield ctaButtons(itemType=item.ItemType, context="carousel") item.InnerItem}}
+
+
           </div>
         </div>
       {{end}}
+
     </a>
   </div>
 {{end}}

package/site/templates/collection/continue_watching.jet

@@ -16,7 +16,7 @@
       class="user-continue-watching s72-slider s72-hide">
     <section class="page-collection" aria-label="{{i18n("wcag_aria_label_continue_watching")}}">
       <div class="collection-wrapper-container swiper-wrapper-container">
-        <div class="collection-container swiper-container" data-items-per-row="{{itemsPerRow}}" data-layout="{{layout}}">
+        <div class="collection-container swiper-container" is-dynamic-slider disable-infinite-scroll data-items-per-row="{{itemsPerRow}}" data-layout="{{layout}}">
           {{if i18n("continue_watching_slider_header") != ""}}
             <div class="swiper-title">
               <h3>{{i18n("continue_watching_slider_header")}}</h3>

package/site/templates/collection/wishlist.jet

@@ -1,19 +1,10 @@
 {{import "./page_collection_item.jet"}}
 {{import "../common/slider.jet"}}
 {{import "./slider-buttons.jet"}}
-{{block wishlistCollection()}}
 
-{{if config("default_image_type") == "portrait"}}
-  <s72-userwishlist
-      render-as-slider="false"
-      hide-if-empty="true"
-      partials-base-path="/partials"
-      partials-classes="swiper-slide"
-      partials-insert-point-selector=".swiper-wrapper"
-      force-login="false"
-      data-items-per-page="6" data-item-layout="portrait" class="user-wishlist s72-slider s72-hide">
-
-{{else}}
+{{block wishlistCollection()}}
+  {{layout := config("default_image_type")}}
+  {{itemsPerRow := layout == "portrait" ? 6 : 4}}
   <s72-userwishlist
       render-as-slider="false"
       hide-if-empty="true"
@@ -21,27 +12,23 @@
       partials-classes="swiper-slide"
       partials-insert-point-selector=".swiper-wrapper"
       force-login="false"
-      data-items-per-page="4" data-item-layout="landscape" class="user-wishlist s72-slider s72-hide">
-
-{{end}}
-  <section class="page-collection" aria-label="{{i18n("wcag_aria_label_wishlist")}}">
-    <div class="collection-wrapper-container swiper-wrapper-container">
-      {{if config("default_image_type") == "portrait"}}
-        <div class="collection-container swiper-container" is-wishlist="true" data-items-per-row="6" data-layout="portrait">
-      {{else}}
-        <div class="collection-container swiper-container" is-wishlist="true" data-items-per-row="4" data-layout="landscape">
-      {{end}}
-            {{if i18n("userwishlist_slider_header") != ""}}
+      data-item-layout="{{layout}}"
+      data-items-per-page="{{itemsPerRow}}"
+      class="user-wishlist s72-slider s72-hide">
+    <section class="page-collection" aria-label="{{i18n("wcag_aria_label_wishlist")}}">
+      <div class="collection-wrapper-container swiper-wrapper-container">
+        <div class="collection-container swiper-container" is-dynamic-slider disable-infinite-scroll data-items-per-row="{{itemsPerRow}}" data-layout="{{layout}}">
+          {{if i18n("userwishlist_slider_header") != ""}}
             <div class="swiper-title">
-                <h3>{{i18n("userwishlist_slider_header")}}</h3>
-            </div>
-            {{end}}
-            <div class="swiper-wrapper">
-              {{yield content}}
+              <h3>{{i18n("userwishlist_slider_header")}}</h3>
             </div>
+          {{end}}
+          <div class="swiper-wrapper">
+            {{yield content}}
+          </div>
         </div>
-        {{ yield sliderButtons() }}
-    </div>
-  </section>
-</s72-userwishlist>
+        {{yield sliderButtons()}}
+      </div>
+    </section>
+  </s72-userwishlist>
 {{end}}

package/site/templates/common/cta_buttons.jet

@@ -11,24 +11,29 @@
   {{trailerURL := isBundle ? .PromoURL : (isFilm || isSeason) && len(.Trailers) > 0 ? .Trailers[0].URL : ""}}
 
   {{showPricingButtons := isFilm || isSeason || isBundle}}
+
   {{showPlayButton := isFilm || isSeason || isEpisode}}
   {{showTrailerButton := trailerURL != ""}}
   {{showWishlistButton := isFilm || isSeason || isEpisode}}
   {{showShareButton := isFilm || isSeason || isEpisode || isBundle}}
   {{autoplay := !isCarousel}}
 
+
+  {{supportsGiftPurchase := isEnabled("use_checkout") && config("gift_purchase_enabled", "false") == "true" }}
+  {{showGiftButton := supportsGiftPurchase && !isCarousel}}
+
   {* These are limited to films for now, but really it should work for anything that has custom fields *}
   {{canBeWatchedButtonLink := isFilm ? .CustomFields.GetString("can_be_watched_button_link", "") : ""}}
   {{canBeWatchedButtonText := isFilm ? .CustomFields.GetString("can_be_watched_button_text", "can_be_watched_button_text") : ""}}
   {{showCanBeWatchedButton := len(canBeWatchedButtonLink) > 0}}
-  
+
   {{externalPurchaseButtonLink := isFilm ? .CustomFields.GetString("external_purchase_button_link", "") : ""}}
   {{externalPurchaseButtonText := isFilm ? .CustomFields.GetString("external_purchase_button_text", "external_purchase_button_text") :"" }}
   {{showExternalPurchaseButton := len(externalPurchaseButtonLink) > 0}}
 
   {{showCtaButtons := showPricingButtons || showPlayButton || showCanBeWatchedButton || showTrailerButton || showWishlistButton || showShareButton || showExternalPurchaseButton}}
   {{showExtraButtons := showTrailerButton || showWishlistButton || showShareButton}}
-
+  {{showTrailerBg := trailerURL ? .CustomFields.GetBool("use_trailer_as_background_video", false) : "" }}
 
   {{if showCtaButtons}}
     <div class="cta-buttons">
@@ -54,11 +59,19 @@
       {{if showExtraButtons}}
         <div class="extra-buttons">
 
+          {{if showGiftButton}}
+            <s72-gift-button data-slug="{{slug}}"></s72-gift-button>
+          {{end}}
+
           {{if showTrailerButton}}
             {{dataLabel := i18n("play_trailer")}}
             <s72-modal-player src="{{trailerURL}}" class="s72-btn-trailer" data-slug="{{slug}}" data-label="{{dataLabel}}" {{if autoplay}}autoplay="querystring"{{end}} layout="tooltip"></s72-modal-player>
           {{end}}
 
+          {{if isCarousel && showTrailerBg}}
+            <carousel-video-mute-button></carousel-video-mute-button>
+          {{end}}
+
           {{if showWishlistButton}}
             <s72-userwishlist-button data-slug="{{slug}}" class="btn-wishlist" layout="tooltip"></s72-userwishlist-button>
           {{end}}

package/site/tr_TR.all.json

@@ -1739,5 +1739,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Reklam gizlilik ayarları"
+  },
+  "gift_purchase_button_label": {
+    "other": "Hediye olarak satın al"
   }
 }

package/site/uk_UA.all.json

@@ -1799,5 +1799,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "Налаштування конфіденційності реклами"
+  },
+  "gift_purchase_button_label": {
+    "other": "Купівля в подарунок"
   }
 }

package/site/zh_TW.all.json

@@ -1726,5 +1726,8 @@
   },
   "account_form_ad_privacy_settings": {
     "other": "廣告隱私設定"
+  },
+  "gift_purchase_button_label": {
+    "other": "作為禮物購買"
   }
 }