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

1
2// IF we have other types of videos we can use this base class to extend
3class VideoController {
4  constructor(videoElement) {
5    this.video = videoElement;
6  }
7
8  play() {
9    this.video.play();
10    this.updateButtonState();
11  }
12
13  pause() {
14    this.video.pause();
15    this.updateButtonState();
16  }
17
18  assignButton(playButton) {
19    this.button = playButton;
20
21    this.button.addEventListener('click', ()=> {
22      this.toggleVideo(this.video)
23    });
24  }
25
26  updateButtonState() {
27    if(!this.button) {return}
28
29    if (this.video.paused ) {
30      this.button.classList.add('video-button--play');
31      this.button.classList.remove('video-button--pause');
32    } else {
33      this.button.classList.remove('video-button--play');
34      this.button.classList.add('video-button--pause');
35    }
36  }
37
38  toggleVideo() {
39
40    if (this.video.paused){
41      this.play();
42    }
43    else {
44      this.pause();
45    }
46  }
47
48  loadVideo() {
49
50    for (var source in this.video.children) {
51      var videoSource = this.video?.children[source];
52      if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE" && videoSource?.dataset?.src) {
53        videoSource.src = videoSource.dataset.src;
54      }
55
56      this.video.load();
57      this.video.classList.add("lazy--loaded");
58    }
59  }
60}
61
62
63(function (Drupal, once, $) {
64  'use strict';
65
66  // Create A js Object and add it to all video elements
67  // This will make it easier to play pause videos!
68  Drupal.behaviors.createVideoObject = {
69    attach: function(context, settings) {
70      once('videoObject', 'video', context).forEach( video => {
71        var videoObject = new VideoController(video);
72        video._objectVideo = videoObject;
73      });
74    }
75  }
76
77  // Lazy Load Videos
78  Drupal.behaviors.lazyLoadVideo = {
79    lazyVideoObserver : new IntersectionObserver( function(entries, observer) {
80      entries.forEach(function(entry) {
81        if (entry.isIntersecting) {
82
83          if(entry.target._objectVideo){
84            entry.target._objectVideo.loadVideo();
85          }
86          observer.unobserve(entry.target);
87        }
88      });
89    }),
90
91    attach: function(context, settings) {
92      once('lazyLoadVideo', 'video.lazy', context).forEach( videoLazy => {
93        this.lazyVideoObserver.observe(videoLazy);
94      });
95    }
96  }
97
98  // Add A button to all videos
99  Drupal.behaviors.videoPlayPause = {
100    attach: function(context, settings) {
101      once('PlayPause', '.js-video-toggle', context).forEach( field => {
102        const video = field.querySelector('video');
103        if(video && !video._objectVideo){  return;  }
104
105        const button =  field.querySelector('.js-video-toggle-btn');
106        if(video) {
107          var videoObject = video._objectVideo;
108          videoObject.assignButton(button);
109        }
110      });
111    }
112  }
113
114  // Have Videos auto Pause when not on the screen
115  // But make sure they only return playing when they were auto paused and not paused by client
116  Drupal.behaviors.autoPause = {
117
118    // Not sure what I have to use full path... "this" wasnt working for me
119    autoPauseObserver: new window.IntersectionObserver( entries => Drupal.behaviors.autoPause.intersectionFunction(entries), { threshold: 0.2, }),
120
121    attach: function(context, settings) {
122      once('autoPause', 'video', context).forEach((video) => {
123        if(!video._objectVideo){  return;  }
124
125        this.autoPauseObserver.observe(video);
126
127        document.addEventListener("visibilitychange", () => {
128          if (document.hidden){  this.autoPause(video); }
129          else {  this.autoPlay(video); }
130        });
131     })
132    },
133
134    autoPause: function(video) {
135      if(video.paused || !video._objectVideo){  return;  } // No need to pause if already
136      const videoObject = video._objectVideo;
137
138      videoObject.pause();
139      video.setAttribute('isAutoPaused', true);
140    },
141
142    autoPlay: function(video) {
143      if( !video.hasAttribute("isAutoPaused") || !video._objectVideo){  return;  }
144      const videoObject = video._objectVideo;
145
146      videoObject.play();
147      video.removeAttribute('isAutoPaused', true);
148    },
149
150    intersectionFunction : function(entries){

151      entries.forEach(function(entry) {
152        if (entry.isIntersecting) {
153          if (entry.target.paused) {
154            Drupal.behaviors.autoPause.autoPlay(entry.target);
155          }
156        } else {
157          Drupal.behaviors.autoPause.autoPause(entry.target);
158        }
159      })
160    },
161  }
162})(Drupal, once, jQuery);;
163
164
165// Remote
166// document.querySelectorAll('.video.remote').forEach(function(el, index) {
167//   if (el.querySelector(".controls .play")) {
168//     const iframe = el.querySelector('iframe');
169//     const player = new Vimeo.Player(iframe);
170
171//     el.querySelector(".controls .play").addEventListener('click', () => {
172//       player.play();
173//       el.querySelector(".controls .pause").classList.remove('hide');
174//       el.querySelector(".controls .play").classList.add('hide');
175//     });
176
177//     el.querySelector(".controls .pause").addEventListener('click', () => {
178//       player.pause();
179//       el.querySelector(".controls .pause").classList.add('hide');
180//       el.querySelector(".controls .play").classList.remove('hide');
181//     });
182//   }
183// });
184
185// Brandfolder
186// document.querySelectorAll('.video.bf').forEach(function(el, index) {
187//   if (el.querySelector(".controls .play")) {
188//     const video = el.querySelector('video');
189
190//     el.querySelector(".controls .play").addEventListener('click', () => {
191//       video.play();
192//       el.querySelector(".controls .pause").classList.remove('hide');
193//       el.querySelector(".controls .play").classList.add('hide');
194//     });
195
196//     el.querySelector(".controls .pause").addEventListener('click', () => {
197//       video.pause();
198//       el.querySelector(".controls .pause").classList.add('hide');
199//       el.querySelector(".controls .play").classList.remove('hide');
200//     });
201//   }
202// });
203
204// Lazy load videos
205// document.addEventListener("DOMContentLoaded", function() {
206//   var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
207
208//   if ("IntersectionObserver" in window) {
209//     var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
210//       entries.forEach(function(video) {
211//         if (video.isIntersecting) {
212//           for (var source in video.target.children) {
213//             var videoSource = video.target.children[source];
214//             if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
215//               videoSource.src = videoSource.dataset.src;
216//             }
217//           }
218
219//           video.target.load();
220//           video.target.classList.remove("lazy");
221//           lazyVideoObserver.unobserve(video.target);
222//         }
223//       });
224//     });
225
226//     lazyVideos.forEach(function(lazyVideo) {
227//       lazyVideoObserver.observe(lazyVideo);
228//     });
229//   }
230// });
231
232// (function ($, Drupal) {
233//   'use strict';
234//   //
235//   // Brand main nav
236//   Drupal.behaviors.videoPlayPause = {
237//     attach: function (context, settings) {
238//       // Resolve behavior being called multiple times per page load.
239//       if (context !== document) {
240//         return;
241//       }
242
243//       $(".video.bf.background video").each(function() {
244//         const observer = new window.IntersectionObserver(
245//           ([entry]) => {
246//             if (entry.isIntersecting) {
247//               if (this.paused) {
248//                 this.play();
249//               }
250//             } else {
251//               this.pause();
252//             }
253//           }, {
254//             threshold: 0.5,
255//           }
256//         );
257//         observer.observe(this);
258//       });
259
260//       // tab not active
261//       document.addEventListener("visibilitychange", function() {
262//         $(".video.bf.background video").each(function() {
263//           if (document.hidden){
264//             this.pause();
265//           } else {
266//             this.play();
267//           }
268//         });
269//       });
270//     }
271//   };
272// })(jQuery, Drupal);