{"version":3,"sources":["webpack:///./src/Feature/YoutubePlayer/code/Scripts/components/youtube-player.vue?fa06","webpack:///src/Feature/YoutubePlayer/code/Scripts/components/youtube-player.vue","webpack:///./src/Feature/YoutubePlayer/code/Scripts/components/youtube-player.vue?1a91","webpack:///./src/Feature/YoutubePlayer/code/Scripts/components/youtube-player.vue","webpack:///./src/Feature/YoutubePlayer/index.js","webpack:///./src/Feature/YoutubePlayer/code/Scripts/components/youtube-player.scss"],"names":["render","_vm","this","_h","$createElement","_c","_self","class","cssClasses","attrs","on","scriptLoaded","poster","ref","staticClass","style","posterBackground","_e","playPause","_t","_v","_s","ariaLabel","directives","name","rawName","value","playing","loaded","expression","playerId","videoTitle","staticRenderFns","component","components","YoutubePlayer"],"mappings":"8JAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,MAAMN,EAAIO,YAAY,CAACH,EAAG,cAAc,CAACI,MAAM,CAAC,IAAM,sCAAsCC,GAAG,CAAC,OAAST,EAAIU,gBAAmBV,EAAIW,OAAQP,EAAG,MAAM,CAACQ,IAAI,SAASC,YAAY,yBAAyBC,MAAO,qBAAuBd,EAAIe,mBAAoBf,EAAIgB,KAAQhB,EAAIW,OAAQP,EAAG,SAAS,CAACQ,IAAI,UAAUC,YAAY,sBAAsBJ,GAAG,CAAC,MAAQT,EAAIiB,YAAY,CAACjB,EAAIkB,GAAG,eAAed,EAAG,OAAO,CAACS,YAAY,cAAc,CAACb,EAAImB,GAAGnB,EAAIoB,GAAGpB,EAAIqB,eAAe,GAAGrB,EAAIgB,KAAKZ,EAAG,MAAM,CAACkB,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,MAAQzB,EAAI0B,WAAa1B,EAAIW,SAAaX,EAAIW,QAAUX,EAAI2B,OAASC,WAAW,iDAAiDf,YAAY,2BAA2B,CAACT,EAAG,MAAM,CAACS,YAAY,uBAAuBL,MAAM,CAAC,GAAKR,EAAI6B,eAAe,GAAG7B,EAAIkB,GAAG,UAAU,KAAK,CAAC,WAAalB,EAAI8B,cAAc,IAC36BC,EAAkB,G,YCwCtB,GACE,KAAF,iBAEE,WAAF,CACI,mBAGF,MAAF,CACI,UAAJ,yCACI,IAAJ,yCACI,SAAJ,0CACI,KAAJ,yCACI,QAAJ,iCACI,OAAJ,6BACI,KAAJ,0BACI,UAAJ,+CACI,SAAJ,0DAGE,OACE,MAAJ,CACM,OAAN,KACM,SAAN,EACM,WAAN,GACM,gBAAN,KAIE,SAAF,CACI,aACE,MAAN,CACQ,iBACA,KAAR,mBACQ,KAAR,kBAII,WACE,MAAN,4BACQ,KAAR,8BAII,mBACE,OAAN,sCAIE,YAEA,QAAF,CACI,YAKE,GAJA,KAAN,WACM,KAAN,kCACM,KAAN,mCAEA,cACQ,IACE,KAAV,mBACA,SAEU,WAAV,KACY,KAAZ,oBACA,OAKI,eACE,KAAN,oBACQ,KAAR,oBAII,iBACE,KAAN,oCACQ,KAAR,cACQ,QAAR,eACQ,WAAR,CACU,SAAV,EACU,IAAV,EACU,eAAV,EACU,MAAV,QACU,SAAV,EACU,SAAV,EACU,YAAV,EACU,SAAV,eACU,KAAV,UACU,eAAV,EACU,YAAV,GAEQ,OAAR,CACU,QAAV,KACY,MAAZ,0BACY,EAAZ,0BACY,EAAZ,yBACY,EAAZ,+BACY,KAAZ,4CACY,EAAZ,6DAMI,UACE,OAAN,gBACQ,IAAR,KACA,KACQ,EAAR,kBAEA,IAAY,GACZ,yBACA,IAAY,GAAZ,QACA,kCAEY,cAAZ,GACY,EAAZ,KAEU,GAAV,GACA,UChK+N,I,wBCQ3NC,EAAY,eACd,EACAjC,EACAgC,GACA,EACA,KACA,KACA,MAIa,EAAAC,E,QChBA,4BAAU,CACvBC,WAAY,CACVC,cAAA,M,kCCLJ","file":"youtube-player.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{class:_vm.cssClasses},[_c('load-script',{attrs:{\"src\":\"https://www.youtube.com/iframe_api\"},on:{\"loaded\":_vm.scriptLoaded}}),(!!_vm.poster)?_c('div',{ref:\"poster\",staticClass:\"youtube-player__poster\",style:('background-image: ' + _vm.posterBackground)}):_vm._e(),(!!_vm.poster)?_c('button',{ref:\"playBtn\",staticClass:\"youtube-player__btn\",on:{\"click\":_vm.playPause}},[_vm._t(\"play-button\"),_c('span',{staticClass:\"is-sr-only\"},[_vm._v(_vm._s(_vm.ariaLabel))])],2):_vm._e(),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:((_vm.playing && !!_vm.poster) || (!_vm.poster && _vm.loaded)),expression:\"(playing && !!poster) || (!poster && loaded)\"}],staticClass:\"youtube-player__wrapper\"},[_c('div',{staticClass:\"youtube-player__item\",attrs:{\"id\":_vm.playerId}})])],1),_vm._t(\"default\",null,{\"videoTitle\":_vm.videoTitle})],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <div :class=\"cssClasses\">\r\n      <load-script\r\n        src=\"https://www.youtube.com/iframe_api\"\r\n        @loaded=\"scriptLoaded\"\r\n      />\r\n\r\n      <div\r\n        v-if=\"!!poster\"\r\n        class=\"youtube-player__poster\"\r\n        :style=\"'background-image: ' + posterBackground\"\r\n        ref=\"poster\"\r\n      />\r\n\r\n      <button\r\n        v-if=\"!!poster\"\r\n        class=\"youtube-player__btn\"\r\n        @click=\"playPause\"\r\n        ref=\"playBtn\"\r\n      >\r\n        <slot name=\"play-button\" />\r\n        <span class=\"is-sr-only\">{{ ariaLabel }}</span>\r\n      </button>\r\n\r\n      <div\r\n        class=\"youtube-player__wrapper\"\r\n        v-show=\"(playing && !!poster) || (!poster && loaded)\"\r\n      >\r\n        <div class=\"youtube-player__item\" :id=\"playerId\" />\r\n      </div>\r\n    </div>\r\n\r\n    <slot :videoTitle=\"videoTitle\" />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  /* eslint-disable no-undef*/\r\n  import LoadScript from '@Foundation/loadscript/loadscript';\r\n\r\n  export default {\r\n    name: 'youtube-player',\r\n\r\n    components: {\r\n      LoadScript,\r\n    },\r\n\r\n    props: {\r\n      youtubeId: { type: String, required: false, default: undefined },\r\n      src: { type: String, required: false, default: undefined },\r\n      autoplay: { type: Boolean, required: false, default: undefined },\r\n      list: { type: String, required: false, default: undefined },\r\n      preload: { type: String, default: 'metadata' },\r\n      poster: { type: String, default: undefined },\r\n      loop: { type: Boolean, default: false },\r\n      ariaLabel: { type: String, default: 'play pause', required: false },\r\n      baseUrls: { type: String, default: 'https://www.youtube-nocookie.com' },\r\n    },\r\n\r\n    data() {\r\n      return {\r\n        player: null,\r\n        playing: false,\r\n        videoTitle: '',\r\n        transcriptLabel: '',\r\n      };\r\n    },\r\n\r\n    computed: {\r\n      cssClasses() {\r\n        return [\r\n          'youtube-player',\r\n          this.loaded ? 'loaded' : '',\r\n          this.playing && 'play',\r\n        ];\r\n      },\r\n\r\n      playerId() {\r\n        return `player-${this.youtubeId}-${\r\n          Math.floor(Math.random() * 1000) + 1\r\n        }`;\r\n      },\r\n\r\n      posterBackground() {\r\n        return this.poster && 'url(' + this.poster + ')';\r\n      },\r\n    },\r\n\r\n    mounted() {},\r\n\r\n    methods: {\r\n      playPause() {\r\n        this.playing = true;\r\n        this.$refs.poster.style.display = 'none';\r\n        this.$refs.playBtn.style.display = 'none';\r\n\r\n        if (this.autoplay) {\r\n          try {\r\n            this.player.playVideo();\r\n          } catch (e) {\r\n            /* istanbul ignore next */\r\n            setTimeout(() => {\r\n              this.player.playVideo();\r\n            }, 500);\r\n          }\r\n        }\r\n      },\r\n\r\n      scriptLoaded() {\r\n        this.setupYT().then(() => {\r\n          this.onPlayerLoaded();\r\n        });\r\n      },\r\n\r\n      onPlayerLoaded() {\r\n        this.player = new YT.Player(this.playerId, {\r\n          host: this.baseUrls,\r\n          videoId: this.youtubeId,\r\n          playerVars: {\r\n            showinfo: 1,\r\n            rel: 0,\r\n            cc_load_policy: 1,\r\n            color: 'white',\r\n            autoplay: 0,\r\n            controls: 2,\r\n            enablejsapi: 1,\r\n            listType: 'user_uploads',\r\n            list: this.list,\r\n            modestbranding: 1,\r\n            playsinline: 1,\r\n          },\r\n          events: {\r\n            onReady: () => {\r\n              const iframe = this.player.getIframe();\r\n              iframe.removeAttribute('height');\r\n              iframe.removeAttribute('width');\r\n              iframe.removeAttribute('frameborder');\r\n              this.videoTitle = this.player.getVideoData().title;\r\n              iframe.setAttribute('title', `YouTube video: ${this.videoTitle}`);\r\n            },\r\n          },\r\n        });\r\n      },\r\n\r\n      setupYT() {\r\n        return new Promise((resolve) => {\r\n          let interval = false;\r\n          let maxTries = 20;\r\n          interval = setInterval(() => {\r\n            if (\r\n              maxTries === 0 ||\r\n              (typeof YT !== 'undefined' &&\r\n              YT.loaded === 1 &&\r\n              typeof YT.Player !== 'undefined')\r\n            ) {\r\n              clearInterval(interval);\r\n              resolve(YT);\r\n            }\r\n            maxTries -= 1;\r\n          }, 100);\r\n        });\r\n      },\r\n    },\r\n  };\r\n</script>\r\n<style lang=\"scss\" src=\"./youtube-player.scss\"></style>\r\n","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./youtube-player.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./youtube-player.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./youtube-player.vue?vue&type=template&id=eed5f5f4&\"\nimport script from \"./youtube-player.vue?vue&type=script&lang=js&\"\nexport * from \"./youtube-player.vue?vue&type=script&lang=js&\"\nimport style0 from \"./youtube-player.scss?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import { VueModule } from '@Foundation/utilities';\r\nimport YoutubePlayer from './code/Scripts/components/youtube-player.vue';\r\n\r\nexport default VueModule({\r\n  components: {\r\n    YoutubePlayer\r\n  }\r\n});\r\n","export * from \"-!../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./youtube-player.scss?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}