{"version":3,"sources":["webpack:///./src/modules/ebooks/_components/ebook-viewer/EbookMedia.vue?c8c4","webpack:///src/modules/ebooks/_components/ebook-viewer/EbookMedia.vue","webpack:///./src/modules/ebooks/_components/ebook-viewer/EbookMedia.vue?7e8a","webpack:///./src/modules/ebooks/_components/ebook-viewer/EbookMedia.vue","webpack:///./src/modules/ebooks/_components/ebook-viewer/EbookMedia.vue?4ca8"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","hideHeadFoot","attrs","on","backReadBook","_m","_v","_s","mediaMain","titleLink","title","countView","countDownload","mediaBookViewing","linkPages","length","volumeVal","toString","handleCheckTypeMediaCurr","handleNextMedia","_e","toggleListPage","handleToggleListPage","_l","item","index","key","indexMediaMain","$event","viewMediaInDocSlider","posterLink","urlImgCms","linkUrl","appUrl","img404","relateMedia","toggleListPageRelate","handleToggleListPageRelate","toggleInfoCourse","handleToggleInfoCourse","infoBook","bookName","bookGroupName","bookIndexParentName","bookIndexName","pageRead","directives","name","rawName","value","expression","ref","isMediaVideoAudio","handlePrevMedia","handleSetVolume","domProps","target","handleShareMedia","handleDownloadFile","staticRenderFns","mixins","components","ModalShare","PreviewMedia","data","playMedia","cdnUrl","imgUrlCms","computed","mapState","authInfo","watch","created","document","mounted","beforeDestroy","methods","mapActions","setMediaMain","updatecountview","getRelateMedia","pageLinksId","id","pageIndex","pageSize","getBookRelate","getInfoBook","getMediaDetailInLibs","query","val","setTimeout","showControls","hideControls","link","apiUpdateCountdownload","component"],"mappings":"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","file":"js/chunk-5ed9dd45.c5239a44.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"ebook-media bg-color-light\"},[_c('div',{staticClass:\"ebook-media__head full-width display-flex-center justify-content-between effect-transition-fast\",class:{'keep-mouse': _vm.hideHeadFoot}},[_c('a',{staticClass:\"ebook-media__back color-light display-flex-center border-rd-20\",attrs:{\"href\":\"javascript:;\"},on:{\"click\":_vm.backReadBook}},[_vm._m(0),_c('span',{staticClass:\"only-pc\"},[_vm._v(\"Trở lại\")])]),_c('h2',{staticClass:\"ebook-media__title font-size-17 font-sanpro-semibold color-light margin-0\"},[_vm._v(_vm._s(_vm.mediaMain && _vm.mediaMain.titleLink ? _vm.mediaMain.titleLink : (_vm.mediaMain && _vm.mediaMain.title?_vm.mediaMain.title:'' )))]),_c('div',{staticClass:\"ebook-media__count display-flex-center\"},[_c('p',{staticClass:\"margin-0 display-flex-center color-light font-sanpro-light\"},[_c('i',{staticClass:\"icon-eye color-light font-size-18\"}),_vm._v(\"\\n        \"+_vm._s(_vm.mediaMain && _vm.mediaMain.countView ? _vm.mediaMain.countView : 0)+\"\\n      \")]),_c('p',{staticClass:\"margin-0 display-flex-center color-light font-sanpro-light\"},[_c('i',{staticClass:\"icon-download color-light font-size-18\"}),_vm._v(\"\\n        \"+_vm._s(_vm.mediaMain && _vm.mediaMain.countDownload ? _vm.mediaMain.countDownload : 0)+\"\\n      \")])])]),_c('div',{staticClass:\"ebook-media__body full-box custom-toolbar\"},[(_vm.mediaBookViewing && _vm.mediaBookViewing.linkPages && _vm.mediaBookViewing.linkPages.length > 0 && _vm.mediaMain)?_c('PreviewMedia',{attrs:{\"dataSource\":_vm.mediaMain,\"volumeVal\":_vm.volumeVal.toString()},on:{\"checkTypeMedia\":_vm.handleCheckTypeMediaCurr,\"ended\":_vm.handleNextMedia}}):_vm._e(),(_vm.mediaBookViewing && _vm.mediaBookViewing.linkPages && _vm.mediaBookViewing.linkPages.length > 1)?_c('div',{staticClass:\"ebook-media__list effect-transition-fast\",class:{'active': _vm.toggleListPage, 'keep-mouse': _vm.hideHeadFoot}},[_c('div',{staticClass:\"ebook-media__list__head display-flex-center justify-content-center cursor-pointer\",on:{\"click\":_vm.handleToggleListPage}},[_c('i',{staticClass:\"icon-arrow-double-down color-light font-size-20\"})]),_c('div',{staticClass:\"ebook-media__list__body custom-scroll custom-scroll--dark\"},_vm._l((_vm.mediaBookViewing.linkPages),function(item,index){return _c('div',{key:index,staticClass:\"item display-flex\",class:{'active': index === _vm.indexMediaMain},on:{\"click\":function($event){return _vm.viewMediaInDocSlider(index, 'MediaMain')}}},[_c('figure',{staticClass:\"item__img margin-0 position-rel border-rd-4\"},[_c('img',{attrs:{\"src\":item.posterLink ? (_vm.urlImgCms + \"/\" + (item.posterLink)) : item.linkUrl ? (_vm.appUrl + \"/\" + (item.linkUrl)) : _vm.img404,\"alt\":\"Học liệu\"}})]),_c('div',{staticClass:\"item__body\"},[_c('h4',{staticClass:\"item__title font-size-16 font-sanpro color-light\"},[_vm._v(_vm._s(item.titleLink))])])])}),0)]):_vm._e(),(_vm.relateMedia && _vm.relateMedia.length>0)?_c('div',{staticClass:\"ebook-media__list effect-transition-fast\",class:{'active': _vm.toggleListPageRelate, 'keep-mouse': _vm.hideHeadFoot}},[_c('div',{staticClass:\"ebook-media__list__head display-flex-center justify-content-center cursor-pointer\",on:{\"click\":_vm.handleToggleListPageRelate}},[_c('i',{staticClass:\"icon-arrow-double-down color-light font-size-20\"})]),_c('div',{staticClass:\"ebook-media__list__body custom-scroll custom-scroll--dark\"},_vm._l((_vm.relateMedia),function(item,index){return _c('div',{key:index,staticClass:\"item display-flex\",class:{'active': index === _vm.indexMediaMain},on:{\"click\":function($event){return _vm.viewMediaInDocSlider(index, 'Relate')}}},[_c('figure',{staticClass:\"item__img margin-0 position-rel border-rd-4\"},[_c('img',{attrs:{\"src\":item.posterLink ? (_vm.urlImgCms + \"/\" + (item.posterLink)) : item.linkUrl ? (_vm.appUrl + \"/\" + (item.linkUrl)) : _vm.img404,\"alt\":\"Học liệu\"}})]),_c('div',{staticClass:\"item__body\"},[_c('h4',{staticClass:\"item__title font-size-16 font-sanpro color-light\"},[_vm._v(_vm._s(item.title))])])])}),0)]):_vm._e(),(_vm.infoBook)?_c('div',{staticClass:\"ebook-media__list effect-transition-fast\",class:{'active': _vm.toggleInfoCourse, 'keep-mouse': _vm.hideHeadFoot}},[_c('div',{staticClass:\"ebook-media__list__head display-flex-center justify-content-center cursor-pointer\",on:{\"click\":_vm.handleToggleInfoCourse}},[_c('i',{staticClass:\"icon-arrow-double-down color-light font-size-20\"})]),_c('div',{staticClass:\"ebook-media__list__body custom-scroll custom-scroll--dark\"},[_c('div',{staticClass:\"item\"},[_c('div',{},[_c('h4',{staticClass:\"item__title font-size-16 font-sanpro color-light\"},[_vm._v(\"Sách: \"+_vm._s(_vm.infoBook.bookName))])]),_c('div',{},[_c('h4',{staticClass:\"item__title font-size-16 font-sanpro color-light\"},[_vm._v(\"Bộ sách: \"+_vm._s(_vm.infoBook.bookGroupName))])]),_c('div',{},[_c('h4',{staticClass:\"item__title font-size-16 font-sanpro color-light\"},[_vm._v(\"Chương/Tuần: \"+_vm._s(_vm.infoBook.bookIndexParentName))])]),_c('div',{},[_c('h4',{staticClass:\"item__title font-size-16 font-sanpro color-light\"},[_vm._v(\"Bài: \"+_vm._s(_vm.infoBook.bookIndexName))])]),_c('div',{},[_c('h4',{staticClass:\"item__title font-size-16 font-sanpro color-light\"},[_vm._v(\"Trang: \"+_vm._s(this.pageRead)+\"-\"+_vm._s(this.pageRead+1))])])])])]):_vm._e()],1),_c('div',{staticClass:\"ebook-media__footer full-width effect-transition-fast\",class:{'keep-mouse': _vm.hideHeadFoot}},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.isMediaVideoAudio),expression:\"isMediaVideoAudio\"}],staticClass:\"video-progress ebook-media__footer__progress full-width\"},[_c('progress',{ref:\"progressbar\",staticClass:\"full-width\",attrs:{\"id\":\"progress-bar\",\"value\":\"0\",\"min\":\"0\"}}),_c('input',{ref:\"seek\",staticClass:\"seek full-width cursor-pointer\",attrs:{\"id\":\"seek\",\"value\":\"0\",\"min\":\"0\",\"type\":\"range\",\"step\":\"1\"}}),_c('div',{ref:\"seek_tooltip\",staticClass:\"seek-tooltip display-none font-size-12 color-light font-sanpro-light\",attrs:{\"id\":\"seek-tooltip\"}},[_vm._v(\"00:00\")])]),_c('div',{staticClass:\"ebook-media__footer__main full-width display-flex-center justify-content-between\",class:{'has-media': _vm.isMediaVideoAudio}},[_c('div',{staticClass:\"list-tab-suggest-ebook\"},[(_vm.mediaBookViewing && _vm.mediaBookViewing.linkPages && _vm.mediaBookViewing.linkPages.length > 1)?_c('a',{staticClass:\"ebook-media__list__toggle color-light display-flex-center border-rd-20\",class:{'btn-gray-dark': _vm.toggleListPage},attrs:{\"href\":\"javascript:;\"},on:{\"click\":_vm.handleToggleListPage}},[_vm._m(1),_vm._v(\"\\n        Nhóm học liệu (\"+_vm._s(_vm.mediaBookViewing && _vm.mediaBookViewing.linkPages ? _vm.mediaBookViewing.linkPages.length : '0')+\")\\n      \")]):_vm._e(),_c('a',{staticClass:\"ebook-media__list__toggle color-light display-flex-center border-rd-20\",class:{'btn-gray-dark': _vm.toggleListPageRelate},attrs:{\"href\":\"javascript:;\"},on:{\"click\":_vm.handleToggleListPageRelate}},[_c('img',{attrs:{\"src\":require(\"@/assets/images/playsuggest.png\")}}),_vm._v(\"\\n        Học liệu liên quan\\n      \")]),_c('a',{staticClass:\"ebook-media__list__toggle color-light display-flex-center border-rd-20\",class:{'btn-gray-dark': _vm.toggleInfoCourse},attrs:{\"href\":\"javascript:;\"},on:{\"click\":_vm.handleToggleInfoCourse}},[_c('img',{attrs:{\"src\":require(\"@/assets/images/CompositeLayer.png\")}}),_vm._v(\"\\n        Thông tin học liệu\\n      \")])]),_c('div',{staticClass:\"ebook-media__controls display-flex-center\"},[(_vm.mediaBookViewing && _vm.mediaBookViewing.linkPages && _vm.mediaBookViewing.linkPages.length > 1)?_c('div',{staticClass:\"ebook-media__prev cursor-pointer size-btn-30 border-rd-20\",class:{'disabled': _vm.indexMediaMain === 0},on:{\"click\":_vm.handlePrevMedia}},[_c('i',{staticClass:\"icon-first-page color-light font-size-20\"})]):_vm._e(),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.isMediaVideoAudio),expression:\"isMediaVideoAudio\"}],staticClass:\"ebook-media__play cursor-pointer\"},[_c('button',{staticClass:\"border-0 bg-transparent font-size-18\",attrs:{\"data-title\":\"Play (k)\",\"id\":\"play\"}},[_c('svg',{staticClass:\"playback-icons\"},[_c('use',{attrs:{\"href\":\"#play-icon\"}}),_c('use',{staticClass:\"hidden\",attrs:{\"href\":\"#pause\"}})])])]),(_vm.mediaBookViewing && _vm.mediaBookViewing.linkPages && _vm.mediaBookViewing.linkPages.length > 1)?_c('div',{staticClass:\"ebook-media__next cursor-pointer size-btn-30 border-rd-20\",class:{'disabled': !_vm.mediaBookViewing || !_vm.mediaBookViewing.linkPages || _vm.mediaBookViewing.linkPages.length < 2 || (_vm.mediaBookViewing && _vm.mediaBookViewing.linkPages.length && _vm.indexMediaMain === _vm.mediaBookViewing.linkPages.length -1)},on:{\"click\":_vm.handleNextMedia}},[_c('i',{staticClass:\"icon-last-page color-light font-size-20\"})]):_vm._e()]),_c('div',{staticClass:\"ebook-media__actions display-flex-center\"},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.isMediaVideoAudio),expression:\"isMediaVideoAudio\"}],staticClass:\"volume-controls display-flex-center cursor-pointer\"},[_c('button',{ref:\"volume_btn\",staticClass:\"volume-button border-0 size-btn-30 border-rd-20\",attrs:{\"id\":\"volume-button\"}},[(_vm.volumeVal < 0.2)?_c('i',{staticClass:\"icon-mute font-size-20 color-light\",on:{\"click\":function($event){return _vm.handleSetVolume(1)}}}):_c('i',{staticClass:\"icon-unmute font-size-20 color-light\",on:{\"click\":function($event){return _vm.handleSetVolume(0)}}})]),_c('div',{staticClass:\"volume-controls__progress position-rel display-flex-center\"},[_c('progress',{staticClass:\"full-width\",attrs:{\"id\":\"progress-bar__volume\",\"min\":\"0\",\"max\":\"1\"},domProps:{\"value\":_vm.volumeVal}}),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.volumeVal),expression:\"volumeVal\"}],staticClass:\"volume slider\",attrs:{\"id\":\"volume\",\"data-mute\":\"0.5\",\"type\":\"range\",\"max\":\"1\",\"min\":\"0\",\"step\":\"0.01\"},domProps:{\"value\":(_vm.volumeVal)},on:{\"__r\":function($event){_vm.volumeVal=$event.target.value}}})])]),_c('div',{staticClass:\"ebook-media__share cursor-pointer border-rd-50 size-btn-30\",on:{\"click\":_vm.handleShareMedia}},[_c('i',{staticClass:\"icon-share-white color-light font-size-17\"})]),_c('div',{staticClass:\"ebook-media__download cursor-pointer border-rd-50 size-btn-30\",on:{\"click\":function($event){return _vm.handleDownloadFile(_vm.mediaBookViewing.linkPages[_vm.indexMediaMain].linkUrl, _vm.mediaBookViewing.linkPages[_vm.indexMediaMain].titleLink)}}},[_c('i',{staticClass:\"icon-download color-light font-size-16\"})])])])]),_c('ModalShare'),_c('svg',{staticClass:\"display-none\"},[_c('defs',[_c('symbol',{attrs:{\"id\":\"pause\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M14.016 5.016h3.984v13.969h-3.984v-13.969zM6 18.984v-13.969h3.984v13.969h-3.984z\"}})]),_c('symbol',{attrs:{\"id\":\"play-icon\",\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M8.016 5.016l10.969 6.984-10.969 6.984v-13.969z\"}})])])])],1)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:\"icon-arrow-left color-light\"},[_c('span',{staticClass:\"path1\"}),_c('span',{staticClass:\"path2\"})])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:\"icon-nhom-hoc-lieu-3 font-size-30\"},[_c('span',{staticClass:\"path1\"}),_c('span',{staticClass:\"path2\"}),_c('span',{staticClass:\"path3\"}),_c('span',{staticClass:\"path4\"})])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"ebook-media bg-color-light\">\r\n    <div\r\n      class=\"ebook-media__head full-width display-flex-center justify-content-between effect-transition-fast\"\r\n      :class=\"{'keep-mouse': hideHeadFoot}\"\r\n    >\r\n      <a \r\n        href=\"javascript:;\"\r\n        class=\"ebook-media__back color-light display-flex-center border-rd-20\"\r\n        @click=\"backReadBook\"\r\n      >\r\n        <span class=\"icon-arrow-left color-light\"><span class=\"path1\"></span><span class=\"path2\"></span></span>\r\n        <span class=\"only-pc\">Trở lại</span>\r\n      </a>\r\n      <h2 class=\"ebook-media__title font-size-17 font-sanpro-semibold color-light margin-0\">{{ mediaMain && mediaMain.titleLink ? mediaMain.titleLink : (mediaMain && mediaMain.title?mediaMain.title:'' ) }}</h2>\r\n      <div class=\"ebook-media__count display-flex-center\">\r\n        <p class=\"margin-0 display-flex-center color-light font-sanpro-light\">\r\n          <i class=\"icon-eye color-light font-size-18\" />\r\n          {{ mediaMain && mediaMain.countView ? mediaMain.countView : 0 }}\r\n        </p>\r\n        <p class=\"margin-0 display-flex-center color-light font-sanpro-light\">\r\n          <i class=\"icon-download color-light font-size-18\" />\r\n          {{ mediaMain && mediaMain.countDownload ? mediaMain.countDownload : 0 }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"ebook-media__body full-box custom-toolbar\">\r\n      <PreviewMedia\r\n        v-if=\"mediaBookViewing && mediaBookViewing.linkPages && mediaBookViewing.linkPages.length > 0 && mediaMain\"\r\n        :dataSource=\"mediaMain\"\r\n        :volumeVal=\"volumeVal.toString()\"\r\n        @checkTypeMedia=\"handleCheckTypeMediaCurr\"\r\n        @ended=\"handleNextMedia\"\r\n      />\r\n      <div\r\n        v-if=\"mediaBookViewing && mediaBookViewing.linkPages && mediaBookViewing.linkPages.length > 1\"\r\n        class=\"ebook-media__list effect-transition-fast\"\r\n        :class=\"{'active': toggleListPage, 'keep-mouse': hideHeadFoot}\"\r\n      >\r\n        <div class=\"ebook-media__list__head display-flex-center justify-content-center cursor-pointer\" @click=\"handleToggleListPage\">\r\n          <i class=\"icon-arrow-double-down color-light font-size-20\"></i>\r\n        </div>\r\n        <div class=\"ebook-media__list__body custom-scroll custom-scroll--dark\">\r\n          <div\r\n            v-for=\"(item, index) of mediaBookViewing.linkPages\"\r\n            :key=\"index\"\r\n            class=\"item display-flex\"\r\n            :class=\"{'active': index === indexMediaMain}\"\r\n            @click=\"viewMediaInDocSlider(index, 'MediaMain')\"\r\n          >\r\n            <figure class=\"item__img margin-0 position-rel border-rd-4\">\r\n              <!-- <img :src=\"item.posterLink ? `${urlImgCms}/${item.posterLink}` : img404\" alt=\"Học liệu\"> -->\r\n              <!-- <img :src=\"(item.posterLink ? `${urlImgCms}/${item.posterLink}` : `${appUrl}/${item.linkUrl}`) || (item.linkUrl ? `${appUrl}/${item.linkUrl}` : img404)\" alt=\"Học liệu\"> -->\r\n              <img :src=\"item.posterLink ? `${urlImgCms}/${item.posterLink}` : item.linkUrl ? `${appUrl}/${item.linkUrl}` : img404\" alt=\"Học liệu\">\r\n            </figure>\r\n            <div class=\"item__body\">\r\n              <h4 class=\"item__title font-size-16 font-sanpro color-light\">{{ item.titleLink }}</h4>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        v-if=\"relateMedia && relateMedia.length>0\"\r\n        class=\"ebook-media__list effect-transition-fast\"\r\n        :class=\"{'active': toggleListPageRelate, 'keep-mouse': hideHeadFoot}\"\r\n      >\r\n        <div class=\"ebook-media__list__head display-flex-center justify-content-center cursor-pointer\" @click=\"handleToggleListPageRelate\">\r\n          <i class=\"icon-arrow-double-down color-light font-size-20\"></i>\r\n        </div>\r\n        <div class=\"ebook-media__list__body custom-scroll custom-scroll--dark\">\r\n          <div\r\n            v-for=\"(item, index) of relateMedia\"\r\n            :key=\"index\"\r\n            class=\"item display-flex\"\r\n            :class=\"{'active': index === indexMediaMain}\"\r\n            @click=\"viewMediaInDocSlider(index, 'Relate')\"\r\n          >\r\n            <figure class=\"item__img margin-0 position-rel border-rd-4\">\r\n              <img :src=\"item.posterLink ? `${urlImgCms}/${item.posterLink}` : item.linkUrl ? `${appUrl}/${item.linkUrl}` : img404\" alt=\"Học liệu\">\r\n            </figure>\r\n            <div class=\"item__body\">\r\n              <h4 class=\"item__title font-size-16 font-sanpro color-light\">{{ item.title }}</h4>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div\r\n        v-if=\"infoBook\"\r\n        class=\"ebook-media__list effect-transition-fast\"\r\n        :class=\"{'active': toggleInfoCourse, 'keep-mouse': hideHeadFoot}\"\r\n      >\r\n        <div class=\"ebook-media__list__head display-flex-center justify-content-center cursor-pointer\" @click=\"handleToggleInfoCourse\">\r\n          <i class=\"icon-arrow-double-down color-light font-size-20\"></i>\r\n        </div>\r\n        <div class=\"ebook-media__list__body custom-scroll custom-scroll--dark\">\r\n          <div class=\"item\">\r\n            <div class=\"\">\r\n              <h4 class=\"item__title font-size-16 font-sanpro color-light\">Sách: {{infoBook.bookName}}</h4>\r\n            </div>\r\n            <div class=\"\">\r\n              <h4 class=\"item__title font-size-16 font-sanpro color-light\">Bộ sách: {{infoBook.bookGroupName}}</h4>\r\n            </div>\r\n            <div class=\"\">\r\n              <h4 class=\"item__title font-size-16 font-sanpro color-light\">Chương/Tuần: {{infoBook.bookIndexParentName}}</h4>\r\n            </div>\r\n            <div class=\"\">\r\n              <h4 class=\"item__title font-size-16 font-sanpro color-light\">Bài: {{infoBook.bookIndexName}}</h4>\r\n            </div>\r\n            <div class=\"\">\r\n              <h4 class=\"item__title font-size-16 font-sanpro color-light\">Trang: {{this.pageRead}}-{{this.pageRead+1}}</h4>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"ebook-media__footer full-width effect-transition-fast\"\r\n      :class=\"{'keep-mouse': hideHeadFoot}\"\r\n    >\r\n      <div v-show=\"isMediaVideoAudio\" class=\"video-progress ebook-media__footer__progress full-width\">\r\n        <progress id=\"progress-bar\" class=\"full-width\" value=\"0\" min=\"0\" ref=\"progressbar\"></progress>\r\n        <input ref=\"seek\" class=\"seek full-width cursor-pointer\" id=\"seek\" value=\"0\" min=\"0\" type=\"range\" step=\"1\">\r\n        <div ref=\"seek_tooltip\" class=\"seek-tooltip display-none font-size-12 color-light font-sanpro-light\" id=\"seek-tooltip\">00:00</div>\r\n      </div>\r\n      <div class=\"ebook-media__footer__main full-width display-flex-center justify-content-between\" :class=\"{'has-media': isMediaVideoAudio}\">\r\n      <div class=\"list-tab-suggest-ebook\">\r\n        <a\r\n          v-if=\"mediaBookViewing && mediaBookViewing.linkPages && mediaBookViewing.linkPages.length > 1\"\r\n          href=\"javascript:;\"\r\n          class=\"ebook-media__list__toggle color-light display-flex-center border-rd-20\"\r\n          :class=\"{'btn-gray-dark': toggleListPage}\"\r\n          @click=\"handleToggleListPage\"\r\n        >\r\n          <span class=\"icon-nhom-hoc-lieu-3 font-size-30\"><span class=\"path1\"></span><span class=\"path2\"></span><span class=\"path3\"></span><span class=\"path4\"></span></span>\r\n          Nhóm học liệu ({{ mediaBookViewing && mediaBookViewing.linkPages ? mediaBookViewing.linkPages.length : '0' }})\r\n        </a>\r\n       <a\r\n          \r\n          href=\"javascript:;\"\r\n          class=\"ebook-media__list__toggle color-light display-flex-center border-rd-20\"\r\n          :class=\"{'btn-gray-dark': toggleListPageRelate}\"\r\n          @click=\"handleToggleListPageRelate\"\r\n        >\r\n          <img src=\"@/assets/images/playsuggest.png\" />\r\n          Học liệu liên quan\r\n        </a>\r\n\r\n        <a\r\n          \r\n          href=\"javascript:;\"\r\n          class=\"ebook-media__list__toggle color-light display-flex-center border-rd-20\"\r\n          :class=\"{'btn-gray-dark': toggleInfoCourse}\"\r\n          @click=\"handleToggleInfoCourse\"\r\n        >\r\n          <img src=\"@/assets/images/CompositeLayer.png\" />\r\n          Thông tin học liệu\r\n        </a>\r\n      </div>\r\n        \r\n\r\n        <div class=\"ebook-media__controls display-flex-center\">\r\n          <div\r\n            v-if=\"mediaBookViewing && mediaBookViewing.linkPages && mediaBookViewing.linkPages.length > 1\"\r\n            class=\"ebook-media__prev cursor-pointer size-btn-30 border-rd-20\"\r\n            :class=\"{'disabled': indexMediaMain === 0}\"\r\n            @click=\"handlePrevMedia\"\r\n          >\r\n            <i class=\"icon-first-page color-light font-size-20\" />\r\n          </div>\r\n          <div v-show=\"isMediaVideoAudio\" class=\"ebook-media__play cursor-pointer\">\r\n            <!-- SVG use in video custom - child component svg -->\r\n            <button data-title=\"Play (k)\" id=\"play\" class=\"border-0 bg-transparent font-size-18\">\r\n              <svg class=\"playback-icons\">\r\n                <use href=\"#play-icon\"></use>\r\n                <use class=\"hidden\" href=\"#pause\"></use>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <div\r\n            v-if=\"mediaBookViewing && mediaBookViewing.linkPages && mediaBookViewing.linkPages.length > 1\"\r\n            class=\"ebook-media__next cursor-pointer size-btn-30 border-rd-20\"\r\n            :class=\"{'disabled': !mediaBookViewing || !mediaBookViewing.linkPages || mediaBookViewing.linkPages.length < 2 || (mediaBookViewing && mediaBookViewing.linkPages.length && indexMediaMain === mediaBookViewing.linkPages.length -1)}\"\r\n            @click=\"handleNextMedia\"\r\n          >\r\n            <i class=\"icon-last-page color-light font-size-20\" />\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"ebook-media__actions display-flex-center\">\r\n          <div v-show=\"isMediaVideoAudio\" class=\"volume-controls display-flex-center cursor-pointer\">\r\n            <button ref=\"volume_btn\" class=\"volume-button border-0 size-btn-30 border-rd-20\" id=\"volume-button\">\r\n              <i v-if=\"volumeVal < 0.2\" class=\"icon-mute font-size-20 color-light\" @click=\"handleSetVolume(1)\" />\r\n              <i v-else class=\"icon-unmute font-size-20 color-light\" @click=\"handleSetVolume(0)\" />\r\n            </button>\r\n            <div class=\"volume-controls__progress position-rel display-flex-center\">\r\n              <progress id=\"progress-bar__volume\" class=\"full-width\" :value=\"volumeVal\" min=\"0\" max=\"1\"></progress>\r\n              <input class=\"volume slider\" id=\"volume\" v-model=\"volumeVal\" data-mute=\"0.5\" type=\"range\" max=\"1\" min=\"0\" step=\"0.01\">\r\n            </div>\r\n          </div>\r\n          <div class=\"ebook-media__share cursor-pointer border-rd-50 size-btn-30\" @click=\"handleShareMedia\">\r\n            <i class=\"icon-share-white color-light font-size-17\" />\r\n          </div>\r\n          <div\r\n            class=\"ebook-media__download cursor-pointer border-rd-50 size-btn-30\"\r\n            @click=\"handleDownloadFile(mediaBookViewing.linkPages[indexMediaMain].linkUrl, mediaBookViewing.linkPages[indexMediaMain].titleLink)\"\r\n          >\r\n            <i class=\"icon-download color-light font-size-16\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <ModalShare />\r\n    <svg class=\"display-none\">\r\n      <defs>\r\n        <symbol id=\"pause\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M14.016 5.016h3.984v13.969h-3.984v-13.969zM6 18.984v-13.969h3.984v13.969h-3.984z\"></path>\r\n        </symbol>\r\n        <symbol id=\"play-icon\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M8.016 5.016l10.969 6.984-10.969 6.984v-13.969z\"></path>\r\n        </symbol>\r\n      </defs>\r\n    </svg>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState, mapActions } from 'vuex'\r\nimport { STORE_KEY } from './../../_store/constants'\r\nimport ModalShare from '@/modules/libraries/_components/detail/ModalShare.vue'\r\n// import vueCustomScrollbar from 'vue-custom-scrollbar'\r\nimport { updatecountview, apiUpdateCountdownload } from '@/store/common/api'\r\nimport { FLE_DOWNLOAD_BEFORE } from '@/store/common/constants'\r\nimport { APP_CONFIG } from '@/utils/constants'\r\nimport mixinsFiles from '@/components/content-files/mixinsFiles'\r\nimport PreviewMedia from './PreviewMedia.vue'\r\nimport { debounce } from 'debounce'\r\nimport { getAuth } from '@/utils/jwt'\r\nimport { EMAIL_PUBLIC } from '@/store/auth/constants'\r\nimport { getBookRelate, getMediaDetailInLibs } from './../../_api/'\r\n\r\nconst img404 = require(`@/assets/images/img_404.jpg`)\r\n\r\nexport default {\r\n  name: 'EbookMedia',\r\n  mixins: [ mixinsFiles ],\r\n  components: {\r\n    ModalShare,\r\n    // vueCustomScrollbar,\r\n    PreviewMedia\r\n  },\r\n  data () {\r\n    return {\r\n      volumeVal: 1,\r\n      playMedia: false,\r\n      appUrl: APP_CONFIG.bookCdnUrl,\r\n      cdnUrl: APP_CONFIG.cdnUrl,\r\n      imgUrlCms: APP_CONFIG.urlPlatformCmsImg,\r\n      urlImgCms: APP_CONFIG.urlPlatformCmsImg,\r\n      img404,\r\n      indexMediaMain: 0,\r\n      mediaMain: null,\r\n      hideHeadFoot: false,\r\n      toggleListPage: true,\r\n      isMediaVideoAudio: true,\r\n      toggleListPageRelate: false,\r\n      relateMedia: [],\r\n      toggleInfoCourse: false,\r\n      infoBook:null,\r\n      pageRead:0\r\n    }\r\n  },\r\n  computed: {\r\n    ...mapState(STORE_KEY, ['mediaBookViewing', 'ebooksDetail']),\r\n    authInfo () {\r\n      return getAuth()\r\n    }\r\n  },\r\n  watch: {\r\n    mediaBookViewing () {\r\n      this.setMediaMain()\r\n    }\r\n  },\r\n  created () {\r\n    document.addEventListener('mousemove', () => {\r\n      this.showControls()\r\n    });\r\n    document.addEventListener('click', () => {\r\n      this.showControls()\r\n    });\r\n  },\r\n  mounted () {\r\n    this.setMediaMain()\r\n    this.getInfoBook()\r\n    this.pageRead =  parseInt(this.$route.query.pageRead)\r\n  },\r\n  beforeDestroy () {\r\n    document.removeEventListener('mousemove', this.showControls())\r\n    document.removeEventListener('click', this.showControls())\r\n  },\r\n  methods: {\r\n    ...mapActions(STORE_KEY, ['acSetMediaBookViewing']),\r\n    ...mapActions('auth', ['setToggleLoginForm']),\r\n    ...mapActions('common', ['setToggleModalDocSlider', 'setDocPreviewSlider', 'setLoading', 'acToggleModalActiveBook', 'acToggleModalShareMedia', 'acSetMediaShareInfo', 'acToggleModaShowError', 'actionCheckRouterHelp', 'actionSetCountView']),\r\n\r\n    handleToggleListPage () {\r\n      this.toggleListPage = !this.toggleListPage\r\n      this.toggleListPageRelate = false\r\n      this.toggleInfoCourse = false\r\n    },\r\n    handleToggleListPageRelate () {\r\n      this.toggleListPageRelate = !this.toggleListPageRelate\r\n      this.toggleListPage = false\r\n      this.toggleInfoCourse = false\r\n    },\r\n    handleToggleInfoCourse(){\r\n      this.toggleInfoCourse = !this.toggleInfoCourse\r\n      this.toggleListPage = false\r\n      this.toggleListPageRelate =  false\r\n    },\r\n    setMediaMain (type='MediaMain') {\r\n      if(type == 'MediaMain'){\r\n        if (this.mediaBookViewing && this.mediaBookViewing.linkPages && this.indexMediaMain > -1) {\r\n          this.mediaMain = this.mediaBookViewing.linkPages[this.indexMediaMain]\r\n          // Request \r\n          updatecountview(this.mediaMain.pageLinksId).then(res => {\r\n            if(res && res.status === 'success') {\r\n              this.actionSetCountView(Math.random())\r\n            }\r\n          })\r\n          this.getRelateMedia(this.mediaMain.pageLinksId)\r\n        } \r\n      }else{\r\n        if (this.relateMedia && this.relateMedia.length>0 && this.indexMediaMain > -1) {\r\n          this.mediaMain = this.relateMedia[this.indexMediaMain]\r\n          // Request \r\n          updatecountview(this.mediaMain.pageLinksId).then(res => {\r\n            if(res && res.status === 'success') {\r\n              this.actionSetCountView(Math.random())\r\n            }\r\n          })\r\n          this.getRelateMedia(this.mediaMain.pageLinkId)\r\n        } \r\n      }\r\n      \r\n    },\r\n    getRelateMedia(pageLinksId){\r\n      let param ={id:pageLinksId,pageIndex:1,pageSize:20}\r\n      getBookRelate(param).then((response)=>{\r\n        this.relateMedia = response.data\r\n      })\r\n\r\n    },\r\n    getInfoBook(){\r\n      getMediaDetailInLibs(this.mediaMain.pageLinksId).then((response)=>{\r\n        this.infoBook = response.data\r\n      })\r\n    },\r\n    backReadBook () {\r\n      this.acSetMediaBookViewing({})\r\n      this.$router.replace({ query: null })\r\n    },\r\n\r\n    handleSetVolume (val) {\r\n      this.volumeVal = val.toString()\r\n    },\r\n\r\n    handleShareMedia () {\r\n      this.acSetMediaShareInfo({ ...this.mediaBookViewing, ...this.mediaBookViewing.linkPages[this.indexMediaMain] })\r\n      this.acToggleModalShareMedia(true)\r\n    },\r\n\r\n    viewMediaInDocSlider (index, type='MediaMain') {\r\n      this.mediaMain = null\r\n      this.indexMediaMain = index\r\n      setTimeout(() => {\r\n        this.setMediaMain(type)\r\n      }, 5)\r\n    },\r\n\r\n    showControls () {\r\n      this.hideHeadFoot = false\r\n      this.hideControls()\r\n    },\r\n\r\n    hideControls: debounce(function (e) {\r\n      this.hideHeadFoot= true\r\n    }, 3000),\r\n\r\n    handleDownloadFile (link, name, id) {\r\n      if(this.authInfo && this.authInfo.email === EMAIL_PUBLIC) {\r\n        this.setToggleLoginForm(true)\r\n      } else {\r\n        apiUpdateCountdownload(id)\r\n        this.downloadDocs(link, `${FLE_DOWNLOAD_BEFORE} ${name}`)\r\n        this.mediaMain.countDownload += 1\r\n      }\r\n    },\r\n    \r\n    handlePrevMedia () {\r\n      this.viewMediaInDocSlider(this.indexMediaMain - 1)\r\n    },\r\n    \r\n    handleNextMedia () {\r\n      if (this.mediaBookViewing.linkPages && this.mediaBookViewing.linkPages.length > 1 && this.indexMediaMain < this.mediaBookViewing.linkPages.length - 1) {\r\n        this.viewMediaInDocSlider(this.indexMediaMain + 1)\r\n      }\r\n    },\r\n\r\n    handleCheckTypeMediaCurr (val) {\r\n      this.isMediaVideoAudio = val\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.size-btn-30 {\r\n  width: 30px;\r\n  height: 30px;\r\n  @extend .bg-transparent;\r\n  @extend .display-flex-center;\r\n  @extend .justify-content-center;\r\n\r\n  &:hover {\r\n    @extend .btn-gray-dark;\r\n  }\r\n}\r\n.list-tab-suggest-ebook{\r\n  display:flex;\r\n}\r\n.ebook-media {\r\n  position: fixed;\r\n  z-index: 999;\r\n  top: 0;\r\n  left: 0;\r\n  height: 100vh;\r\n  width: 100vw;\r\n\r\n  &__head, &__footer {\r\n    position: fixed;\r\n    left: 0;\r\n    background: $color_gray_view_docs;\r\n    z-index: 2;\r\n    transform: translateY(0);\r\n      -webkit-transform: translateY(0);\r\n  }\r\n  \r\n  &__head {\r\n    padding: 0 20px;\r\n    top: 0;\r\n    height: 50px;\r\n\r\n    &.keep-mouse {\r\n      transform: translateY(-100px);\r\n      -webkit-transform: translateY(-100px);\r\n    }\r\n  }\r\n\r\n  &__footer {\r\n    bottom: 0;\r\n    height: 70px;\r\n    \r\n    &__main {\r\n      padding: 0 20px;\r\n\r\n      &:not(.has-media) {\r\n        height: calc(100% - 8px);\r\n      }\r\n    }\r\n\r\n    &.keep-mouse {\r\n      transform: translateY(30vh);\r\n      -webkit-transform: translateY(30vh);\r\n    }\r\n  }\r\n\r\n  &__body {\r\n    overflow-y: auto;\r\n  }\r\n\r\n  &__back {\r\n    padding: 3px 12px;\r\n    border: 1px solid transparent;\r\n\r\n    i, >span {\r\n      margin-right: 5px;\r\n    }\r\n\r\n    &:hover {\r\n      @extend .btn-gray-dark;\r\n    }\r\n  }\r\n\r\n  &__list {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 15px;\r\n    z-index: 1;\r\n    width: 340px;\r\n    background: $color_gray_view_docs;\r\n    border-radius: 10px 10px 0 0;\r\n    bottom: -80vh;\r\n\r\n    &.active {\r\n      bottom: 70px;\r\n\r\n      &.keep-mouse {\r\n        bottom: 0;\r\n      }\r\n    }\r\n\r\n    &__head {\r\n      padding: 5px 10px;\r\n    }\r\n\r\n    &__body {\r\n      max-height: 40vh;\r\n      overflow-y: auto;\r\n\r\n      .item {\r\n        padding: 8px 10px;\r\n        &__img {\r\n          width: 90px;\r\n          margin-right: 10px;\r\n        }\r\n\r\n        &__body {\r\n          width: calc(100% - 100px);\r\n        }\r\n\r\n        &.active, &:hover {\r\n          background: darken($color_gray_view_docs, 10)\r\n        }\r\n      }\r\n    }\r\n\r\n    &__toggle {\r\n      padding: 5px 10px;\r\n      border: 1px solid transparent;\r\n\r\n      >span {\r\n        margin-right: 6px;\r\n      }\r\n\r\n      &:hover {\r\n        @extend .btn-gray-dark;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__list-relate {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 360px;\r\n    z-index: 1;\r\n    width: 340px;\r\n    background: $color_gray_view_docs;\r\n    border-radius: 10px 10px 0 0;\r\n    bottom: -80vh;\r\n\r\n    &.active {\r\n      bottom: 70px;\r\n\r\n      &.keep-mouse {\r\n        bottom: 0;\r\n      }\r\n    }\r\n\r\n    &__head {\r\n      padding: 5px 10px;\r\n    }\r\n\r\n    &__body {\r\n      max-height: 40vh;\r\n      overflow-y: auto;\r\n\r\n      .item {\r\n        padding: 8px 10px;\r\n        &__img {\r\n          width: 90px;\r\n          margin-right: 10px;\r\n        }\r\n\r\n        &__body {\r\n          width: calc(100% - 100px);\r\n        }\r\n\r\n        &.active, &:hover {\r\n          background: darken($color_gray_view_docs, 10)\r\n        }\r\n      }\r\n    }\r\n\r\n    &__toggle {\r\n      padding: 5px 10px;\r\n      border: 1px solid transparent;\r\n\r\n      >span {\r\n        margin-right: 6px;\r\n      }\r\n\r\n      &:hover {\r\n        @extend .btn-gray-dark;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__controls, &__count, &__actions {\r\n    >* {\r\n      &:not(:last-child) {\r\n        margin-right: 15px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__count {\r\n    i {\r\n      margin-right: 5px;\r\n    }\r\n  }\r\n}\r\n.playback-icons {\r\n  width: 46px;\r\n  height: 46px;\r\n  fill: $color_light;\r\n  stroke: $color_light;\r\n}\r\n.video-progress {\r\n  position: relative;\r\n  height: 8.4px;\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.video-progress, .volume-controls__progress {\r\n  progress {\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    appearance: none;\r\n    border-radius: 2px;\r\n    height: 6px;\r\n    pointer-events: none;\r\n    position: absolute;\r\n    left: 0;\r\n\r\n    &::-webkit-progress-bar {\r\n      background-color: #879AA9;\r\n      border-radius: 2px;\r\n    }\r\n\r\n    &::-webkit-progress-value {\r\n      background: $primary_color;\r\n      border-radius: 2px;\r\n    }\r\n    &::-moz-progress-bar {\r\n      border: 1px solid $primary_color;\r\n      background: $primary_color;\r\n    }\r\n  }\r\n}\r\n.video-progress {\r\n  progress {\r\n    top: 0;\r\n  }\r\n}\r\n.volume-controls__progress {\r\n  min-width: 120px;\r\n  height: 20px;\r\n  \r\n  progress {\r\n    @extend .position-center-y;\r\n\r\n    &::-webkit-progress-value {\r\n      background: $color_light;\r\n    }\r\n\r\n    &::-moz-progress-bar {\r\n      border: 1px solid $color_light;\r\n      background: $color_light;\r\n    }\r\n  }\r\n}\r\n.seek {\r\n  position: absolute;\r\n  top: 0;\r\n  margin: 0;\r\n}\r\n\r\n.seek:hover+.seek-tooltip {\r\n  display: block;\r\n}\r\n\r\n.seek-tooltip {\r\n  position: absolute;\r\n  top: -50px;\r\n  margin-left: -20px;\r\n  padding: 3px;\r\n  content: attr(data-title);\r\n  background-color: rgba($color_dark, 0.6);\r\n}\r\n\r\n.volume-button {\r\n  width: 30px;\r\n  height: 30px;\r\n  @extend .bg-transparent;\r\n\r\n  &:hover {\r\n    @extend .btn-gray-dark;\r\n  }\r\n}\r\n\r\ninput[type=range] {\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  height: 8.4px;\r\n  background: transparent;\r\n  cursor: pointer;\r\n  padding: 0!important; \r\n}\r\n\r\ninput[type=range]:focus {\r\n  outline: none;\r\n}\r\n\r\ninput[type=range]::-webkit-slider-runnable-track {\r\n  width: 100%;\r\n  cursor: pointer;\r\n  border-radius: 1.3px;\r\n  -webkit-appearance: none;\r\n  transition: all 0.4s ease;\r\n}\r\n\r\ninput[type=range]::-webkit-slider-thumb {\r\n  height: 16px;\r\n  width: 16px;\r\n  border-radius: 16px;\r\n  background: $primary_color;\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  margin-left: -1px;\r\n}\r\n\r\ninput[type=range]:focus::-webkit-slider-runnable-track {\r\n  background: transparent;\r\n}\r\n\r\ninput[type=range].volume {\r\n  height: 5px;\r\n  background-color: transparent;\r\n  border-radius: 10px;\r\n  position: absolute;\r\n  width: 100%;\r\n}\r\n\r\ninput[type=range].volume::-webkit-slider-runnable-track {\r\n  background-color: transparent;\r\n}\r\n\r\ninput[type=range].volume::-webkit-slider-thumb {\r\n  margin-left: 0;\r\n  height: 14px;\r\n  width: 14px;\r\n  background: $color_light;\r\n}\r\n\r\ninput[type=range]::-moz-range-track {\r\n  width: 100%;\r\n  height: 8.4px;\r\n  cursor: pointer;\r\n  border: 0;\r\n  background: transparent;\r\n  border-radius: 1.3px;\r\n}\r\n\r\ninput[type=range]::-moz-range-thumb {\r\n  height: 14px;\r\n  width: 14px;\r\n  border-radius: 50px;\r\n  border: 1px solid $primary_color;\r\n  background: $primary_color;\r\n  cursor: pointer;\r\n  margin-top: 5px;\r\n}\r\n\r\ninput[type=range]:focus::-moz-range-track {\r\n  outline: none;\r\n}\r\n\r\ninput[type=range].volume::-moz-range-thumb {\r\n  border: 1px solid $color_light;\r\n  background: $color_light;\r\n}\r\n@media screen and ( max-width: 767px ) {\r\n  .ebook-media {\r\n    &__footer {\r\n      height: auto;\r\n\r\n      &__main {\r\n        display: block;\r\n        padding: 5px 15px;\r\n\r\n        >* {\r\n          &:not(:last-child) {\r\n            margin-bottom: 10px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &__list {\r\n      &.active {\r\n        bottom: 140px;\r\n      }\r\n    }\r\n\r\n    &__back {\r\n      padding: 0;\r\n\r\n      >span {\r\n        margin-right: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  .playback-icons {\r\n    width: 35px;\r\n    height: 35px;\r\n  }\r\n}\r\n@media screen and ( max-width: 576px ) {\r\n  .volume-controls__progress {\r\n    min-width: 80px;\r\n  }\r\n}\r\n</style>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EbookMedia.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EbookMedia.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./EbookMedia.vue?vue&type=template&id=2ea4d1a4&scoped=true&\"\nimport script from \"./EbookMedia.vue?vue&type=script&lang=js&\"\nexport * from \"./EbookMedia.vue?vue&type=script&lang=js&\"\nimport style0 from \"./EbookMedia.vue?vue&type=style&index=0&id=2ea4d1a4&lang=scss&scoped=true&\"\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  \"2ea4d1a4\",\n  null\n  \n)\n\nexport default component.exports","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!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EbookMedia.vue?vue&type=style&index=0&id=2ea4d1a4&lang=scss&scoped=true&\""],"sourceRoot":""}