{"version":3,"sources":["src/scripts/components/yt-player.js"],"names":["player","haveIDs","$","jQuery","onPlayerReady","event","target","cuePlaylist","listType","list","playlistId","suggestedQuality","autoplay","index","controls","setLoop","getCurrentIdx","activeIdx","document","querySelector","idx","getAttribute","setActivePLAYING","containers","querySelectorAll","playerWrapper","activeContainer","classList","add","window","innerWidth","scrollIntoView","behavior","block","inline","setActiveENDED","currentPlaylist","JSON","parse","localStorage","getItem","nextIndex","Number","length","forEach","container","remove","cueVideoById","playVideo","onPlayerStateChange","data","YT","PlayerState","CUED","addClickEvents","PLAYING","ENDED","addEventListener","videoSlick","not","slick","dots","nextArrow","prevArrow","slidesToShow","slidesToScroll","focusOnSelect","responsive","breakpoint","settings","youtube","key","get","part","maxResults","imageCont","getElementById","html","videoArr","getSrc","thumbnails","maxres","url","high","medium","default","items","snippet","imgSrc","push","resourceId","videoId","title","appendChild","createRange","createContextualFragment","setItem","stringify","_","debounce","initYoutubeElement","loaded","Player","height","width","playerVars","showinfo","rel","showsearch","iv_load_policy","events","onReady","onStateChange","ytPlayer","init","elements","youtubeSlick","observer","IntersectionObserver","entries","entry","isIntersecting","contains","slickElement","observe","element"],"mappings":"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","file":"yt-player.js","sourcesContent":["let player;\nlet haveIDs = false;\nvar $ = jQuery;\n\nfunction onPlayerReady(event) {\n  event.target.cuePlaylist({\n    listType: 'playlist',\n    list: playlistId,\n    suggestedQuality: 'small',\n    autoplay: 1,\n    index: 0,\n    controls: 0,\n  });\n  event.target.setLoop();\n}\n\nfunction getCurrentIdx() {\n  const activeIdx = document.querySelector('.active.thumb-container:not(.slick-cloned)');\n\n  let idx;\n  if (!activeIdx) {\n    idx = 0;\n  } else {\n    idx = activeIdx.getAttribute('data-index');\n  }\n  return idx;\n}\n\nfunction setActivePLAYING() {\n  const idx = getCurrentIdx();\n  const containers = document.querySelectorAll('.thumb-container:not(.slick-cloned)');\n  const playerWrapper = document.querySelector('.player--wrapper');\n  const activeContainer = containers[idx];\n  if (activeContainer) {\n    activeContainer.classList.add('active');\n    if (window.innerWidth >= 1280) {\n      activeContainer.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start',\n        inline: 'nearest',\n      });\n    } else {\n      playerWrapper.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start',\n        inline: 'nearest',\n      });\n    }\n  }\n}\n\nfunction setActiveENDED(player) {\n  const idx = getCurrentIdx();\n  const currentPlaylist = JSON.parse(localStorage.getItem('playListArr'));\n  const nextIndex = Number(idx) !== currentPlaylist.length - 1 ? Number(idx) + 1 : 0;\n  const containers = document.querySelectorAll('.thumb-container:not(.slick-cloned)');\n  const playerWrapper = document.querySelector('.player--wrapper');\n\n  containers.forEach(function (container) {\n    container.classList.remove('active');\n  });\n\n  containers[nextIndex].classList.add('active');\n\n  if (containers[nextIndex]) {\n    if (window.innerWidth >= 1280) {\n      containers[nextIndex].scrollIntoView({\n        behavior: 'smooth',\n        block: 'start',\n        inline: 'nearest',\n      });\n    } else {\n      playerWrapper.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start',\n        inline: 'nearest',\n      });\n    }\n  }\n\n  player.cueVideoById(currentPlaylist[nextIndex]);\n  player.playVideo();\n}\n\nfunction onPlayerStateChange(event) {\n  if (event.data == YT.PlayerState.CUED) {\n    if (!haveIDs) {\n      addClickEvents(player);\n      // Initialize the first video as active.\n      const containers = document.querySelectorAll('.thumb-container:not(.slick-cloned)');\n      const activeContainer = containers[0];\n      if (activeContainer) {\n        activeContainer.classList.add('active');\n      }\n    }\n  }\n  if (event.data == YT.PlayerState.PLAYING) {\n    setActivePLAYING();\n  }\n  if (event.data == YT.PlayerState.ENDED) {\n    setActiveENDED(player);\n  }\n}\n\nconst addClickEvents = player => {\n  haveIDs = true;\n  const containers = document.querySelectorAll('.thumb-container:not(.slick-cloned)');\n  containers.forEach(container => {\n    container.addEventListener('click', event => {\n      // Remove all active class on click\n      containers.forEach(container => {\n        container.classList.remove('active');\n      });\n\n      const playerWrapper = document.querySelector('.player--wrapper');\n\n      player.cueVideoById(event.target.getAttribute('data-id'));\n      player.playVideo();\n\n      event.target.classList.add('active');\n\n      if (container) {\n        if (window.innerWidth >= 1280) {\n          event.target.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n          });\n        } else {\n          playerWrapper.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n          });\n        }\n      }\n    });\n  });\n};\n\nconst videoSlick = () => {\n  $('.image--list-loop')\n    .not('.slick-initialized')\n    .slick({\n      dots: false,\n      nextArrow: '.video--flex-middle .buttons--container .next-container',\n      prevArrow: '.video--flex-middle .buttons--container .prev-container',\n      slidesToShow: 4,\n      slidesToScroll: 4,\n      focusOnSelect: true,\n      responsive: [\n        {\n          breakpoint: 768,\n          settings: {\n            slidesToShow: 2,\n            slidesToScroll: 2,\n          },\n        },\n      ],\n    });\n};\n\nconst youtube = () => {\n  const key = 'AIzaSyA_vayNPz64k0jt60_vjh1a02uZLJSsHug';\n  playlistId = playlistId ? playlistId : 'PLBs6_t5NjudQ4mYQGNbUVrH8Vef_QmkPg';\n  $.get(\n    'https://www.googleapis.com/youtube/v3/playlistItems',\n    {\n      part: 'snippet',\n      playlistId: playlistId,\n      maxResults: 50,\n      key: key,\n    },\n    data => {\n      const imageCont = document.getElementById('images');\n      let html;\n      let videoArr = [];\n\n      const getSrc = thumbnails => {\n        if (thumbnails.maxres) {\n          return thumbnails.maxres.url;\n        } else if (thumbnails.high) {\n          return thumbnails.high.url;\n        } else if (thumbnails.medium) {\n          return thumbnails.medium.url;\n        } else {\n          if (thumbnails.default) {\n            return thumbnails.default.url;\n          }\n        }\n      };\n\n      data.items.forEach(({snippet}, index) => {\n        const imgSrc = getSrc(snippet.thumbnails);\n\n        if (!imgSrc) return;\n\n        videoArr.push(snippet.resourceId.videoId);\n\n        html = `<div data-id=\"${snippet.resourceId.videoId}\" data-index=\"${index}\" class=\"thumb-container\">\n              <div class=\"image-item\">\n                <img src=\"${imgSrc}\" class=\"image-play-button\">\n              </div>\n              <div class=\"title-item\">\n                <span class=\"title-span\">${snippet.title}</span>\n              </div>\n            </div>`;\n\n        imageCont.appendChild(document.createRange().createContextualFragment(html));\n      });\n\n      localStorage.setItem('playListArr', JSON.stringify(videoArr));\n\n      window.addEventListener(\n        'resize',\n        _.debounce(() => {\n          if (window.innerWidth >= 1280) {\n            $('.image--list-loop').slick('unslick');\n          } else {\n            videoSlick();\n          }\n        }, 250)\n      );\n\n      if (window.innerWidth <= 1280) {\n        videoSlick();\n      }\n    }\n  );\n};\n\nfunction initYoutubeElement(target) {\n  if (YT.loaded) {\n    player = new YT.Player(target, {\n      height: '390',\n      width: '640',\n      playerVars: {\n        controls: 1,\n        showinfo: 0,\n        rel: 0,\n        showsearch: 0,\n        iv_load_policy: 3,\n      },\n      events: {\n        onReady: onPlayerReady,\n        onStateChange: onPlayerStateChange,\n      },\n    });\n  }\n}\n\nconst ytPlayer = {\n  init: () => {\n    const elements = document.querySelectorAll('#player');\n    const youtubeSlick = document.querySelectorAll('.grid--small-container .video--flex-bottom');\n    const observer = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        if (entry.isIntersecting && entry.target.getAttribute('id') === 'player') {\n          initYoutubeElement(entry.target);\n        }\n\n        if (entry.isIntersecting && entry.target.classList.contains('video--flex-bottom') && !entry.target.classList.contains('init')) {\n          entry.target.classList.add('init')\n          youtube();\n        }\n      });\n    });\n\n    if (youtubeSlick && youtubeSlick.length) {\n      youtubeSlick.forEach((slickElement) => {\n        observer.observe(slickElement);\n      });\n    }\n\n    if (elements && elements.length) {\n      elements.forEach((element) => {\n        observer.observe(element);\n      });\n    }\n  }\n};\n\n// Load JS\nconst init = ytPlayer.init;\n\nexport {init};\n"]}