{"version":3,"sources":["webpack:///src/components/ThumbnailListItem.vue","webpack:///src/components/loader/ImageSkeleton.vue","webpack:///./src/components/ThumbnailListItem.vue?7d2e","webpack:///./src/components/loader/ImageSkeleton.vue?a6d0","webpack:///./src/components/ThumbnailListItem.vue?0caf","webpack:///./src/components/ThumbnailListItem.vue?d3b7","webpack:///./src/components/ThumbnailListItem.vue","webpack:///./src/components/ThumbnailListItem.vue?14f4","webpack:///./src/components/ThumbnailListItem.vue?1605","webpack:///./src/components/ThumbnailListItem.vue?25fd","webpack:///./src/components/loader/ImageSkeleton.vue","webpack:///./src/components/loader/ImageSkeleton.vue?eb7b","webpack:///./src/components/loader/ImageSkeleton.vue?2200"],"names":["props","item","type","index","imgLoaders","streamingUrlLoading","components","mixins","data","deviceStatusList","unisCustomerCd","storeData","thumbnail","thumbnailKey","getKvsThumbnailTimer","getThumbnailTimer","filters","statusFormat","mounted","methods","td","onLoad","value","checkRoute","from","name","customerName","groupId","prevRouterCheck","sessionStorage","path","contractCd","portNo","setTimeout","res","thumbnailError","event","errorMsg","errorBox","beforeDestroy","loaderCount","width","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CyF;AAC7D;AACF;AACX;EACfA;IACAC;MAAAC;IAAA;IACAC;MAAAD;IAAA;IACAE;MAAAF;IAAA;IACAG;MAAAH;IAAA;EACA;EACAI,aAEA;EACAC;EACAC;IACAC;IACAC;IACAC;IACA;IACAC;IACAC;IAAA;IACAC;IACAC;EACA;EACAC;IACAC;MACA;QACA;MACA;QACA;MACA;IACA;EACA;EACAC;IACA;MACA;MACA;IACA;;IAEA;IACA;IACA;IACA;IACA;IACA;MACA;QACA;QACA;MACA;QAEA;UACA;UACA;QACA;UACA;UACA;QACA;MACA;IACA;EACA;EACAC;IACAC;MACA;IACA;IACAC;MACA;QACAlB;QAAAmB;MACA;IACA;IACAC;MACA;QACA;UAAAC;UAAAC;QAAA;MACA;QACA;UAAA;UACA;YAAAD;YAAAC;UAAA;QACA;UAAA;UACA;YAAAD;YAAAC;UAAA;QACA;MACA;IACA;IACA;MACA;MACA;MACA;MACA;MACA;QACA;UAAA;UACA;YACAf;YACAgB;YACAC;UACA;QACA;UACA;YACAjB;YACAgB;UACA;QACA;MACA;QACA;QACA;MACA;IACA;IACA;MACA;MACA;MACA;MACA;QACA;UAAA;UACA;YACAhB;YACAgB;YACAC;UACA;QACA;UACA;YACAjB;YACAgB;UACA;QACA;MACA;QACA;QACA;MACA;IACA;IACAE;MACA;QACAC;UACAJ;UAAAK;QACA;MACA;QACAD;UACAJ;UAAAK;QACA;MACA;IACA;IACA;MACA;QACA;UACA;UACA;YACA;UACA;QACA;MACA;QACA;;QAEA;QACA,6BACA;MACA;IACA;IACA;MACA;QAAAC;QAAAC;MAAA;MACA;QACA;QACA;QACAC;UACA;UACA;QACA;QACA;MACA;QAEA;QACA;MACA;IACA;IACA;MACA;QAAAF;QAAAC;MAAA;MACA;MACA;QACAE;MACA;QAEA;MACA;MACA;IACA;IACAC;MACA;QACAhC;QAAAmB;MACA;MACAc;MACA;MACAC;MACA;MACAC;MACAA;MACAA;MACAA;MACAA;MACAF;IACA;EACA;EACAG;IACA;IACA;EACA;AACA,CAAC,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvO2B;AACb;EACfvC;IACAwC;IACAC;IACAC;EACA;EACApC,aAEA;EACAC;EACAC,cAEA;AACA,CAAC,E;;;;;;;;;;;;AC5BD;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK,mCAAmC,aAAa,EAAE;AACvD;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,oBAAoB;AAChD,sBAAsB,aAAa;AACnC;AACA;AACA;AACA,iBAAiB;AACjB,eAAe;AACf,aAAa;AACb;AACA;AACA;AACA;AACA;AACA,kCAAkC,gCAAgC;AAClE,4BAA4B,qBAAqB;AACjD;AACA;AACA;AACA,uBAAuB;AACvB;AACA;AACA,uBAAuB;AACvB,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB;AACvB,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B,gCAAgC;AAC9D,qBAAqB;AACrB;AACA,mCAAmC,2BAA2B;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,oBAAoB;AAChD,sBAAsB,aAAa;AACnC;AACA;AACA;AACA,iBAAiB;AACjB,eAAe;AACf,aAAa;AACb;AACA;AACA;AACA,8BAA8B,gCAAgC;AAC9D,wBAAwB,MAAM,mBAAO,CAAC,oFAAqC,GAAG;AAC9E,eAAe;AACf;AACA;AACA;AACA;AACA,0BAA0B,gCAAgC;AAC1D,iBAAiB;AACjB;AACA,+BAA+B,2BAA2B;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB;AACvB,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACpJA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK,mCAAmC,8BAA8B,EAAE;AACxE;AACA;AACA;AACA,SAAS,mCAAmC,kBAAkB,EAAE;AAChE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,6BAA6B;AACnD,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB,eAAe;AACf;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;ACzCA;AACA,kCAAkC,mBAAO,CAAC,wGAAmD;AAC7F;AACA;AACA,cAAc,QAAS,sBAAsB,mCAAmC,uBAAuB,kBAAkB,GAAG,4BAA4B,+BAA+B,GAAG,kCAAkC,2BAA2B,eAAe,GAAG,yCAAyC,sMAAsM,qBAAqB,4BAA4B,uBAAuB,cAAc,0CAA0C,mBAAmB,sBAAsB,GAAG,kCAAkC,uBAAuB,WAAW,GAAG,6CAA6C,uBAAuB,aAAa,cAAc,qCAAqC,GAAG;AACl3B;AACA;;;;;;;;;;;;ACNA;;AAEA;AACA,cAAc,mBAAO,CAAC,2xBAAic;AACvd;AACA,4CAA4C,QAAS;AACrD;AACA;AACA,UAAU,mBAAO,CAAC,0HAA6D;AAC/E,8CAA8C,qCAAqC;AACnF;AACA,GAAG,KAAU,EAAE,E;;;;;;;;;;;;ACXf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA4G;AACvC;AACL;AACsC;;;AAGtG;AAC0F;AAC1F,gBAAgB,2GAAU;AAC1B,EAAE,uFAAM;AACR,EAAE,wGAAM;AACR,EAAE,iHAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACmG;AAC/C;AACqB;AACzE,oGAAiB,aAAa,uEAAI,CAAC,uGAAe,CAAC;;;AAGnD;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACe,gF;;;;;;;;;;;;AC9Cf;AAAA;AAAA,wCAA8R,CAAgB,kVAAG,EAAC,C;;;;;;;;;;;;ACAlT;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAwG;AACvC;AACL;;;AAG5D;AAC6F;AAC7F,gBAAgB,2GAAU;AAC1B,EAAE,mFAAM;AACR,EAAE,oGAAM;AACR,EAAE,6GAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACsG;AAClD;AACA;AACqB;AACzE,oGAAiB,aAAa,uEAAI,CAAC,uEAAI,CAAC,uGAAe,CAAC;;;AAGxD;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACe,gF;;;;;;;;;;;;AC9Cf;AAAA;AAAA,wCAAsS,CAAgB,8UAAG,EAAC,C;;;;;;;;;;;;ACA1T;AAAA;AAAA;AAAA;AAAA;AAAA","file":"js/Dashboard~PrivateStoreCCTV~StoreCCTV.js","sourcesContent":["<template>\n\t<v-col class=\"ma-0 pa-0\" cols=\"12\">\n\t\t<v-col v-if=\"item.streamAble == true\" \n\t\t\t@click=\"goVideoPlayer()\" \n\t\t\tclass=\"thumbnail_box online ma-0 pa-0\" cols=\"12\" style=\"cursor: pointer;\">\n\t\t\t<!-- <img v-if=\"item.thumbnail != undefined\" style=\"height:100%;width:100%;\" @load=\"onLoad(index)\"\n\t\t\t\tclass=\"ma-0 pa-0\" :src=\"item.thumbnail\" />\n        \n      <img v-if=\"item.thumbnail == undefined\" style=\"height:100%;width:100%;\" class=\"ma-0 pa-0\" \n\t\t\tsrc=\"@/assets/images/grey_background.png\" @load=\"onLoad(index)\"/>\n      <v-col v-if=\"item.thumbnail == undefined\" class=\"ma-0 pa-0\" id=\"thumbnail_device_status\">\n        <v-col class=\"ma-0 pa-0\">{{td('tempThumnailError')}}</v-col>\n      </v-col> -->\n\t\t\t<img v-if=\"thumbnail != null\" :key=\"thumbnailKey\" style=\"height:100%;width:100%;\" @load=\"onLoad(index)\" @error=\"thumbnailError(index, $event)\"\n\t\t\t\tclass=\"ma-0 pa-0\" :src=\"thumbnail\" />\n\t\t\t<v-col v-if=\"streamingUrlLoading == false\" class=\"ma-0 pa-0 pl-2\"\n\t\t\t\tcols=\"12\" id=\"thumbnail_title_box\" align=\"left\">\n\t\t\t\t{{ item.cameraName }}\n\t\t\t</v-col>\n\t\t\t<v-skeleton-loader id=\"img_skeleton\" width='100%' height='100%' \n\t\t\t\t:boilerplate=\"false\" elevation=\"0\" dark  type=\"image\"\n\t\t\t\tv-if=\"imgLoaders[index] == true\">\n\t\t\t</v-skeleton-loader>\n\t\t\t<v-skeleton-loader id=\"img_skeleton\" width='100%' height='100%' \n\t\t\t\t:boilerplate=\"false\" elevation=\"0\" dark  type=\"image\"\n\t\t\t\tv-else-if=\"thumbnail === null\">\n\t\t\t</v-skeleton-loader>\n\t\t\t<v-col v-if=\"thumbnail === null\" class=\"ma-0 pa-0\" id=\"thumbnail_device_status\">\n        <v-col class=\"ma-0 pa-0\">{{td('fetchingThumbnail')}}</v-col>\n      </v-col>\n\t\t</v-col>\n\t\t<v-col v-else \n\t\t\tclass=\"thumbnail_box ma-0 pa-0\" cols=\"12\" \n\t\t\tstyle=\"cursor: pointer;\" @click=\"noUrlGoVideoPlayer(index)\">\n\t\t\t<img style=\"height:100%;width:100%;\" class=\"ma-0 pa-0\" \n\t\t\t\tsrc=\"@/assets/images/grey_background.png\" />\n      <v-col class=\"ma-0 pa-0\" id=\"thumbnail_device_status\">\n        <v-col class=\"ma-0 pa-0\">{{t('offline')}}</v-col>\n      </v-col>\n\t\t  <v-col class=\"ma-0 pa-0 pl-2\" cols=\"12\" id=\"thumbnail_title_box\" align=\"left\"\n\t\t  \tv-if=\"streamingUrlLoading == false\">{{ item.cameraName }}</v-col>\n    </v-col>\n\t</v-col>\n</template>\n\n<script>\nimport { THUMBNAIL_REFRESH_INTERVAL, THUMBNAIL_KVS_REFRESH_INTERVAL } from '@/constants';\nimport mixin from '@/mixin';\nimport AWS from 'aws-sdk';\nexport default {\n\tprops: {\n\t\titem: { type: Object },\n\t\tindex: { type: Number },\n\t\timgLoaders: { type: Array },\n\t\tstreamingUrlLoading: { type: Boolean },\n\t},\n\tcomponents: {\n\t\t\n\t},\n\tmixins: [mixin.common],\n\tdata: () => ({\n\t\tdeviceStatusList: ['5', '10', '12', '17', '19', '20'],\n\t\tunisCustomerCd: '',\n    storeData: {},\n\t\t// 처음에는 loader로 띄우고 KVS에서 thumbnail가져오면 업데이트, 실패시 item.thumbnail 보여주도록 수정\n\t\tthumbnail: null,\n\t\tthumbnailKey: 0, // Key 값을 추가하여 강제 렌더링\n\t\tgetKvsThumbnailTimer: null,\n\t\tgetThumbnailTimer: null,\n\t}),\n\tfilters: {\n\t\tstatusFormat: function(str) {\n\t\t\tif(str != undefined) {\n\t\t\t\treturn str.length > 20 ? str.substring(0,20) + '...' : str;\n\t\t\t} else {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t},\n\t},\n\tmounted() {\n\t\tif(this.$route.name == 'storeCCTV') {\n\t\t\tthis.unisCustomerCd = this.$route.query.unisCustomerCd;\n    \tthis.storeData = this.$store.getters.getStoreData;\n\t\t}\n\t\t\n\t\t// AWS.config.region = process; // Region\n    // AWS.config.credentials = new AWS.CognitoIdentityCredentials({\n    //   IdentityPoolId: 'ap-southeast-1:c555a718-3032-4135-bad7-5e3d888c8605',\n    //   RoleArn: 'arn:aws:iam::509004160589:role/Cognito_UeyesStgPoolUnauth_Role'\n    // });\n\t\tif (this.item.streamAble == true) {\n\t\t\tif (this.$store.state.isMobile) {\n\t\t\t\tthis.thumbnail = this.item.thumbnail;\n\t\t\t\tthis.getKvsThumbnailTimer = null;\n\t\t\t} else {\n\t\t\t\tconsole.log(this.item);\n\t\t\t\tif (this.item.kvs && this.item.kvs.streaming) {\n\t\t\t\t\tthis.getKvsThumbnail();\n\t\t\t\t\tthis.getKvsThumbnailTimer = setInterval(this.getKvsThumbnail, THUMBNAIL_KVS_REFRESH_INTERVAL);\n\t\t\t\t} else {\n\t\t\t\t\tthis.requestUpdateThumbnail();\n\t\t\t\t\tthis.getThumbnailTimer = setInterval(this.requestUpdateThumbnail, THUMBNAIL_REFRESH_INTERVAL);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\tmethods: {\n    td(t) {\n      return this.$t(\"lang.dashboard.\" + t);\n    },\n\t\tonLoad(index) {\n\t\t\tthis.$emit('onLoad', {\n\t\t\t\tindex, value: false\n\t\t\t})\n\t\t},\n\t\tcheckRoute() {\n\t\t\tif(this.$route.path.includes('dashboard') || this.$route.path.includes('private')) {\n\t\t\t\tthis.$store.commit('setPlayerFromWhere', { from: 'dashboard', name: 'dashboard' });\n\t\t\t} else {\n\t\t\t\tif(this.$route.query.groupId) { // 점포그룹\n\t\t\t\t\tthis.$store.commit('setPlayerFromWhere', { from: 'group', name: 'group' });\n\t\t\t\t} else { // 점포검색\n\t\t\t\t\tthis.$store.commit('setPlayerFromWhere', { from: 'search', name: 'search' });\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tasync goVideoPlayer() {\n\t\t\tthis.$vloading.show();\n\t\t\tthis.checkRoute();\n\t\t\tawait this.$store.commit('setStreamInfo', this.item);\n\t\t\tthis.$vloading.hide();\n\t\t\tif(this.$route.name === 'storeCCTV') {\n\t\t\t\tif(this.$route.query.groupId) { // 점포그룹\n\t\t\t\t\tthis.pushRoute('/video-player', {\n\t\t\t\t\t\tunisCustomerCd: this.unisCustomerCd,\n\t\t\t\t\t\tcustomerName: this.storeData.customerName,\n\t\t\t\t\t\tgroupId: this.$route.query.groupId\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tthis.pushRoute('/video-player', {\n\t\t\t\t\t\tunisCustomerCd: this.unisCustomerCd,\n\t\t\t\t\t\tcustomerName: this.storeData.customerName\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.prevRouterCheck();\n\t\t\t\tthis.pushRoute('/video-player', {});\n\t\t\t}\n    },\n\t\tasync noUrlGoVideoPlayer() {\n\t\t\tthis.checkRoute();\n\t\t\tawait this.$store.commit('setVideoStreamingUrl', '');\n      await this.$store.commit('setStreamInfo', this.item);\n      if(this.$route.name === 'storeCCTV') {\n        if(this.$route.query.groupId) { // 점포그룹\n          this.pushRoute('/video-player', {\n            unisCustomerCd: this.unisCustomerCd,\n            customerName: this.storeData.customerName,\n            groupId: this.$route.query.groupId\n          });\n        } else {\n          this.pushRoute('/video-player', {\n            unisCustomerCd: this.unisCustomerCd,\n            customerName: this.storeData.customerName\n          });\n        }\n      } else {\n        this.prevRouterCheck();\n        this.pushRoute('/video-player', {});\n      }\n\t\t},\n\t\tprevRouterCheck() {\n\t\t\tif(this.$route.path.includes('dashboard')) {\n\t\t\t\tsessionStorage.setItem('prevRoute', JSON.stringify({\n\t\t\t\t\tname: 'dashboard', path: '/dashboard'\n\t\t\t\t}));\n\t\t\t} else {\n\t\t\t\tsessionStorage.setItem('prevRoute', JSON.stringify({\n\t\t\t\t\tname: 'privateStoreCCTV', path: '/private/store-cctv'\n\t\t\t\t}));\n\t\t\t}\n\t\t},\n\t\tasync getKvsThumbnail() {\n\t\t\ttry {\n\t\t\t\tif (this.item.kvs && this.item.kvs.streaming) {\n\t\t\t\t\tconst kvsGetImageResult = await this.networkController.awsGetThumbnail(this.item.streamName);\n\t\t\t\t\tif (kvsGetImageResult) {\n\t\t\t\t\t\tthis.thumbnail = \"data:image/png;base64,\" + kvsGetImageResult.ImageContent;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\t// 에러의 대표 text와 item의 information을 출력하자\n\t\t\t\tconsole.info(error.message, this.item.cameraName);\n\t\t\t\t// 오류 발생시 1분 전 취득한 thumbnail이 있다면 활용, 없으면 S3의 것 가져옴.\n\t\t\t\tif (this.thumbnail === null)\n\t\t\t\t\tthis.thumbnail = this.item.thumbnail;\n\t\t\t}\n\t\t},\n\t\tasync requestUpdateThumbnail() {\n\t\t\tconst { contractCd, portNo } = this.item;\n\t\t\ttry {\n\t\t\t\tawait this.networkController.updateCameraThumbnail({}, contractCd, portNo);\n\t\t\t\t// 요청 후 5초 뒤에 썸네일 가져옴\n\t\t\t\tsetTimeout(async () => {\n\t\t\t\t\tthis.thumbnail = await this.getThumbnail();\n\t\t\t\t\tthis.thumbnailKey += 1; // Key 값을 변경하여 강제 렌더링\n\t\t\t\t}, 3000);\n\t\t\t\tthis.thumbnailKey += 1; // Key 값을 변경하여 강제 렌더링\n\t\t\t} catch (error) {\n\t\t\t\tconsole.info(error.message, this.item.cameraName);\n\t\t\t\tthis.thumbnail = this.item.thumbnail;\n\t\t\t\tthis.thumbnailKey += 1; // Key 값을 변경하여 강제 렌더링\n\t\t\t}\n\t\t},\n\t\tasync getThumbnail() {\n\t\t\tconst { contractCd, portNo } = this.item;\n\t\t\tlet res = null;\n\t\t\ttry {\n\t\t\t\tres = await this.networkController.getCameraThumbnail({}, contractCd, portNo);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.info(error.message, this.item.cameraName);\n\t\t\t\treturn this.item.thumbnail;\n\t\t\t}\n\t\t\treturn res.data;\n\t\t},\n    thumbnailError(index, event) {\n      this.$emit('onLoad', {\n\t\t\t\tindex, value: false\n\t\t\t});\n      event.target.style.display = 'none';\n      const errorMsg = document.createElement('div');\n      errorMsg.innerText = 'サムネイル・エラー';\n      const errorBox = document.createElement('div');\n      errorBox.classList.add('ma-0', 'pa-0');\n      errorBox.style.backgroundColor = 'rgb(69, 69, 69)';\n      errorBox.style.height = '100%';\n      errorBox.style.alignContent = 'center';\n      errorBox.appendChild(errorMsg);\n      event.target.parentElement.appendChild(errorBox);\n    }\n\t},\n\tbeforeDestroy() {\n\t\tif (this.getKvsThumbnailTimer) clearInterval(this.getKvsThumbnailTimer);\n\t\tif (this.getThumbnailTimer) clearInterval(this.getThumbnailTimer);\n\t}\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.thumbnail_box {\n\tposition: relative;\n\theight: 13rem;\n}\n.online {\n\ttransition: transform .2s;\n\t&:hover {\n\t\ttransform: scale(1.07);\n\t\tz-index: 3;\n\t}\n}\n#thumbnail_title_box {\n\t/**\n\t white-space: nowrap을 통해 줄바꿈을 방지하고,\n\t overflow: hidden을 통해 텍스트가 넘치는 부분을 감추며,\n\t text-overflow: ellipsis를 통해 넘치는 부분에 ... 표시를 추가하여\n\t 텍스트가 넘치는 부분을 간결하게 표현\n\t */\n\twhite-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\tposition: absolute;\n\tbottom: 0;\n\tbackground-color: rgba(0, 0, 0, 0.75);\n\tcolor: #BEBEBE;\n\tfont-size: 0.8rem;\n}\n#img_skeleton {\n\tposition: absolute;\n\ttop: 0;\n}\n#thumbnail_device_status {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -55%);\n}\n</style>","<template>\n\t<v-col class=\"ma-0 pa-0\" cols=\"12\" align=\"center\">\n\t\t<v-row class=\"ma-0 pa-0\" align=\"center\">\n\t\t\t<v-col class=\"ma-0 pa-2\" cols=\"4\" align=\"center\"\n\t\t\t\tv-for=\"item in loaderCount\" :key=\"item\">\n\t\t\t\t<v-skeleton-loader :boilerplate=\"false\" elevation=\"0\" dark \n\t\t\t\t\ttype=\"image\" :width=\"width\" :height=\"height\"\n\t\t\t\t></v-skeleton-loader>\n\t\t\t</v-col>\n\t\t</v-row>\n\t</v-col>\n</template>\n\n<script>\nimport mixin from '@/mixin';\nexport default {\n\tprops: {\n\t\tloaderCount: Number,\n\t\twidth: String,\n\t\theight: String\n\t},\n\tcomponents: {\n\t\t\n\t},\n\tmixins: [mixin.common],\n\tdata: () => ({\n\t\t\n\t}),\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n</style>","var render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"v-col\",\n    { staticClass: \"ma-0 pa-0\", attrs: { cols: \"12\" } },\n    [\n      _vm.item.streamAble == true\n        ? _c(\n            \"v-col\",\n            {\n              staticClass: \"thumbnail_box online ma-0 pa-0\",\n              staticStyle: { cursor: \"pointer\" },\n              attrs: { cols: \"12\" },\n              on: {\n                click: function ($event) {\n                  return _vm.goVideoPlayer()\n                },\n              },\n            },\n            [\n              _vm.thumbnail != null\n                ? _c(\"img\", {\n                    key: _vm.thumbnailKey,\n                    staticClass: \"ma-0 pa-0\",\n                    staticStyle: { height: \"100%\", width: \"100%\" },\n                    attrs: { src: _vm.thumbnail },\n                    on: {\n                      load: function ($event) {\n                        return _vm.onLoad(_vm.index)\n                      },\n                      error: function ($event) {\n                        return _vm.thumbnailError(_vm.index, $event)\n                      },\n                    },\n                  })\n                : _vm._e(),\n              _vm.streamingUrlLoading == false\n                ? _c(\n                    \"v-col\",\n                    {\n                      staticClass: \"ma-0 pa-0 pl-2\",\n                      attrs: {\n                        cols: \"12\",\n                        id: \"thumbnail_title_box\",\n                        align: \"left\",\n                      },\n                    },\n                    [_vm._v(\" \" + _vm._s(_vm.item.cameraName) + \" \")]\n                  )\n                : _vm._e(),\n              _vm.imgLoaders[_vm.index] == true\n                ? _c(\"v-skeleton-loader\", {\n                    attrs: {\n                      id: \"img_skeleton\",\n                      width: \"100%\",\n                      height: \"100%\",\n                      boilerplate: false,\n                      elevation: \"0\",\n                      dark: \"\",\n                      type: \"image\",\n                    },\n                  })\n                : _vm.thumbnail === null\n                ? _c(\"v-skeleton-loader\", {\n                    attrs: {\n                      id: \"img_skeleton\",\n                      width: \"100%\",\n                      height: \"100%\",\n                      boilerplate: false,\n                      elevation: \"0\",\n                      dark: \"\",\n                      type: \"image\",\n                    },\n                  })\n                : _vm._e(),\n              _vm.thumbnail === null\n                ? _c(\n                    \"v-col\",\n                    {\n                      staticClass: \"ma-0 pa-0\",\n                      attrs: { id: \"thumbnail_device_status\" },\n                    },\n                    [\n                      _c(\"v-col\", { staticClass: \"ma-0 pa-0\" }, [\n                        _vm._v(_vm._s(_vm.td(\"fetchingThumbnail\"))),\n                      ]),\n                    ],\n                    1\n                  )\n                : _vm._e(),\n            ],\n            1\n          )\n        : _c(\n            \"v-col\",\n            {\n              staticClass: \"thumbnail_box ma-0 pa-0\",\n              staticStyle: { cursor: \"pointer\" },\n              attrs: { cols: \"12\" },\n              on: {\n                click: function ($event) {\n                  return _vm.noUrlGoVideoPlayer(_vm.index)\n                },\n              },\n            },\n            [\n              _c(\"img\", {\n                staticClass: \"ma-0 pa-0\",\n                staticStyle: { height: \"100%\", width: \"100%\" },\n                attrs: { src: require(\"@/assets/images/grey_background.png\") },\n              }),\n              _c(\n                \"v-col\",\n                {\n                  staticClass: \"ma-0 pa-0\",\n                  attrs: { id: \"thumbnail_device_status\" },\n                },\n                [\n                  _c(\"v-col\", { staticClass: \"ma-0 pa-0\" }, [\n                    _vm._v(_vm._s(_vm.t(\"offline\"))),\n                  ]),\n                ],\n                1\n              ),\n              _vm.streamingUrlLoading == false\n                ? _c(\n                    \"v-col\",\n                    {\n                      staticClass: \"ma-0 pa-0 pl-2\",\n                      attrs: {\n                        cols: \"12\",\n                        id: \"thumbnail_title_box\",\n                        align: \"left\",\n                      },\n                    },\n                    [_vm._v(_vm._s(_vm.item.cameraName))]\n                  )\n                : _vm._e(),\n            ],\n            1\n          ),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"v-col\",\n    { staticClass: \"ma-0 pa-0\", attrs: { cols: \"12\", align: \"center\" } },\n    [\n      _c(\n        \"v-row\",\n        { staticClass: \"ma-0 pa-0\", attrs: { align: \"center\" } },\n        _vm._l(_vm.loaderCount, function (item) {\n          return _c(\n            \"v-col\",\n            {\n              key: item,\n              staticClass: \"ma-0 pa-2\",\n              attrs: { cols: \"4\", align: \"center\" },\n            },\n            [\n              _c(\"v-skeleton-loader\", {\n                attrs: {\n                  boilerplate: false,\n                  elevation: \"0\",\n                  dark: \"\",\n                  type: \"image\",\n                  width: _vm.width,\n                  height: _vm.height,\n                },\n              }),\n            ],\n            1\n          )\n        }),\n        1\n      ),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \"@charset \\\"UTF-8\\\";\\n.thumbnail_box[data-v-b8aff946] {\\n  position: relative;\\n  height: 13rem;\\n}\\n.online[data-v-b8aff946] {\\n  transition: transform 0.2s;\\n}\\n.online[data-v-b8aff946]:hover {\\n  transform: scale(1.07);\\n  z-index: 3;\\n}\\n#thumbnail_title_box[data-v-b8aff946] {\\n  /**\\n   white-space: nowrap을 통해 줄바꿈을 방지하고,\\n   overflow: hidden을 통해 텍스트가 넘치는 부분을 감추며,\\n   text-overflow: ellipsis를 통해 넘치는 부분에 ... 표시를 추가하여\\n   텍스트가 넘치는 부분을 간결하게 표현\\n   */\\n  white-space: nowrap;\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  position: absolute;\\n  bottom: 0;\\n  background-color: rgba(0, 0, 0, 0.75);\\n  color: #BEBEBE;\\n  font-size: 0.8rem;\\n}\\n#img_skeleton[data-v-b8aff946] {\\n  position: absolute;\\n  top: 0;\\n}\\n#thumbnail_device_status[data-v-b8aff946] {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -55%);\\n}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/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-loader/lib/index.js??vue-loader-options!./ThumbnailListItem.vue?vue&type=style&index=0&id=b8aff946&lang=scss&scoped=true&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"c19c9266\", content, false, {\"sourceMap\":false,\"shadowMode\":false});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/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-loader/lib/index.js??vue-loader-options!./ThumbnailListItem.vue?vue&type=style&index=0&id=b8aff946&lang=scss&scoped=true&\", function() {\n     var newContent = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/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-loader/lib/index.js??vue-loader-options!./ThumbnailListItem.vue?vue&type=style&index=0&id=b8aff946&lang=scss&scoped=true&\");\n     if(newContent.__esModule) newContent = newContent.default;\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}","import { render, staticRenderFns } from \"./ThumbnailListItem.vue?vue&type=template&id=b8aff946&scoped=true&\"\nimport script from \"./ThumbnailListItem.vue?vue&type=script&lang=js&\"\nexport * from \"./ThumbnailListItem.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ThumbnailListItem.vue?vue&type=style&index=0&id=b8aff946&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  \"b8aff946\",\n  null\n  \n)\n\n/* vuetify-loader */\nimport installComponents from \"!../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VSkeletonLoader } from 'vuetify/lib/components/VSkeletonLoader';\ninstallComponents(component, {VCol,VSkeletonLoader})\n\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/codebuild/output/src127081106/src/ueyes-front/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('b8aff946')) {\n      api.createRecord('b8aff946', component.options)\n    } else {\n      api.reload('b8aff946', component.options)\n    }\n    module.hot.accept(\"./ThumbnailListItem.vue?vue&type=template&id=b8aff946&scoped=true&\", function () {\n      api.rerender('b8aff946', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"src/components/ThumbnailListItem.vue\"\nexport default component.exports","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ThumbnailListItem.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ThumbnailListItem.vue?vue&type=script&lang=js&\"","export * from \"-!../../node_modules/vue-style-loader/index.js??ref--9-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/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-loader/lib/index.js??vue-loader-options!./ThumbnailListItem.vue?vue&type=style&index=0&id=b8aff946&lang=scss&scoped=true&\"","export * from \"-!../../node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"e5f0efc2-vue-loader-template\\\"}!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ThumbnailListItem.vue?vue&type=template&id=b8aff946&scoped=true&\"","import { render, staticRenderFns } from \"./ImageSkeleton.vue?vue&type=template&id=279763bc&scoped=true&\"\nimport script from \"./ImageSkeleton.vue?vue&type=script&lang=js&\"\nexport * from \"./ImageSkeleton.vue?vue&type=script&lang=js&\"\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  \"279763bc\",\n  null\n  \n)\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VRow } from 'vuetify/lib/components/VGrid';\nimport { VSkeletonLoader } from 'vuetify/lib/components/VSkeletonLoader';\ninstallComponents(component, {VCol,VRow,VSkeletonLoader})\n\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/codebuild/output/src127081106/src/ueyes-front/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('279763bc')) {\n      api.createRecord('279763bc', component.options)\n    } else {\n      api.reload('279763bc', component.options)\n    }\n    module.hot.accept(\"./ImageSkeleton.vue?vue&type=template&id=279763bc&scoped=true&\", function () {\n      api.rerender('279763bc', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"src/components/loader/ImageSkeleton.vue\"\nexport default component.exports","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageSkeleton.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageSkeleton.vue?vue&type=script&lang=js&\"","export * from \"-!../../../node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"e5f0efc2-vue-loader-template\\\"}!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageSkeleton.vue?vue&type=template&id=279763bc&scoped=true&\""],"sourceRoot":""}