{"version":3,"sources":["webpack:///./src/views/bookmark/show.vue","webpack:///src/views/bookmark/show.vue","webpack:///./src/views/bookmark/show.vue?7d8d","webpack:///./src/views/bookmark/show.vue?4ad6","webpack:///./src/views/bookmark/show.vue?9142","webpack:///./src/views/bookmark/show.vue?f04e","webpack:///./src/composables/mixins.js"],"names":["render","_vm","this","_c","_self","staticClass","_v","attrs","_s","detail","siteName","camera","cameraName","name","description","startTime","prettyDate","_e","endTime","duration","isVisibleVideo","streamingURL","videoOptions","on","onSkip","onExport","onSnapshot","onQualityChange","$event","movePTZ","item","isSnapshot","isDownloading","percentageDownload","staticRenderFns","components","Player","DownloadBar","mixins","Mixins","data","quality","computed","start","getTime","end","toDuration","Date","mounted","_mounted","_asyncToGenerator","regeneratorRuntime","mark","_callee","wrap","_context","prev","next","getDetail","stop","apply","arguments","methods","date","format","Intl","DateTimeFormat","dateStyle","timeStyle","_getDetail","_callee2","id","_yield$api$bookmarkDe","_context2","$vs","loading","$route","params","api","bookmarkDetail","bookmarkId","sent","cameraBookmark","close","t0","_onSnapshot","_callee3","_yield$api$viewSnapsh","_context3","viewSnapshot","cameraId","concat","toLocaleString","downloadFile","Error","response","message","_onSkip","_callee4","_yield$api$viewSkipVi","_context4","GMTToLocalStringTime","viewSkipVideo","$set","_x","_onQualityChange","_callee5","_yield$api$viewSkipVi2","_context5","_x2","_onExport","_callee6","fileName","_context6","component","_downloadFile","url","type","_this","axios","get","responseType","onDownloadProgress","progressEvent","total","current","loaded","percentCompleted","Math","floor","then","res","createBlobFile","catch","_x3"],"mappings":"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","file":"js/chunk-1ef6d160.8f72aee6.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"screen flex flex-wrap overflow-hidden rounded-md shadow\"},[_c('aside',{staticClass:\"max-w-xs w-full flex flex-col p-4 bg-white\"},[_c('div',{staticClass:\"mb-5 pt-1\"},[_c('h4',{staticClass:\"title mb-3 font-semibold text-sm uppercase\"},[_vm._v(\"Camera\")]),_c('div',{staticClass:\"flex items-center space-x-3\"},[_c('feather-icon',{staticClass:\"icon\",attrs:{\"icon\":\"MapPinIcon\"}}),_c('span',{staticClass:\"font-semibold\"},[_vm._v(_vm._s(_vm.detail.siteName))])],1),_c('div',{staticClass:\"flex items-center space-x-3\"},[_c('feather-icon',{staticClass:\"icon\",attrs:{\"icon\":\"VideoIcon\"}}),_c('span',{staticClass:\"font-semibold\"},[_vm._v(_vm._s(_vm.camera.cameraName))])],1)]),_c('div',{staticClass:\"mb-5\"},[_c('h4',{staticClass:\"title mb-3 font-semibold text-sm uppercase\"},[_vm._v(\"Detail\")]),_c('div',{staticClass:\"mb-3\"},[_c('span',{staticClass:\"title uppercase tracking-wide text-xs\"},[_vm._v(\"Name\")]),_c('p',{staticClass:\"font-semibold\"},[_vm._v(_vm._s(_vm.camera.name))])]),_c('div',{staticClass:\"mb-3\"},[_c('span',{staticClass:\"title uppercase tracking-wide text-xs\"},[_vm._v(\"Deskripsi\")]),_c('p',{staticClass:\"font-semibold\"},[_vm._v(_vm._s(_vm.camera.description || \"-\"))])]),_c('div',{staticClass:\"mb-3\"},[_c('span',{staticClass:\"title uppercase tracking-wide text-xs\"},[_vm._v(\"Start Time\")]),(_vm.camera.startTime)?_c('p',{staticClass:\"font-semibold\"},[_vm._v(\"\\n          \"+_vm._s(_vm.prettyDate(_vm.camera.startTime))+\"\\n        \")]):_vm._e()]),_c('div',{staticClass:\"mb-3\"},[_c('span',{staticClass:\"title uppercase tracking-wide text-xs\"},[_vm._v(\"End Time\")]),(_vm.camera.endTime)?_c('p',{staticClass:\"font-semibold\"},[_vm._v(\"\\n          \"+_vm._s(_vm.prettyDate(_vm.camera.endTime))+\"\\n        \")]):_vm._e()]),_c('div',{staticClass:\"mb-3\"},[_c('span',{staticClass:\"title uppercase tracking-wide text-xs\"},[_vm._v(\"Duration\")]),_c('p',{staticClass:\"font-semibold\"},[_vm._v(_vm._s(_vm.duration))])])])]),_c('div',{staticClass:\"flex-1 relative\"},[(_vm.isVisibleVideo)?_c('Player',{attrs:{\"title\":_vm.camera.cameraName,\"isPTZ\":false,\"url\":_vm.camera.streamingURL,\"options\":_vm.videoOptions,\"resize\":true,\"time-start\":_vm.startTime,\"time-end\":_vm.endTime,\"rewind\":30,\"is-muted\":\"\",\"is-mic-muted\":\"\",\"show-settings\":\"\",\"hide-bookmark\":\"\"},on:{\"skip\":_vm.onSkip,\"action:export\":_vm.onExport,\"action:snapshot\":_vm.onSnapshot,\"timeline:click\":_vm.onSkip,\"quality:change\":_vm.onQualityChange,\"action:ptzup\":function($event){return _vm.movePTZ(_vm.item,'up')},\"action:ptzleft\":function($event){return _vm.movePTZ(_vm.item,'left')},\"action:ptzright\":function($event){return _vm.movePTZ(_vm.item,'right')},\"action:ptzdown\":function($event){return _vm.movePTZ(_vm.item,'down')}}}):_vm._e(),_c('transition',{attrs:{\"name\":\"snapshot\",\"mode\":\"out-in\"}},[(_vm.isSnapshot)?_c('div',{staticClass:\"snapshot-screen\"},[_c('span',{staticClass:\"snapshot-icon\"},[_c('vs-icon',{attrs:{\"icon\":\"filter_center_focus\",\"size\":\"64px\",\"color\":\"black\"}})],1)]):_vm._e()])],1),_c('DownloadBar',{attrs:{\"is-downloading\":_vm.isDownloading,\"progress\":_vm.percentageDownload},on:{\"close\":function($event){_vm.isDownloading = false}}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"screen flex flex-wrap overflow-hidden rounded-md shadow\">\r\n    <aside class=\"max-w-xs w-full flex flex-col p-4 bg-white\">\r\n      <div class=\"mb-5 pt-1\">\r\n        <h4 class=\"title mb-3 font-semibold text-sm uppercase\">Camera</h4>\r\n        <div class=\"flex items-center space-x-3\">\r\n          <feather-icon class=\"icon\" icon=\"MapPinIcon\" />\r\n          <span class=\"font-semibold\">{{ detail.siteName }}</span>\r\n        </div>\r\n        <div class=\"flex items-center space-x-3\">\r\n          <feather-icon class=\"icon\" icon=\"VideoIcon\" />\r\n          <span class=\"font-semibold\">{{ camera.cameraName }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"mb-5\">\r\n        <h4 class=\"title mb-3 font-semibold text-sm uppercase\">Detail</h4>\r\n        <div class=\"mb-3\">\r\n          <span class=\"title uppercase tracking-wide text-xs\">Name</span>\r\n          <p class=\"font-semibold\">{{ camera.name }}</p>\r\n        </div>\r\n        <div class=\"mb-3\">\r\n          <span class=\"title uppercase tracking-wide text-xs\">Deskripsi</span>\r\n          <p class=\"font-semibold\">{{ camera.description || \"-\" }}</p>\r\n        </div>\r\n        <div class=\"mb-3\">\r\n          <span class=\"title uppercase tracking-wide text-xs\">Start Time</span>\r\n          <p v-if=\"camera.startTime\" class=\"font-semibold\">\r\n            {{ prettyDate(camera.startTime) }}\r\n          </p>\r\n        </div>\r\n        <div class=\"mb-3\">\r\n          <span class=\"title uppercase tracking-wide text-xs\">End Time</span>\r\n          <p v-if=\"camera.endTime\" class=\"font-semibold\">\r\n            {{ prettyDate(camera.endTime) }}\r\n          </p>\r\n        </div>\r\n        <div class=\"mb-3\">\r\n          <span class=\"title uppercase tracking-wide text-xs\">Duration</span>\r\n          <p class=\"font-semibold\">{{ duration }}</p>\r\n        </div>\r\n      </div>\r\n    </aside>\r\n    <div class=\"flex-1 relative\">\r\n      <Player\r\n        v-if=\"isVisibleVideo\"\r\n        :title=\"camera.cameraName\"\r\n        :isPTZ=\"false\"\r\n        :url=\"camera.streamingURL\"\r\n        :options=\"videoOptions\"\r\n        :resize=\"true\"\r\n        :time-start=\"startTime\"\r\n        :time-end=\"endTime\"\r\n        :rewind=\"30\"\r\n        is-muted\r\n        is-mic-muted\r\n        show-settings\r\n        hide-bookmark\r\n        @skip=\"onSkip\"\r\n        @action:export=\"onExport\"\r\n        @action:snapshot=\"onSnapshot\"\r\n        @timeline:click=\"onSkip\"\r\n        @quality:change=\"onQualityChange\"\r\n        @action:ptzup=\"movePTZ(item,'up')\"\r\n        @action:ptzleft=\"movePTZ(item,'left')\"\r\n        @action:ptzright=\"movePTZ(item,'right')\"\r\n        @action:ptzdown=\"movePTZ(item,'down')\"\r\n      />\r\n      <!-- Snapshot Animation -->\r\n      <transition name=\"snapshot\" mode=\"out-in\">\r\n        <div v-if=\"isSnapshot\" class=\"snapshot-screen\">\r\n          <span class=\"snapshot-icon\">\r\n            <vs-icon icon=\"filter_center_focus\" size=\"64px\" color=\"black\" />\r\n          </span>\r\n        </div>\r\n      </transition>\r\n    </div>\r\n    <!-- Download Bar -->\r\n    <DownloadBar\r\n      :is-downloading=\"isDownloading\"\r\n      :progress=\"percentageDownload\"\r\n      @close=\"isDownloading = false\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport api from \"@/api\";\r\nimport Mixins from \"@/composables/mixins\";\r\nimport { toDuration, getTime, GMTToLocalStringTime } from \"@/composables\";\r\nimport { videoOptions } from \"@/views/views/states\";\r\nimport Player from \"@/components/player/VideoPlayer.vue\";\r\nimport DownloadBar from \"@/components/player/DownloadBar.vue\";\r\nexport default {\r\n  name: \"ShowBookmark\",\r\n  components: {\r\n    Player,\r\n    DownloadBar,\r\n  },\r\n  mixins: [Mixins],\r\n  data: () => ({\r\n    detail: {},\r\n    camera: {},\r\n    isSnapshot: false,\r\n    isVisibleVideo: false,\r\n    videoOptions,\r\n    quality: \"low\",\r\n    percentageDownload: 0,\r\n  }),\r\n  computed: {\r\n    duration() {\r\n      if (this.detail && this.camera) {\r\n        const start = getTime(this.camera.startTime);\r\n        const end = getTime(this.camera.endTime);\r\n        return toDuration({\r\n          startTime: start,\r\n          endTime: end,\r\n        });\r\n      }\r\n    },\r\n    startTime() {\r\n      return new Date(this.camera.startTime).getTime();\r\n    },\r\n    endTime() {\r\n      return new Date(this.camera.endTime).getTime();\r\n    },\r\n  },\r\n  async mounted() {\r\n    await this.getDetail();\r\n  },\r\n  methods: {\r\n    prettyDate(date) {\r\n      const format = new Date(date);\r\n      return new Intl.DateTimeFormat(\"id-ID\", {\r\n        dateStyle: \"short\",\r\n        timeStyle: \"long\",\r\n      }).format(format);\r\n    },\r\n    async getDetail() {\r\n      try {\r\n        this.$vs.loading();\r\n        const id = this.$route.params.id;\r\n        const { data } = await api.bookmarkDetail({ bookmarkId: id });\r\n        this.detail = data.data[0];\r\n        this.camera = this.detail.cameraBookmark[0];\r\n        this.$vs.loading.close();\r\n        this.isVisibleVideo = true;\r\n      } catch (error) {\r\n        this.$vs.loading.close();\r\n      }\r\n    },\r\n\r\n    // take the snapshot\r\n    async onSnapshot() {\r\n      try {\r\n        this.isSnapshot = true;\r\n\r\n        const { data } = await api.viewSnapshot({\r\n          cameraId: this.camera.cameraId,\r\n          startTime: this.camera.startTime,\r\n        });\r\n\r\n        const streamingURL = data.data[0].streamingURL;\r\n        const cameraName = `${\r\n          this.camera.cameraName\r\n        }-${new Date().toLocaleString(\"ID\")}`;\r\n\r\n        this.isSnapshot = false;\r\n\r\n        await this.downloadFile(streamingURL, \"image/jpg\", cameraName);\r\n      } catch (error) {\r\n        throw new Error(error.response.data.message);\r\n      }\r\n    },\r\n    async onSkip(duration) {\r\n      try {\r\n        const startTime = GMTToLocalStringTime(duration);\r\n        const { data } = await api.viewSkipVideo({\r\n          cameraId: this.camera.cameraId,\r\n          startTime: startTime,\r\n        });\r\n\r\n        this.$set(this.camera, \"streamingURL\", data.data[0].streamingURL);\r\n        this.$set(this.camera, \"startTime\", duration);\r\n      } catch (error) {\r\n        throw new Error(error);\r\n      }\r\n    },\r\n    async onQualityChange(quality) {\r\n      try {\r\n        this.quality = quality;\r\n        const { data } = await api.viewSkipVideo({\r\n          cameraId: this.camera.cameraId,\r\n          quality: quality,\r\n        });\r\n        this.$set(this.camera, \"streamingURL\", data.data[0].streamingURL);\r\n      } catch (error) {\r\n        throw new Error(error);\r\n      }\r\n    },\r\n    async onExport() {\r\n      try {\r\n        const streamingURL = this.camera.streamingURL;\r\n        const fileName = `BOOKMARK-${this.camera.cameraName}-${this.prettyDate(\r\n          this.camera.startTime\r\n        )}-${this.duration}`;\r\n\r\n        await this.downloadFile(streamingURL, \"video/mp4\", fileName);\r\n      } catch (error) {\r\n        throw new Error(error);\r\n      }\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.screen {\r\n  min-height: 78vh;\r\n}\r\n.icon {\r\n  @apply w-5;\r\n  color: #1372ac;\r\n}\r\n.title {\r\n  color: #777;\r\n  font-weight: 500;\r\n}\r\n</style>\r\n<style lang=\"scss\" scoped>\r\n@import \"@/assets/scss/player/views.scss\";\r\n</style>\r\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!./show.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!./show.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./show.vue?vue&type=template&id=11c83621&scoped=true\"\nimport script from \"./show.vue?vue&type=script&lang=js\"\nexport * from \"./show.vue?vue&type=script&lang=js\"\nimport style0 from \"./show.vue?vue&type=style&index=0&id=11c83621&prod&lang=scss&scoped=true\"\nimport style1 from \"./show.vue?vue&type=style&index=1&id=11c83621&prod&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  \"11c83621\",\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!./show.vue?vue&type=style&index=0&id=11c83621&prod&lang=scss&scoped=true\"","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!./show.vue?vue&type=style&index=1&id=11c83621&prod&lang=scss&scoped=true\"","import axios from \"axios\";\r\nimport { createBlobFile } from \"@/composables\";\r\n\r\nexport default {\r\n  data: () => ({\r\n    percentageDownload: 0,\r\n    isDownloading: false,\r\n  }),\r\n  methods: {\r\n    async downloadFile(url, type, name) {\r\n      this.isDownloading = true;\r\n      await axios\r\n        .get(url, {\r\n          responseType: \"blob\",\r\n          onDownloadProgress: (progressEvent) => {\r\n            const total = progressEvent.total;\r\n            const current = progressEvent.loaded;\r\n\r\n            const percentCompleted = Math.floor((current / total) * 100);\r\n            this.percentageDownload = percentCompleted;\r\n          },\r\n        })\r\n        .then((res) => {\r\n          createBlobFile(res.data, type, name);\r\n          this.isDownloading = false;\r\n        })\r\n        .catch(() => {\r\n          this.isDownloading = false;\r\n        });\r\n    },\r\n  },\r\n};\r\n"],"sourceRoot":""}