@shopgate/pwa-common/collections/media-providers/YouTube.js

Common library for the Shopgate Connect PWA.

function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}import URLSearchParams from'url-search-params';import MediaProvider from"./MediaProvider";/* eslint-disable class-methods-use-this */ /**
 * The YouTube media provider class.
 */var YouTubeMediaProvider=/*#__PURE__*/function(_MediaProvider){function YouTubeMediaProvider(){_classCallCheck(this,YouTubeMediaProvider);return _callSuper(this,YouTubeMediaProvider,arguments);}_inherits(YouTubeMediaProvider,_MediaProvider);return _createClass(YouTubeMediaProvider,[{key:"getMediaContainers",value:/**
   * Retrieves a list of media containers for YouTube.
   * @param {ParentNode} container A DOM container that may contain YouTube iframes.
   * @returns {NodeListOf<Element>}
   */function getMediaContainers(container){return container.querySelectorAll('iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"]');}/**
   * Add a DOM container with embedded videos.
   * @override
   * @param {ParentNode} container A DOM container.
   * @returns {YouTubeMediaProvider}
   */},{key:"add",value:function add(container){var iframes=this.getMediaContainers(container);if(!iframes.length){return this;}this.containers.set(container,iframes);return this;}/**
   * Applies optimizations to embedded media iframes within the given container.
   * Common enhancements include adding responsive wrappers and appropriate
   * sandbox attributes to improve security and layout behavior.
   *
   * @param {Document} document - The DOM document containing iframes to optimize.
   * @returns {YouTubeMediaProvider}
   */},{key:"applyIframeOptimizations",value:function applyIframeOptimizations(document){var _this2=this;var iframes=this.getMediaContainers(document);if(!iframes.length){return this;}// Update the video urls to enable stopping videos via the event API.
iframes.forEach(function(iframe,index){// Block clicks on YouTube icon
iframes[index].setAttribute('sandbox','allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation');_this2.responsify(iframe);var src=iframe.getAttribute('src');var _src$split=src.split('?'),_src$split2=_slicedToArray(_src$split,2),url=_src$split2[0],query=_src$split2[1];var urlParams=new URLSearchParams(query);// Enable the js api to allow sending events to the iframe.
urlParams.set('enablejsapi',1);// Enable controls to avoid the iframe not being resumable because of controls=0 param on ios.
urlParams.set('controls',1);iframes[index].setAttribute('src',"".concat(url,"?").concat(urlParams.toString()));});return this;}/**
   * Stops all playing videos within the DOM containers.
   * @override
   * @returns {YouTubeMediaProvider}
   */},{key:"stop",value:function stop(){// Select all iframes in the document. Actually this should be done via the iframes
// registered in this.containers, but that doesn't seem to work reliably anymore.
// Since we had to find a quick fix for CURB-5033 we now select all iframes in the document
// via the media container selector and then stop the videos.
var iframes=this.getMediaContainers(document);iframes.forEach(function(iframe){var _iframe$contentWindow;if(typeof(iframe===null||iframe===void 0?void 0:(_iframe$contentWindow=iframe.contentWindow)===null||_iframe$contentWindow===void 0?void 0:_iframe$contentWindow.postMessage)==='function'){iframe.contentWindow.postMessage(JSON.stringify({event:'command',func:'stopVideo',args:[]}),'*');}});return this;}}]);}(MediaProvider);export default YouTubeMediaProvider;/* eslint-enable class-methods-use-this */