{"version":3,"sources":["webpack:///resources/js/src/app/components/item/YoutubeModal.vue","webpack:///./resources/js/src/app/components/item/YoutubeModal.vue?23f2","webpack:///./resources/js/src/app/components/item/YoutubeModal.vue","webpack:///./resources/js/src/app/components/item/YoutubeModal.vue?7634","webpack:///./resources/js/src/app/components/item/YoutubeModal.vue?7b3f"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;AAEA;AACA,WACA,mFADA,CADA;AAIA;AACA;AACA;AADA;AADA,GAJA;AASA,MATA,kBASA;AACA;AACA;AADA;AAGA,GAbA;AAcA;AACA,YADA,sBACA;AACA;AACA;AAHA,GAdA;AAmBA;AACA,aADA,uBACA;AACA;AACA;AACA,KAJA;AAKA,aALA,uBAKA;AACA;AACA;AACA,KARA;AASA,aATA,uBASA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AAjBA;AAnBA,G;;;;;;;;;;;;ACrCA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA,oBAAoB,oCAAoC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,aAAa,uBAAuB;AACpC,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,OAAO;AACP;AACA,mBAAmB,8BAA8B;AACjD,qBAAqB,+BAA+B;AACpD,uBAAuB,8BAA8B;AACrD,wBAAwB,6BAA6B;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB,uBAAuB,uBAAuB;AAC9C,iBAAiB;AACjB;AACA,8BAA8B,SAAS,wBAAwB,EAAE;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4BAA4B;AACnD;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uCAAuC,UAAU,iBAAiB,iBAAiB,WAAW;AAC9F;AACA,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AChGA;AAAA;AAAA;AAAA;AAA2F;AAC3B;AACL;;;AAG3D;AACsG;AACtG,gBAAgB,2GAAU;AAC1B,EAAE,kFAAM;AACR,EAAE,uFAAM;AACR,EAAE,gGAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACe,gF;;;;;;;;;;;;ACtCf;AAAA;AAAA,wCAAoM,CAAgB,gPAAG,EAAC,C;;;;;;;;;;;;ACAxN;AAAA;AAAA;AAAA;AAAA;AAAA","file":"chunks/ceres-client-44.js","sourcesContent":["<template>\n    <div class=\"product-detail__yt\">\n\n        <a class=\"product-detail__yt-modal-btn\" data-toggle=\"modal\" :data-target=\"'#youtubeModal'+_cid\" @click=\"playVideo\">\n            <lazy-img picture-class=\"product-detail__yt-thumbnail\"\n                      :image-url=\"'https://img.youtube.com/vi/'+videoId+'/0.jpg'\"\n                      alt=\"youtube Thumbnail\">\n            </lazy-img>\n        </a>\n\n        <div class=\"modal fade youtube-modal\" :id=\"'youtubeModal'+_cid\" tabindex=\"-1\" aria-labelledby=\"youtubeModalLabel\" aria-hidden=\"true\">\n            <div class=\"modal-dialog\">\n                <div class=\"modal-content\">\n                    <div class=\"modal-header\">\n                        <h5 class=\"modal-title\">{{ $translate('OD3dprimaV2::Template.productVideos') }}</h5>\n                        <button id=\"closeButtonYoutube\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" @click=\"stopVideo\">\n                            <span aria-hidden=\"true\">&times;</span>\n                        </button>\n                    </div>\n                    <div class=\"modal-body\">\n                        <div class=\"embed-responsive embed-responsive-16by9\" ref=\"iframe\">\n                            <iframe class=\"embed-responsive-item vue--lazy-img\"\n                                    :data-src=\"videoUrl\"\n                                    frameborder=\"0\"\n                                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                                    allowfullscreen>\n                            </iframe>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n<script>\nimport {ComponentIdMixin} from \"ceres/app/mixins/componentId.mixin\";\n\nexport default {\n    mixins: [\n        ComponentIdMixin\n    ],\n    props: {\n        videoId: {\n            required: true\n        }\n    },\n    data() {\n        return {\n            autoPlay: false\n        }\n    },\n    computed: {\n        videoUrl() {\n            return 'https://www.youtube-nocookie.com/embed/' + this.videoId + '?controls=1' + (this.autoPlay ? '&autoplay=1' : '')\n        }\n    },\n    methods: {\n        playVideo() {\n            this.autoPlay = true;\n            this.updateSrc();\n        },\n        stopVideo() {\n            this.autoPlay = false;\n            this.updateSrc();\n        },\n        updateSrc() {\n\n            //no data binding for src available because of lazy load (data-src to src)\n            let iframe = this.$refs.iframe.querySelector('iframe');\n\n            if(iframe && iframe.getAttribute('src')) {\n                iframe.setAttribute('src', this.videoUrl);\n            }\n        }\n    }\n}\n</script>\n","var render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"product-detail__yt\" }, [\n    _c(\n      \"a\",\n      {\n        staticClass: \"product-detail__yt-modal-btn\",\n        attrs: {\n          \"data-toggle\": \"modal\",\n          \"data-target\": \"#youtubeModal\" + _vm._cid,\n        },\n        on: { click: _vm.playVideo },\n      },\n      [\n        _c(\"lazy-img\", {\n          attrs: {\n            \"picture-class\": \"product-detail__yt-thumbnail\",\n            \"image-url\": \"https://img.youtube.com/vi/\" + _vm.videoId + \"/0.jpg\",\n            alt: \"youtube Thumbnail\",\n          },\n        }),\n      ],\n      1\n    ),\n    _vm._v(\" \"),\n    _c(\n      \"div\",\n      {\n        staticClass: \"modal fade youtube-modal\",\n        attrs: {\n          id: \"youtubeModal\" + _vm._cid,\n          tabindex: \"-1\",\n          \"aria-labelledby\": \"youtubeModalLabel\",\n          \"aria-hidden\": \"true\",\n        },\n      },\n      [\n        _c(\"div\", { staticClass: \"modal-dialog\" }, [\n          _c(\"div\", { staticClass: \"modal-content\" }, [\n            _c(\"div\", { staticClass: \"modal-header\" }, [\n              _c(\"h5\", { staticClass: \"modal-title\" }, [\n                _vm._v(\n                  _vm._s(_vm.$translate(\"OD3dprimaV2::Template.productVideos\"))\n                ),\n              ]),\n              _vm._v(\" \"),\n              _c(\n                \"button\",\n                {\n                  staticClass: \"close\",\n                  attrs: {\n                    id: \"closeButtonYoutube\",\n                    type: \"button\",\n                    \"data-dismiss\": \"modal\",\n                    \"aria-label\": \"Close\",\n                  },\n                  on: { click: _vm.stopVideo },\n                },\n                [\n                  _c(\"span\", { attrs: { \"aria-hidden\": \"true\" } }, [\n                    _vm._v(\"×\"),\n                  ]),\n                ]\n              ),\n            ]),\n            _vm._v(\" \"),\n            _c(\"div\", { staticClass: \"modal-body\" }, [\n              _c(\n                \"div\",\n                {\n                  ref: \"iframe\",\n                  staticClass: \"embed-responsive embed-responsive-16by9\",\n                },\n                [\n                  _c(\"iframe\", {\n                    staticClass: \"embed-responsive-item vue--lazy-img\",\n                    attrs: {\n                      \"data-src\": _vm.videoUrl,\n                      frameborder: \"0\",\n                      allow:\n                        \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n                      allowfullscreen: \"\",\n                    },\n                  }),\n                ]\n              ),\n            ]),\n          ]),\n        ]),\n      ]\n    ),\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./YoutubeModal.vue?vue&type=template&id=67c24ab8&\"\nimport script from \"./YoutubeModal.vue?vue&type=script&lang=js&\"\nexport * from \"./YoutubeModal.vue?vue&type=script&lang=js&\"\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\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/Users/fhartwig/Sites/DIA-3dprima_v2/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('67c24ab8')) {\n      api.createRecord('67c24ab8', component.options)\n    } else {\n      api.reload('67c24ab8', component.options)\n    }\n    module.hot.accept(\"./YoutubeModal.vue?vue&type=template&id=67c24ab8&\", function () {\n      api.rerender('67c24ab8', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"resources/js/src/app/components/item/YoutubeModal.vue\"\nexport default component.exports","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./YoutubeModal.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./YoutubeModal.vue?vue&type=script&lang=js&\"","export * from \"-!../../../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./YoutubeModal.vue?vue&type=template&id=67c24ab8&\""],"sourceRoot":""}