{"version":3,"sources":["webpack:///./src/views/ch/6-3-Video.vue?327e","webpack:///./src/assets/png/video/2021-5min-en.jpg","webpack:///./src/assets/png/video/2020-5min-en.jpg","webpack:///./src/views/ch/6-3-Video.vue","webpack:///./src/views/ch/6-3-Video.vue?a398","webpack:///./src/assets/png/video/2020-3min-en.jpg","webpack:///./src/assets/png/video/2020-3min-ch.jpg","webpack:///./src/data/getVideoLinks.js","webpack:///./src/assets/png/video/2021-5min-ch.jpg","webpack:///./src/assets/png/video/2020-5min-ch.jpg"],"names":["module","exports","name","video","ref","activeIndex","changeVideo","index","value","offsetTop","document","getElementById","window","scrollTo","top","left","behavior","load","videoLinks","getVideoLinks","__exports__","videoUrl","title","enTitle","imgUrl","require"],"mappings":"kHAAA,W,uBCAAA,EAAOC,QAAU,IAA0B,iC,uBCA3CD,EAAOC,QAAU,IAA0B,iC,kZCyB3C,EAAe,CACXC,KAAM,oB,gCAMV,MAAMC,EAAQC,iBAAI,MACZC,EAAcD,iBAAI,GACxB,SAASE,EAAYC,GACjBF,EAAYG,MAAQD,EACpB,MAAME,EAAYC,SAASC,eAAe,wBAAwBF,UAClEG,OAAOC,SAAS,CACZC,IAAKL,EACLM,KAAM,EACNC,SAAU,WAEdb,EAAMK,MAAMS,OAEhB,MAAM,WAAEC,GAAeC,iB,yiCCtCvB,MAAMC,EAA2B,IAAgB,EAAQ,CAAC,CAAC,YAAY,qBAExD,gB,qBCRfpB,EAAOC,QAAU,IAA0B,iC,qBCA3CD,EAAOC,QAAU,IAA0B,iC,0DCA5B,kBACX,IAAIiB,EAAa,CACb,CACIG,SACI,2HACJC,MAAO,8BACPC,QACI,oGACJC,OAAQC,EAAQ,SAEpB,CACIJ,SACI,wJACJC,MAAO,8BACPC,QACI,4FACJC,OAAQC,EAAQ,SAEpB,CACIJ,SACI,iMACJC,MAAO,8BACPC,QACI,qGACJC,OAAQC,EAAQ,SAEpB,CACIJ,SACI,wMACJC,MAAO,8BACPC,QACI,6FACJC,OAAQC,EAAQ,SAEpB,CACIJ,SACI,8KACJC,MAAO,8BACPC,QACI,oGACJC,OAAQC,EAAQ,SAEpB,CACIJ,SACI,yLACJC,MAAO,8BACPC,QACI,mEACJC,OAAQC,EAAQ,UAIxB,MAAO,CAAEP,gB,qBCpDblB,EAAOC,QAAU,IAA0B,iC,qBCA3CD,EAAOC,QAAU,IAA0B","file":"js/chunk-5f38f40e.2dc535ee.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--1-1!./6-3-Video.vue?vue&type=style&index=0&id=0e738b0b&lang=scss&scoped=true\"","module.exports = __webpack_public_path__ + \"img/2021-5min-en.dfd3d0c0.jpg\";","module.exports = __webpack_public_path__ + \"img/2020-5min-en.cd27a716.jpg\";","<template>\r\n    <div id=\"InformationVideo\" class=\"w2\">\r\n        <h1 class=\"h1 center\" id=\"information-video-h1\">影音專區</h1>\r\n        <video autoplay controls controlsList=\"nodownload\" ref=\"video\">\r\n            <source :src=\"videoLinks[activeIndex].videoUrl\" type=\"video/mp4\" />\r\n        </video>\r\n        <h2 class=\"f32 f20-mb\">{{ videoLinks[activeIndex].title }}</h2>\r\n\r\n        <ul>\r\n            <li\r\n                v-for=\"(item, index) in videoLinks\"\r\n                :key=\"'video-menu-' + index\"\r\n                :class=\"{ activated: activeIndex === index }\"\r\n                @click=\"changeVideo(index)\"\r\n                @keypress.enter=\"changeVideo(index)\"\r\n                tabindex=\"0\"\r\n                role=\"button\"\r\n            >\r\n                <img :src=\"item.imgUrl\" :alt=\"item.title + ' thumbnail'\" />\r\n                <h3 class=\"f14 f14-mb\">{{ item.title }}</h3>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</template>\r\n<script>\r\nexport default {\r\n    name: 'InformationVideo',\r\n}\r\n</script>\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport getVideoLinks from '@/data/getVideoLinks.js'\r\nconst video = ref(null)\r\nconst activeIndex = ref(0)\r\nfunction changeVideo(index) {\r\n    activeIndex.value = index\r\n    const offsetTop = document.getElementById('information-video-h1').offsetTop\r\n    window.scrollTo({\r\n        top: offsetTop,\r\n        left: 0,\r\n        behavior: 'smooth',\r\n    })\r\n    video.value.load()\r\n}\r\nconst { videoLinks } = getVideoLinks()\r\n</script>\r\n<style lang=\"scss\" scoped>\r\nh2 {\r\n    color: $gray4;\r\n    font-weight: 700;\r\n    text-align: center;\r\n    border-bottom: 1px solid $grayB;\r\n    @media screen and (min-width: 768px) {\r\n        line-height: 2em;\r\n        padding-bottom: 50px;\r\n    }\r\n    @media screen and (max-width: 767px) {\r\n        line-height: 1.5em;\r\n        padding: 15px 20px 20px;\r\n    }\r\n}\r\nvideo {\r\n    width: 100%;\r\n}\r\nul {\r\n    display: grid;\r\n    @media screen and (min-width: 768px) {\r\n        margin: 50px 0 80px;\r\n        grid-template: auto / repeat(4, 1fr);\r\n        grid-gap: 20px;\r\n    }\r\n    @media screen and (max-width: 767px) {\r\n        margin: 20px 10px 50px;\r\n        grid-template: auto / repeat(2, 1fr);\r\n        grid-gap: 10px;\r\n    }\r\n}\r\nli {\r\n    position: relative;\r\n    box-shadow: $shadow1;\r\n    cursor: pointer;\r\n    img {\r\n        width: 100%;\r\n        object-fit: cover;\r\n    }\r\n    h3 {\r\n        padding: 5px 10px 10px;\r\n    }\r\n    &.activated:after {\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        display: block;\r\n        width: 100%;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n        border: 5px solid $theme2;\r\n    }\r\n    @media screen and (min-width: 768px) {\r\n    }\r\n    @media screen and (max-width: 767px) {\r\n        h3 {\r\n            line-height: 1.3em;\r\n        }\r\n    }\r\n}\r\n</style>\r\n","import script from \"./6-3-Video.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./6-3-Video.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./6-3-Video.vue?vue&type=style&index=0&id=0e738b0b&lang=scss&scoped=true\"\n\nimport exportComponent from \"C:\\\\Users\\\\danie\\\\Documents\\\\Octave\\\\production\\\\marine-debris-2022\\\\frontend\\\\node_modules\\\\@vue\\\\cli-service\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-0e738b0b\"]])\n\nexport default __exports__","module.exports = __webpack_public_path__ + \"img/2020-3min-en.7e255e87.jpg\";","module.exports = __webpack_public_path__ + \"img/2020-3min-ch.8c060c45.jpg\";","export default function () {\r\n    let videoLinks = [\r\n        {\r\n            videoUrl:\r\n                'https://marine-debris.s3.ap-northeast-1.amazonaws.com/videos/2020%E5%B0%8F%E5%AF%B6rethink_+%E4%B8%AD%E6%96%87_final.mp4',\r\n            title: '2020年 海洋廢棄物循環利用宣導影片（中文5分鐘版）',\r\n            enTitle:\r\n                'The 2020 Recycled Marine Debris Product Label Promotional Video (the five-minute Chinese version)',\r\n            imgUrl: require('@/assets/png/video/2020-5min-ch.jpg'),\r\n        },\r\n        {\r\n            videoUrl:\r\n                'https://marine-debris.s3.ap-northeast-1.amazonaws.com/videos/%E5%B0%8F%E5%AF%B6rethink_%E8%8B%B1%E6%96%87_final(2020%E5%B9%B45%E5%88%86%E9%90%98).mp4',\r\n            title: '2020年 海洋廢棄物循環利用宣導影片（英文5分鐘版）',\r\n            enTitle:\r\n                'The 2020 Recycled Marine Debris Product Label Promotional Video (the five-minute version)',\r\n            imgUrl: require('@/assets/png/video/2020-5min-en.jpg'),\r\n        },\r\n        {\r\n            videoUrl:\r\n                'https://marine-debris.s3.ap-northeast-1.amazonaws.com/videos/%E7%B2%BE%E7%B0%A1%E7%89%88%E7%B7%A8%E8%BC%AF%E6%AA%94%E6%A1%88+1100608%E4%B8%AD%E6%96%87%E7%89%88V2(20203%E5%88%86%E9%90%98).mp4',\r\n            title: '2020年 海洋廢棄物循環利用宣導影片（中文3分鐘版）',\r\n            enTitle:\r\n                'The 2020 Recycled Marine Debris Product Label Promotional Video (the three-minute Chinese version)',\r\n            imgUrl: require('@/assets/png/video/2020-3min-ch.jpg'),\r\n        },\r\n        {\r\n            videoUrl:\r\n                'https://marine-debris.s3.ap-northeast-1.amazonaws.com/videos/%E7%B2%BE%E7%B0%A1%E7%89%88%E7%B7%A8%E8%BC%AF%E6%AA%94%E6%A1%88+1100618%E8%8B%B1%E6%96%87%E7%89%88(2020%E5%B9%B43%E5%88%86%E9%90%98).mp4',\r\n            title: '2020年 海洋廢棄物循環利用宣導影片（英文3分鐘版）',\r\n            enTitle:\r\n                'The 2020 Recycled Marine Debris Product Label Promotional Video (the three-minute version)',\r\n            imgUrl: require('@/assets/png/video/2020-3min-en.jpg'),\r\n        },\r\n        {\r\n            videoUrl:\r\n                'https://marine-debris.s3.ap-northeast-1.amazonaws.com/videos/2021%E5%B9%B4%E6%B5%B7%E5%BB%A2%E5%AE%A3%E5%B0%8E%E5%BB%A3%E5%91%8A_5%E5%88%86%E9%90%98_%E4%B8%AD%E6%96%87.mp4',\r\n            title: '2021年 海洋廢棄物循環利用宣導影片（中文5分鐘版）',\r\n            enTitle:\r\n                'The 2021 Recycled Marine Debris Product Label Promotional Video (the five-minute Chinese version)',\r\n            imgUrl: require('@/assets/png/video/2021-5min-ch.jpg'),\r\n        },\r\n        {\r\n            videoUrl:\r\n                'https://marine-debris.s3.ap-northeast-1.amazonaws.com/videos/%E6%B5%B7%E5%BB%A2%E5%AE%A3%E5%B0%8E%E5%BB%A3%E5%91%8A%EF%BC%BF5%E5%88%86%E9%90%98%EF%BC%BF2021%E8%8B%B1%E6%96%87-003.mp4',\r\n            title: '2021年 海洋廢棄物循環利用宣導影片（英文5分鐘版）',\r\n            enTitle:\r\n                'The 2021 Recycled Marine Debris Product Label Promotional Video ',\r\n            imgUrl: require('@/assets/png/video/2021-5min-en.jpg'),\r\n        },\r\n    ]\r\n\r\n    return { videoLinks }\r\n}\r\n","module.exports = __webpack_public_path__ + \"img/2021-5min-ch.f1b6a90b.jpg\";","module.exports = __webpack_public_path__ + \"img/2020-5min-ch.b4cf9dc8.jpg\";"],"sourceRoot":""}