{"version":3,"sources":["webpack:///./src/views/alarm/detail.vue?28a0","webpack:///./src/views/alarm/detail.vue","webpack:///src/views/alarm/detail.vue","webpack:///./src/views/alarm/detail.vue?b5a6","webpack:///./src/views/alarm/detail.vue?36c0","webpack:///./src/views/alarm/detail.vue?5163","webpack:///./src/composables/mixins.js"],"names":["render","_vm","this","_c","_self","staticClass","_v","attrs","_s","detail","siteName","cameraName","parameterEventName","time","prettyDate","_e","isVisibleVideo","streamingURL","videoOptions","startTime","endTime","on","onSkip","onExport","onSnapshot","onQualityChange","$event","movePTZ","item","isSnapshot","isDownloading","percentageDownload","staticRenderFns","name","components","Player","DownloadBar","mixins","Mixins","data","quality","computed","duration","start","getTime","end","toDuration","moment","subtract","Date","add","mounted","_mounted","_asyncToGenerator","regeneratorRuntime","mark","_callee","wrap","_context","prev","next","getDetail","stop","apply","arguments","methods","date","format","_getDetail","_callee2","id","_yield$api$getAlarmDe","_context2","$vs","loading","$route","params","api","getAlarmDetail","sent","close","t0","_onSnapshot","_callee3","_yield$api$viewSnapsh","_context3","viewSnapshot","cameraId","camera","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-f99d2654.a2b6aa34.js","sourcesContent":["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!./detail.vue?vue&type=style&index=1&id=7f990d56&prod&lang=scss&scoped=true\"","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-sm 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.detail.cameraName))])],1)]),_c('div',{staticClass:\"mb-5 pt-1\"},[_c('h4',{staticClass:\"title mb-3 font-semibold text-sm uppercase\"},[_vm._v(\"Event Code\")]),_c('div',{staticClass:\"flex items-center space-x-3\"},[_c('feather-icon',{staticClass:\"icon\",attrs:{\"icon\":\"CodeIcon\"}}),_c('span',{staticClass:\"font-semibold\"},[_vm._v(_vm._s(_vm.detail.parameterEventName))])],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(\"Alarm Time\")]),(_vm.detail.time)?_c('p',{staticClass:\"font-semibold\"},[_vm._v(\"\\n          \"+_vm._s(_vm.prettyDate(_vm.detail.time))+\"\\n        \")]):_vm._e()])])]),_c('div',{staticClass:\"flex-1 relative\"},[(_vm.isVisibleVideo)?_c('Player',{attrs:{\"title\":_vm.detail.cameraName,\"isPTZ\":false,\"url\":_vm.detail.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-sm 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\">{{ detail.cameraName }}</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"mb-5 pt-1\">\r\n          <h4 class=\"title mb-3 font-semibold text-sm uppercase\">Event Code</h4>\r\n          <div class=\"flex items-center space-x-3\">\r\n            <feather-icon class=\"icon\" icon=\"CodeIcon\" />\r\n            <span class=\"font-semibold\">{{ detail.parameterEventName }}</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\">Alarm Time</span>\r\n            <p v-if=\"detail.time\" class=\"font-semibold\">\r\n              {{ prettyDate(detail.time) }}\r\n            </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=\"detail.cameraName\"\r\n          :isPTZ=\"false\"\r\n          :url=\"detail.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\n  import moment from \"moment\";\r\n  import api from \"@/api\";\r\n  import Mixins from \"@/composables/mixins\";\r\n  import { toDuration, getTime, GMTToLocalStringTime } from \"@/composables\";\r\n  import { videoOptions } from \"@/views/views/states\";\r\n  import Player from \"@/components/player/VideoPlayer.vue\";\r\n  import DownloadBar from \"@/components/player/DownloadBar.vue\";\r\n  export 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      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) {\r\n          const start = getTime(this.startTime);\r\n          const end = getTime(this.endTime);\r\n          return toDuration({\r\n            startTime: start,\r\n            endTime: end,\r\n          });\r\n        }\r\n      },\r\n      startTime() {\r\n        const start = moment(this.detail.time).subtract(5, 'minutes')\r\n        return new Date(start).getTime();\r\n      },\r\n      endTime() {\r\n        const end = moment(this.detail.time).add(5, 'minutes')\r\n        return new Date(end).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        return moment(date).format(\"dddd, DD MMM YYYY hh:mm\")\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.getAlarmDetail(id);\r\n          this.detail = data.data[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!./detail.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!./detail.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./detail.vue?vue&type=template&id=7f990d56&scoped=true\"\nimport script from \"./detail.vue?vue&type=script&lang=js\"\nexport * from \"./detail.vue?vue&type=script&lang=js\"\nimport style0 from \"./detail.vue?vue&type=style&index=0&id=7f990d56&prod&lang=scss&scoped=true\"\nimport style1 from \"./detail.vue?vue&type=style&index=1&id=7f990d56&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  \"7f990d56\",\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!./detail.vue?vue&type=style&index=0&id=7f990d56&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":""}