https://www.starwoodhotels.com/themes/custom/starwood/assets/js/dynamic_background_hover.js?tlrzgr

1(function (Drupal, once, $) {
2'use strict';
3
4    // we may want to make this functionality reusable for all components that have videos that we want to autoplay once its in the viewport
5    Drupal.behaviors.videoAutoplay = {
6        attach: function (context, settings) {
7            once('videoAutoPlay', '.dynamic-background-hover-cards', context).forEach( background => {
8                var observer = new IntersectionObserver( entries => {
9                    entries.forEach(entry => {
10                        let firstBgMedia = entry.target.firstElementChild.firstElementChild;
11                        let isVideo = firstBgMedia.tagName === 'VIDEO' ? true : false;
12
13                        if( entry.isIntersecting && isVideo) {
14                            firstBgMedia.play();
15                        }
16                        if ( !entry.isIntersecting && isVideo ) {
17                            firstBgMedia.pause();
18                        }
19                    })
20                }, { threshold: 0.3} )
21
22                observer.observe(background);
23            })
24        }
25    }
26
27    Drupal.behaviors.changeBackgroundHover = {
28        attach: function (context, settings) {
29            once('changeBackgroundHover', '.card-with-background-media', context).forEach( hoverCard => {
30                hoverCard.addEventListener('mouseover', () => {
31                    let currentViewportWidth = window.innerWidth;
32                    if ( currentViewportWidth <= 1280 ) {
33                        return;
34                    }
35                    let cardDataId = hoverCard.getAttribute('data-id');
36                    let bgMediaArray = hoverCard.closest('.dynamic-background-hover-cards').querySelectorAll('.container-bg');
37                    $(hoverCard).parent().parent().parent().next().find("img.pause-icon").show().addClass('active');
38                    $(hoverCard).parent().parent().parent().next().find("img.play-icon").hide().removeClass('active');
39                    bgMediaArray.forEach( bg => {
40                        if($(bg).find('video').length > 0) {
41                            $(bg).find('video')[0].play();
42                        }
43                        let bgId;
44                        if (bg.firstElementChild.tagName === 'VIDEO') {
45                            bgId = bg.firstElementChild.getAttribute('data-id');
46                        }
47                        if (bg.firstElementChild.tagName === 'PICTURE') {
48                            bgId = bg.firstElementChild.querySelector('img').getAttribute('data-id');
49                        }
50
51                        bg.classList.remove('active');
52                        bg.tagName === 'VIDEO' && bg.pause();
53
54                        if ( bgId === cardDataId ) {
55                            bg.classList.add('active');
56                            bg.tagName === 'IMG' && null;
57                        }
58                    })
59                })
60            })
61        }
62    };
63
64    Drupal.behaviors.dynamicVideoPauseAbility = {
65        attach: function (context, settings) {
66            once('videoPauseAbility', '.dynamic-background-hover-cards .dynamic-play-pause-icons img', 

66context).forEach( icon => {
67                $(icon).on('click', function() {
68                    iconClickOrKeypress($(this)[0]);
69                });
70
71                $(icon).on('keypress', function(e) {
72                    e.preventDefault();
73                    if(e.code === "Space" || e.code === "Enter") iconClickOrKeypress($(this)[0]);
74                });
75            })
76
77             function iconClickOrKeypress (icon) {
78                $(icon).parent().find('img:not(.active)').toggleClass('active').toggle().attr('tabindex', '0').focus();
79                $(icon).toggleClass('active').toggle().attr('tabindex', '-1');
80                if($(icon).hasClass('play-icon')) {
81                    if(window.innerWidth > 1279) {
82                        $(icon).parent().parent().find('.container-bg.active video')[0].play();
83                    }else {
84                        $(icon).parent().parent().find('.container-bg video').each(function() {
85                            $(this)[0].play();
86                        });
87                    }
88                }else {
89                    if(window.innerWidth > 1279) {
90                        $(icon).parent().parent().find('.container-bg.active video')[0].pause();
91                    }else {
92                        $(icon).parent().parent().find('.container-bg video').each(function() {
93                            $(this)[0].pause();
94                        });
95                    }
96                }
97            }
98        }
99    }
100})(Drupal, once, jQuery);
101