{"version":3,"sources":["webpack:///./src/views/Embed.vue?2ac3","webpack:///./src/views/Embed.vue?07cb","webpack:///src/views/Embed.vue","webpack:///./src/views/Embed.vue?1a7e","webpack:///./src/views/Embed.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","detail","category","class","type","on","showHeader","hideHeader","contentUri","_v","_s","title","_f","publishDate","viewCountStr","name","style","ref","hideControls","embedUri","htmlContent","domProps","html","_e","status","staticRenderFns","components","Header","ShareDialog","VuePlyr","data","loading","hhTimer","methods","clearTimeout","setTimeout","getData","$http","get","$config","uri","detailUri","then","document","body","scrollTop","documentElement","$","flipBook","backgroundColor","scrollWheel","height","window","onFlip","onReady","fb","gotoPage","v","source","play","created","getElementsByTagName","classList","add","destroyed","remove","mounted","component"],"mappings":"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","file":"js/embed.e8af0c45.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.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!./Embed.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.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!./Embed.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:\"section\",attrs:{\"id\":\"page\"}},[(_vm.loading)?_c('div',{staticClass:\"loading\"}):(!_vm.detail)?_c('div',{staticClass:\"notFound\"},[_c('img',{attrs:{\"src\":require(\"../assets/not-found.png\")}}),_c('h4',[_vm._v(\"404\")]),_c('h2',[_vm._v(\"Halaman tidak ditemukan\")]),_c('p',[_vm._v(\"We can't find the page you looking for\")])]):_c('div',[_c('Header',{attrs:{\"category\":_vm.detail.category}}),_c('div',{staticClass:\"articleDetail\",class:_vm.detail.type,on:{\"click\":_vm.showHeader}},[_c('div',{staticClass:\"articleHeader\",class:{hideHeader: _vm.hideHeader}},[_c('div',{staticClass:\"ahL\"},[_c('a',{attrs:{\"href\":_vm.contentUri,\"target\":\"_blank\"}},[_c('h2',{staticClass:\"articleTitle\"},[_vm._v(_vm._s(_vm.detail.title))]),_c('div',{staticClass:\"publishTime\"},[_vm._v(\" \"+_vm._s(_vm._f(\"moment\")(_vm.detail.publishDate,'MMM YYYY'))+\" \"),_c('span',{staticClass:\"bull\"},[_vm._v(\"•\")]),_vm._v(\" \"+_vm._s(_vm.detail.viewCountStr)+\" views \"),_c('span',{staticClass:\"bull\"},[_vm._v(\"•\")]),_c('span',{staticClass:\"category\"},[_vm._v(_vm._s(_vm.detail.category.name))])])])])]),(_vm.detail.type === 'pdf')?_c('div',{staticClass:\"articleContent\"},[_c('div',{attrs:{\"id\":\"dfCnt\"}})]):(_vm.detail.type === 'image')?_c('div',{staticClass:\"articleContent image\"},[_c('div',{staticClass:\"theImg\",style:({'background-image': (\"url(\" + (_vm.detail.imageLg) + \")\")})})]):(_vm.detail.type === 'video')?_c('div',{staticClass:\"articleContent video\"},[_c('VuePlyr',{ref:\"video\",attrs:{\"options\":{ hideControls: false }}},[_c('video')])],1):(_vm.detail.type === 'audio')?_c('div',{staticClass:\"articleContent audio\"},[_c('VuePlyr',{ref:\"audio\",attrs:{\"options\":{ hideControls: false }}},[_c('video')])],1):(_vm.detail.type === 'youtube')?_c('div',{staticClass:\"articleContent video youtube\"},[_c('iframe',{attrs:{\"src\":_vm.detail.embedUri,\"frameborder\":\"0\",\"allow\":\"accelerometer; autoplay; clipboard-write; encrypted-media;\\n          gyroscope; picture-in-picture\",\"allowfullscreen\":\"\"}})]):(_vm.detail.type === 'html' && _vm.detail.htmlContent)?_c('div',{staticClass:\"articleContent html\",domProps:{\"innerHTML\":_vm._s(_vm.detail.htmlContent.html)}}):_vm._e()]),(_vm.detail.status === 'pending')?_c('div',{staticClass:\"preview\"},[_vm._v(\" This is a preview, content will be published at \"),_c('b',[_vm._v(_vm._s(_vm._f(\"moment\")(_vm.detail.publishDate,'dddd, D MMM YYYY HH:mm')))])]):_vm._e()],1),_c('ShareDialog',{ref:\"shareDialog\"})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <section id=\"page\" class=\"section\">\n    <div class=\"loading\" v-if=\"loading\"></div>\n    <div class=\"notFound\" v-else-if=\"!detail\">\n      <img src=\"../assets/not-found.png\">\n      <h4>404</h4>\n      <h2>Halaman tidak ditemukan</h2>\n      <p>We can't find the page you looking for</p>\n    </div>\n    <div v-else>\n      <Header :category=\"detail.category\"/>\n      <div class=\"articleDetail\" v-on:click=\"showHeader\"\n        :class=\"detail.type\">\n        <div class=\"articleHeader\" :class=\"{hideHeader: hideHeader}\">\n          <div class=\"ahL\">\n            <a :href=\"contentUri\" target=\"_blank\">\n              <h2 class=\"articleTitle\">{{detail.title}}</h2>\n              <div class=\"publishTime\">\n                {{detail.publishDate | moment('MMM YYYY')}}\n                <span class=\"bull\">&bull;</span>\n                {{detail.viewCountStr}} views\n                <span class=\"bull\">&bull;</span>\n                <span class=\"category\">{{detail.category.name}}</span>\n              </div>\n            </a>\n          </div>\n        </div>\n        <div class=\"articleContent\" v-if=\"detail.type === 'pdf'\">\n          <div id=\"dfCnt\"></div>\n        </div>\n        <div class=\"articleContent image\" v-else-if=\"detail.type === 'image'\">\n          <div class=\"theImg\" :style=\"{'background-image': `url(${detail.imageLg})`}\"></div>\n        </div>\n        <div class=\"articleContent video\" v-else-if=\"detail.type === 'video'\">\n          <VuePlyr ref=\"video\" :options=\"{ hideControls: false }\">\n            <video></video>\n          </VuePlyr>\n        </div>\n        <div class=\"articleContent audio\" v-else-if=\"detail.type === 'audio'\">\n          <VuePlyr ref=\"audio\" :options=\"{ hideControls: false }\">\n            <video></video>\n          </VuePlyr>\n        </div>\n        <div class=\"articleContent video youtube\" v-else-if=\"detail.type === 'youtube'\">\n          <iframe :src=\"detail.embedUri\" frameborder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media;\n            gyroscope; picture-in-picture\" allowfullscreen></iframe>\n        </div>\n        <div class=\"articleContent html\" v-else-if=\"detail.type === 'html' && detail.htmlContent\"\n          v-html=\"detail.htmlContent.html\"></div>\n      </div>\n      <div class=\"preview\" v-if=\"detail.status === 'pending'\">\n        This is a preview, content will be published at\n        <b>{{detail.publishDate | moment('dddd, D MMM YYYY HH:mm')}}</b></div>\n    </div>\n    <ShareDialog ref=\"shareDialog\"/>\n  </section>\n</template>\n\n<script>\nimport VuePlyr from 'vue-plyr';\nimport 'vue-plyr/dist/vue-plyr.css';\n\nimport Header from '@/components/Header.vue';\nimport ShareDialog from '@/components/ShareDialog.vue';\n\nexport default {\n  name: 'read',\n  components: {\n    Header,\n    ShareDialog,\n    VuePlyr,\n  },\n  data() {\n    return {\n      loading: true,\n      detail: null,\n      hideHeader: false,\n      hhTimer: null,\n      contentUri: '',\n    };\n  },\n  methods: {\n    showHeader() {\n      if (this.hhTimer) clearTimeout(this.hhTimer);\n      this.hideHeader = false;\n      this.hhTimer = setTimeout(() => {\n        this.hideHeader = true;\n      }, 3000);\n    },\n    getData() {\n      this.loading = true;\n      const key = (this.$route.query.key) ? `&key=${this.$route.query.key}` : '';\n      const detailUri = `content/${this.$route.params.slug}?session=${this.sessionId}${key}`;\n      this.$http.get(this.$config.uri(detailUri)).then((r) => {\n        this.detail = (r.data.status === 200) ? r.data.data : null;\n        document.body.scrollTop = 0;\n        document.documentElement.scrollTop = 0;\n        document.title = (r.data.status === 200)\n          ? `${this.detail.title} - ${this.$config.appName}`\n          : `Content Not Found - ${this.$config.appName}`;\n        this.loading = false;\n        this.contentUri = `${this.$config.appUri}${this.detail.category.slug}/${this.detail.slug}`;\n        this.showHeader();\n        if (this.detail.type === 'pdf') {\n          setTimeout(() => {\n            $('#dfCnt').flipBook(this.detail.pdf, {\n              backgroundColor: '#ede6d4',\n              scrollWheel: false,\n              height: $(window).height(),\n              hideControls: 'share,download',\n              onFlip: (fb) => {},\n              onReady: (fb) => {\n                if (this.$route.query.p) {\n                  setTimeout(() => {\n                    fb.gotoPage(this.$route.query.p);\n                  }, 1200);\n                }\n              },\n            });\n          }, 500);\n        } else if (this.detail.type === 'video') {\n          const src = [];\n          if (this.detail.vid1080p) src.push({ src: this.detail.vid1080p, type: 'video/mp4', size: 1080 });\n          if (this.detail.vid720p) src.push({ src: this.detail.vid720p, type: 'video/mp4', size: 720 });\n          if (this.detail.vid480p) src.push({ src: this.detail.vid480p, type: 'video/mp4', size: 480 });\n          if (this.detail.vid360p) src.push({ src: this.detail.vid360p, type: 'video/mp4', size: 360 });\n          setTimeout(() => {\n            const v = this.$refs.video.player;\n            v.source = { type: 'video', title: this.detail.title, sources: src };\n            v.play();\n          });\n        } else if (this.detail.type === 'audio') {\n          const src = [{ src: this.detail.audio, type: this.detail.mimetype }];\n          setTimeout(() => {\n            const v = this.$refs.audio.player;\n            v.source = { type: 'audio', title: this.detail.title, sources: src };\n            v.play();\n          });\n        }\n      });\n    },\n  },\n  created() {\n    document.getElementsByTagName('BODY')[0].classList.add('hideFooter');\n  },\n  destroyed() {\n    document.getElementsByTagName('BODY')[0].classList.remove('hideFooter');\n  },\n  mounted() {\n    document.body.scrollTop = 0;\n    document.documentElement.scrollTop = 0;\n    document.title = `Loading Content - ${this.$config.appName}`;\n    this.getData();\n  },\n};\n</script>\n\n<style lang=\"scss\">\n.loading{\n  background-image: url(../assets/loading.svg);\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 46px auto;\n  height: 100vh;\n}\n.preview{\n  position: fixed;\n  z-index: 991;\n  left: 0; right: 0; bottom: 0;\n  padding: 10px 0;\n  text-align: center;\n  background-color: yellow;\n  color: #222;\n}\n#dfCnt{\n  height: calc(100vh - 183px);\n  background-color: #f5f5f5;\n  @media (max-width: 980px) {\n    height: calc(100vh - 164px);\n  }\n}\n.articleContent{\n  &.image{\n    position: fixed;\n    left: 0; top: 0; right: 0; bottom: 0;\n    z-index: 3;\n    background-color: #444;\n    .theImg{\n      position: absolute;\n      left: 40px; top: 40px; right: 40px; bottom: 40px;\n      background-position: center;\n      background-size: contain;\n      background-repeat: no-repeat;\n    }\n  }\n  &.video{\n    position: fixed;\n    left: 0; top: 0; right: 0; bottom: 0;\n    z-index: 3;\n    background-color: #000;\n    &.youtube{\n      iframe{\n        width: 100%; height: 100%;\n      }\n    }\n  }\n  &.audio{\n    position: fixed;\n    left: 0; top: 0; right: 0; bottom: 0;\n    z-index: 3;\n    background-color: #f5f5f5;\n    display: flex;\n    .plyr{\n      margin-top: auto;\n      width: 100%; height: auto;\n    }\n  }\n  &.html{\n    position: fixed;\n    left: 0; top: 0; right: 0; bottom: 0;\n    z-index: 3;\n    background-color: #fff;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n}\n.sectionTitle{\n  font-size: 32px;\n  line-height: 1.3;\n  margin: 0 auto 10px;\n  max-width: 1180px;\n  @media (max-width: 1300px) {\n    max-width: 1140px;\n  }\n  @media (max-width: 1220px) {\n    margin: 0 20px 10px;\n  }\n  @media (max-width: 680px) {\n    margin: 0 16px 10px;\n    font-size: 20px;\n  }\n}\n.allContentCnt{\n  padding-top: 40px;\n  padding-bottom: 20px;\n  .allContent{\n    max-width: 1180px;\n    margin: 0 auto;\n    @media (max-width: 1300px) {\n      max-width: 1140px;\n    }\n    @media (max-width: 1220px) {\n      margin: 0 20px;\n    }\n    @media (max-width: 680px) {\n      margin: 0 16px;\n    }\n    .contentCnt{\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0 -10px;\n      @media (max-width: 680px) {\n        margin: 0 -8px;\n      }\n    }\n    .contentItem{\n      width: calc(20% - 20px);\n      margin: 0 10px 40px;\n      @media (max-width: 680px) {\n        width: calc(50% - 16px);\n        margin: 0 8px 40px;\n      }\n      a{\n        color: #444;\n        text-decoration: none;\n      }\n      .contentImg{\n        height: 400px;\n        border-radius: 2px;\n        margin-bottom: 14px;\n        position: relative;\n        overflow: hidden;\n        @media (max-width: 1300px) {\n          height: 380px;\n        }\n        @media (max-width: 1220px) {\n          height: 32vw;\n        }\n        @media (max-width: 680px) {\n          height: 78vw;\n        }\n        &.shortImg{\n          height: 300px;\n          @media (max-width: 1300px) {\n            height: 280px;\n          }\n          @media (max-width: 1220px) {\n            height: 22vw;\n          }\n          @media (max-width: 680px) {\n            height: 68vw;\n          }\n        }\n        .theImg{\n          position: absolute;\n          top: -2px; right: -2px; bottom: -2px; left: -2px;\n          background-position: center;\n          background-size: cover;\n          background-color: #f5f5f5;\n          &.noImg{\n            background-color: #ccc;\n            background-image: url(../assets/image-white.png) !important;\n            background-position: center;\n            background-size: 64px auto;\n            background-repeat: no-repeat;\n          }\n          .lnk{\n            position: absolute;\n            left: 0; top: 0; right: 0; bottom: 0;\n            z-index: 2;\n          }\n        }\n      }\n      .contentInfo{\n        position: relative;\n        padding: 0 40px 0 5px;\n        .contentLove{\n          width: 36px; height: 36px;\n          border-radius: 4px;\n          position: absolute;\n          right: 0; top: 0;\n          background-image: url(../assets/heart.png);\n          background-size: 26px auto;\n          background-position: center;\n          background-repeat: no-repeat;\n          opacity: .7;\n          cursor: pointer;\n          &:hover{\n            // background-color: #fff1f1;\n            opacity: 1;\n          }\n          &.favorited{\n            opacity: 1;\n            background-image: url(../assets/heart-loved.png);\n          }\n          &.animating{\n            opacity: 1;\n            animation-name: heartAnimation;\n            animation-duration: .3s;\n          }\n          &.animating2{\n            animation-name: heartAnimation2;\n            animation-duration: .3s;\n          }\n        }\n        .category{\n          text-transform: uppercase;\n          color: #767676;\n          font-size: 12px;\n          font-weight: bold;\n          a{\n            color: #767676;\n          }\n        }\n        h4{\n          margin: 3px 0 6px;\n          font-size: 18px;\n          line-height: 1.2;\n          @media (max-width: 1340px) {\n            font-size: 17px;\n          }\n        }\n        .date{\n          margin-top: 4px;\n          font-size: 14px;\n          color: #767676;\n          a{\n            color: #767676;\n          }\n        }\n      }\n    }\n  }\n}\n\n\n  .articleDetail{\n    .articleHeader{\n      display: flex;\n      margin: 0 auto;\n      padding-bottom: 20px;\n      position: relative;\n      position: fixed;\n      left: 0; right: 0; top: 0;\n      z-index: 991;\n      padding: 12px 10px 100px 20px;\n      background-image: linear-gradient(rgba(255, 255, 255, .8), transparent);\n      transition: all .7s ease;\n      a{\n        color: #444;\n      }\n      &.hideHeader{\n        top: -180px;\n      }\n      .ahL{\n        margin-right: auto;\n        .articleTitle{\n          font-size: 30px;\n          margin: 0;\n          display: block;\n          @media (max-width: 680px) {\n            font-size: 22px;\n            margin: 0 0 2px;\n          }\n        }\n        .publishTime{\n          @media (max-width: 680px) {\n            font-size: 14px;\n          }\n          .bull{\n            margin: 0 12px 0 10px;\n            color: #999;\n          }\n          .category{\n            text-transform: uppercase;\n            font-weight: 500;\n            color: #555;\n          }\n        }\n      }\n      .ahR{\n        display: flex;\n        align-items: center;\n        @media (max-width: 680px) {\n          margin-top: 2px;\n          margin-left: -12px;\n        }\n        .articleAction{\n          margin-left: 10px;\n          position: relative;\n          padding: 10px 16px;\n          padding-left: 44px;\n          border-radius: 50px;\n          cursor: pointer;\n          transition: all .3s ease;\n          color: #444;\n          @media (max-width: 680px) {\n            font-size: 15px;\n            margin: 0;\n            padding-left: 40px;\n            padding-top: 6px;\n            padding-bottom: 6px;\n          }\n          &:hover{\n            background-color: #eee;\n          }\n          &:before{\n            width: 20px; height: 20px;\n            content: \"\";\n            position: absolute;\n            left: 14px; top: 9px;\n            background-size: contain;\n            background-position: center;\n            background-repeat: no-repeat;\n            @media (max-width: 680px) {\n              width: 16px;\n              top: 5px;\n            }\n          }\n          &.share{\n            &:before{\n              background-image: url(../assets/share.png);\n            }\n          }\n          &.download{\n            &:before{\n              background-image: url(../assets/download-icon.png);\n            }\n          }\n          &.views{\n            &:before{\n              background-image: url(../assets/eye.png);\n            }\n          }\n        }\n      }\n    }\n    &.video{\n      .articleHeader{\n        background-image: linear-gradient(rgba(0, 0, 0, .8), transparent);\n        color: #fff;\n        a{\n          color: #fff;\n        }\n        .publishTime{\n          .bull{\n            color: #fff;\n          }\n          .category{\n            color: #fff;\n          }\n        }\n      }\n    }\n  }\n</style>\n","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!./Embed.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!./Embed.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Embed.vue?vue&type=template&id=3f7f581c&\"\nimport script from \"./Embed.vue?vue&type=script&lang=js&\"\nexport * from \"./Embed.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Embed.vue?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"],"sourceRoot":""}