https://mundoestrellagalicia.es/etc.clientlibs/catalog/clientlibs/…-d7fb2a4480c07164e62bb8b487762bb2-lc.min.js

1const BannerTwoColumns = {
2  init: () => {
3    HdR.loadYouTubeAPI()
4    BannerTwoColumns.video.setupPlayer()
5    BannerTwoColumns.video.events()
6  },
7
8  video: {
9    players: {},
10
11    events: () => {
12      BannerTwoColumns.video.handleImageVideo()
13    },
14
15    isMobile: () => !window.matchMedia('(min-width: 768px)').matches,
16
17    getYouTubeVideoId: (url) => {
18      const regex = /(?:youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/)([^"&?\/\s]{11})/
19      const match = url.match(regex)
20      return match ? match[1] : null
21    },
22
23    setupPlayer: () => {
24      window.onYouTubeIframeAPIReadyCallbacks.push(() => {
25        const components = document.querySelectorAll('.banner-two-columns-component--video')
26        components.forEach((compo) => {
27          const componentId = compo.getAttribute('data-dialog-id')
28          const iframe = document.getElementById(`player-${componentId}`)
29          if (iframe && !BannerTwoColumns.video.players[componentId]) {
30            BannerTwoColumns.video.players[componentId] = new YT.Player(iframe.id, {
31              events: {
32                onStateChange: (event) => BannerTwoColumns.video.onPlayerStateChange(event, componentId)
33              }
34            })
35          }
36        })
37      })
38    },
39
40    handleYTvideoConfiguration: (video) => {
41      if (video) {
42        const videoAttributes = {
43          urlDesktop: video.getAttribute('data-src-desktop'),
44          urlMobile: video.getAttribute('data-src-mobile'),
45          muted: video.getAttribute('data-muted'),
46          loop: video.getAttribute('data-loop'),
47          autoplay: video.getAttribute('data-autoplay'),
48          controls: video.getAttribute('data-controls')
49        }
50
51        let urlYT = videoAttributes.urlDesktop
52
53        if (videoAttributes.urlMobile && videoAttributes.urlMobile !== '' && BannerTwoColumns.video.isMobile()) {
54          urlYT = videoAttributes.urlMobile
55        }
56
57        const videoYTID = BannerTwoColumns.video.getYouTubeVideoId(urlYT)
58        const finalYTurlVideo = `${HdR.checkYoutubeURL(urlYT)}${videoAttributes.autoplay ? '&autoplay=1&mute=1' : ''}${videoAttributes.loop ? `&loop=1&playlist=${videoYTID}` : ''}${videoAttributes.muted ? '&mute=1' : ''}${videoAttributes.controls ? '&controls=0' : ''}`
59        video?.setAttribute('src', finalYTurlVideo)
60      }
61    },
62
63    handleImageVideo: () => {
64      const components = document.querySelectorAll('.banner-two-columns-component--video')
65      components.forEach((compo) => {
66        const componentId = compo.getAttribute('data-dialog-id')
67        const component = compo
68        const btnVideo = component.querySelector('.js-playVideo')
69        const prefix = 'banner-two-columns-component__media'
70        const image = component.querySelector(`.${prefix}__poster-picture`)
71        const video = component.querySelector(`.${prefix}__iframe`)
72        const videoDAM = component.querySelector(`.${prefix}__video`)
73        const content = component.querySelector(`.${prefix}--fullScreen__atomic`)
74
75        if (video !== null) {
76          BannerTwoColumns.video.handleYTvideoConfiguration(video)
77        }
78
79        if (videoDAM && videoDAM.hasAttribute('autoplay')) {
80          image?.classList.add(`${prefix}__poster-picture--hide`)
81          btnVideo?.classList.add('btn-play--hide')
82          content?.classList.add(`${prefix}--fullScreen__atomic--hide`)
83
84          if (videoDAM) {
85            videoDAM.muted = true
86
87            setTimeout(() => {
88              videoDAM.play().catch(err => console.log('Autoplay bloqueado por el navegador', err))
89            }, 300)
90          }
91        }
92
93        btnVideo?.addEventListener('click', () => {
94          btnVideo.classList.add('btn-play--hide')
95
96          if (image) {
97            image.classList.add(`${prefix}__poster-picture--hide`)
98          }
99
100          if (content) {
101            content.classList.add(`${prefix}--fullScreen__atomic--hide`)
102          }
103
104          if (video) {
105            BannerTwoColumns.video.players[componentId].playVideo()
106          }
107
108          if (videoDAM) {
109            videoDAM.muted = false
110            videoDAM.play()
111          }
112        })
113
114        /* Set Events to Video DAM */
115        if (videoDAM && !videoDAM.hasAttribute('autoplay')) {
116          videoDAM.addEventListener('pause', () => {
117            console.log('video paused')
118            BannerTwoColumns.video.showPosterAgain(videoDAM, image, btnVideo, content)
119          })
120
121          videoDAM.addEventListener('ended', () => {
122            console.log('video ended')
123            BannerTwoColumns.video.showPosterAgain(videoDAM, image, btnVideo, content)
124          })
125        }
126      })
127    },
128
129    onPlayerStateChange: (event, componentId) => {
130      const prefix = 'banner-two-columns-component__media'
131      const component = document.querySelector(`[data-dialog-id="${componentId}"]`)
132      const image = component.querySelector(`.${prefix}__poster-picture`)
133      const content = component.querySelector(`.${prefix}--fullScreen__atomic`)
134      const btnVideo = component.querySelector(`.${prefix}__btn-play`) || component.querySelector(`.${prefix}--fullScreen__btn-play`)
135
136      /*  If YT Video has loaded, and poster image not exists,
137          add CSS class into iframe to show it */
138      if (event.data === YT.PlayerState.CUED) {
139        if (image === null) {
140          const video = document.getElementById(`player-${componentId}`)
141          video.classList.add(`.${prefix}__iframe--show`)
142        }
143      } else if (event.data === YT.PlayerState.PLAYING) {
144        if (image) {
145          image.classList.add(`${prefix}__poster-picture--hide`)
146        }
147        if (content) {
148          content.classList.add(`${prefix}--fullScreen__atomic--hide`)
149        }
150        btnVideo?.classList.add('btn-play--hide')
151      } else if (
152        event.data === YT.PlayerState.PAUSED ||
153        event.data === YT.PlayerState.ENDED
154      ) {
155        const video = document.getElementById(`player-${componentId}`)
156        const component = document.querySelector(`[data-dialog-id="${componentId}"]`)
157        const image = component.querySelector(`.${prefix}__poster-picture`)
158        const btnVideo = component.querySelector(`.${prefix}__btn-play`) || component.querySelector(`.${prefix}--fullScreen__btn-play`)
159        const content = component.querySelector(`.${prefix}--fullScreen__atomic`)
160        BannerTwoColumns.video.showPosterAgain(video, image, btnVideo, content)
161      }
162    },
163
164    showPosterAgain: (video, image, btnVideo, content) => {
165      const prefix = 'banner-two-columns-component__media'
166      btnVideo?.classList.remove('btn-play--hide')
167      // video.controls = false
168      if (image) {
169        image.classList.remove(`${prefix}__poster-picture--hide`)
170      }
171      if (content) {
172        content.classList.remove(`${prefix}--fullScreen__atomic--hide`)
173      }
174    }
175  }
176}
177
178document.addEventListener('DOMContentLoaded', () => {
179  BannerTwoColumns.init()
180})