@twab/visualization 0.9.11 → 0.9.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/visualization.js +2 -2
- package/package.json +1 -1
package/dist/visualization.js
CHANGED
|
@@ -4471,11 +4471,11 @@ __vue_render__._withStripped = true;
|
|
|
4471
4471
|
/* style */
|
|
4472
4472
|
const __vue_inject_styles__ = function (inject) {
|
|
4473
4473
|
if (!inject) return
|
|
4474
|
-
inject("data-v-576d506a_0", { source: "\n.visualization-row[data-v-576d506a] {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n}\n.visualization-col[data-v-576d506a] {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n}\n.visualization-divider[data-v-576d506a] {\n display: block;\n flex: 1 1 100%;\n height: 0px;\n max-height: 0px;\n opacity: 1;\n transition: inherit;\n border-style: solid;\n border-width: thin 0 0 0;\n border-color: rgba(0, 0, 0, 0.12);\n margin: 0;\n}\n.visualization-divider.vertical[data-v-576d506a] {\n align-self: stretch;\n border-width: 0 thin 0 0;\n display: inline-flex;\n height: inherit;\n margin-left: -1px;\n max-height: 100%;\n max-width: 0px;\n vertical-align: text-bottom;\n width: 0px;\n}\n.visualization-card[data-v-576d506a] {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n width: 100%;\n transition-property: box-shadow, opacity, -webkit-box-shadow;\n overflow-wrap: break-word;\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-576d506a] {\n justify-content: center;\n}\n.visualization-align-center[data-v-576d506a] {\n align-items: center;\n}\n#visualization-container[data-v-576d506a] {\n max-width: 100% !important;\n margin: 0 auto !important;\n height: 100%;\n border-bottom: none;\n}\n#visualization-container > .card[data-v-576d506a] {\n border-radius: 0 !important;\n font-size: 12px;\n width: 100%;\n box-shadow: none;\n height: 100%;\n}\n#command-bar[data-v-576d506a],\n#info-bar[data-v-576d506a] {\n background-color: #f5f5f5;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-576d506a] {\n width: 42px;\n height: 36px;\n border: none;\n background: none;\n}\n#command-bar button[data-v-576d506a]:hover {\n cursor: pointer;\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-576d506a] {\n font-size: 16px;\n}\n#command-bar[data-v-576d506a] {\n padding: 0 !important;\n}\n#info-bar[data-v-576d506a] {\n padding: 4px;\n font-size: 14px;\n position: relative;\n}\n.settings-container[data-v-576d506a] {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-576d506a] {\n margin: 0 2px;\n cursor: pointer;\n}\n#info-bar svg[data-v-576d506a] {\n font-size: 16px;\n}\n#info-bar .divider[data-v-576d506a] {\n margin: 0 8px;\n}\nsvg[data-v-576d506a]:focus {\n border: none;\n}\n.visualization-card[data-v-576d506a] {\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-576d506a] {\n border-left: 8px solid var(--visualization-primary) !important;\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-576d506a] {\n padding: 1px;\n display: flex;\n flex-flow: column;\n}\n.tooltip[data-v-576d506a] {\n display: block !important;\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-576d506a] {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-576d506a] {\n width: 0;\n height: 0;\n border-style: solid;\n position: absolute;\n margin: 5px;\n border-color: var(--visualization-primary);\n z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-576d506a] {\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-576d506a] {\n border-width: 5px 5px 0 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n bottom: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-576d506a] {\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-576d506a] {\n border-width: 0 5px 5px 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-top-color: transparent !important;\n top: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-576d506a] {\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-576d506a] {\n border-width: 5px 5px 5px 0;\n border-left-color: transparent !important;\n border-top-color: transparent !important;\n border-bottom-color: transparent !important;\n left: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-576d506a] {\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-576d506a] {\n border-width: 5px 0 5px 5px;\n border-top-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n right: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-576d506a] {\n background: #f9f9f9;\n color: black;\n padding: 24px;\n border-radius: 5px;\n box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-576d506a] {\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-576d506a] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-576d506a] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AA0mCA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EACA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Visualization.vue","sourcesContent":["<template>\n <div\n class=\"visualization-row\"\n id=\"visualization-container\"\n @click=\"framesClicked\"\n >\n <GlobalEvents\n v-if=\"active && canInsertTime && settingsClosed\"\n @keydown.45=\"insertTime\"\n @keydown.46=\"insertTime\"\n />\n <GlobalEvents\n v-if=\"active && settingsClosed\"\n @keydown.left.prevent=\"arrowLeft\"\n @keydown.right.prevent=\"arrowRight\"\n @keydown.shift.page-down.prevent=\"nextLoopActivate\"\n @keydown.page-down.prevent=\"next\"\n @keydown.page-up.prevent=\"prev\"\n @keydown.shift.page-up.prevent=\"prevLoopActivate\"\n @keydown.83.prevent=\"setHourIni\"\n @keydown.69.prevent=\"setHourEnd\"\n @keydown.36.prevent=\"goToFirstFrame\"\n @keydown.35.prevent=\"goToLastFrame\"\n @keydown.71.prevent=\"dialogs.goTo = true\"\n @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\n @keydown.76.prevent=\"dialogs.frames = true\"\n @keydown.49.97=\"() => (secondsPerFrame = 1)\"\n @keydown.50.98=\"() => (secondsPerFrame = 2)\"\n @keydown.51.99=\"() => (secondsPerFrame = 3)\"\n @keydown.52.100=\"() => (secondsPerFrame = 4)\"\n @keydown.53.101=\"() => (secondsPerFrame = 5)\"\n />\n <GlobalEvents\n v-if=\"prevLoop || nextLoop\"\n @keydown=\"breakLoop\"\n v-on:click=\"breakLoop\"\n />\n <settings\n v-if=\"active\"\n :dialogs-visibility=\"dialogs\"\n :playback-rate=\"playbackRate\"\n :seconds-per-frame=\"secondsPerFrame\"\n :frames-per-row=\"framesPerRow\"\n :number-of-rows=\"numberOfRows\"\n @change-playback-rate=\"(value) => (playbackRate = value)\"\n @change-go-to=\"changeHour\"\n @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\n @set-frames-selection=\"setFrameSelection\"\n @close=\"(dialog) => (dialogs[dialog] = false)\"\n />\n <div\n :class=\"{ 'visualization-card': true, 'active-tab': active }\"\n style=\"width: 100%; padding: 0\"\n >\n <command-bar\n v-show=\"commandBarShow\"\n :video-playing=\"videoPlaying\"\n :video-paused=\"paused\"\n :insert-time=\"canInsertTime\"\n :hour-ini-selected=\"!!hourIniSelected\"\n :hour-end-selected=\"!!hourEndSelected\"\n @prev-loop-activate=\"prevLoopActivate\"\n @next-loop-activate=\"nextLoopActivate\"\n @prev=\"prev\"\n @next=\"next\"\n @go-to=\"dialogs.goTo = true\"\n @open-frame-selection=\"dialogs.frames = true\"\n @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\n @open-blocks=\"openBlocks\"\n @open-playback-rate=\"dialogs.playbackRate = true\"\n @play-or-pause=\"playOrPause\"\n @stop-playing=\"stopPlayingBar\"\n @set-hour-ini=\"setHourIni\"\n @set-hour-end=\"setHourEnd\"\n @insert-time=\"insertTime\"\n />\n <video-progress\n v-if=\"videoProgressBar\"\n v-show=\"videoPlaying\"\n :video-time=\"videoTime\"\n />\n <info-bar\n :playback-rate=\"playbackRate\"\n :seconds-per-frame=\"secondsPerFrame\"\n :commands-show=\"commandBarShow\"\n :cache=\"useCache\"\n :block-start-time=\"blockStartTime\"\n :video-total-duration=\"videoSliderTotalDuration\"\n :alternative-server=\"alternativeServer\"\n :frames-per-row=\"framesPerRow\"\n :number-of-rows=\"numberOfRows\"\n :hour-ini=\"hourIniSelected\"\n :hour-end=\"hourEndSelected\"\n @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\n @toogle-cache=\"useCache = !useCache\"\n @change-server=\"changeServerClick\"\n />\n <div\n class=\"visualization-row\"\n v-for=\"rowNumber in numberOfRows\"\n :id=\"'row-' + rowNumber\"\n :key=\"'row-' + rowNumber\"\n style=\"padding: 12px\"\n >\n <div\n v-for=\"(frame, frameNumber) in previousFrames\"\n :key=\"\n numberOfRows +\n '-' +\n framesPerRow +\n '-' +\n getIndex(rowNumber, frameNumber, Positions.previous)\n \"\n style=\"display: none\"\n >\n <span v-html=\"frame.img\" />\n </div>\n <div\n v-for=\"(frame, frameNumber) in nextFrames\"\n :key=\"\n numberOfRows +\n '-' +\n framesPerRow +\n '-' +\n getIndex(rowNumber, frameNumber, Positions.next)\n \"\n style=\"display: none\"\n >\n <span v-html=\"frame.img\" />\n </div>\n <div\n class=\"visualization-col\"\n v-for=\"(frame, frameNumber) in frames.slice(\n framesPerRow * (rowNumber - 1),\n framesPerRow * rowNumber\n )\"\n :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\n :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\n :class=\"{ loaderImg: !!frame.img }\"\n @click=\"\n frame.time\n ? selectFrame(\n getIndex(rowNumber, frameNumber, Positions.current),\n frame\n )\n : null\n \"\n >\n <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\n <b>\n {{\n getAudienceTime(\n frame.time,\n rowNumber,\n frameNumber,\n Positions.current\n )\n }}\n </b>\n </span>\n\n <frame\n ref=\"frames\"\n :frame=\"frame\"\n :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\n :grid-settings=\"{ numberOfRows, framesPerRow }\"\n :initialTime=\"frame.time === hourIniSelected\"\n :endTime=\"frame.time === hourEndSelected\"\n :betweenTime=\"\n frame.time > hourIniSelected && frame.time < hourEndSelected\n \"\n :active=\"\n getIndex(rowNumber, frameNumber, Positions.current) ===\n activeFrame\n \"\n :activeTab=\"active\"\n :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\n @startPlaying=\"startPlaying\"\n @stopPlaying=\"stopPlaying\"\n @playPauseStatus=\"changePlayPause\"\n @updateSlider=\"updateSlider\"\n :playback-rate=\"playbackRate\"\n style=\"margin: 0 auto\"\n ></frame>\n </div>\n </div>\n </div>\n <!-- <settings\n ref=\"settings2\"\n :active=\"active\"\n @goToTime=\"changeHour\"\n @goToBlockInterval=\"changeBlockInterval\"\n @setSplitTime=\"setSplitTime\"\n @setFrameSelection=\"setFrameSelection\"\n @setPlaybackRate=\"\n (rate) => {\n playbackRate = rate\n }\n \"\n >\n </settings> -->\n <!-- <v-dialog v-model=\"dialog\" width=\"500\">\n <div class=\"card\">\n <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\n {{ ' Último bloco disponível até: ' }}\n <v-btn\n @click=\"goToStartBlock\"\n class=\"ml-2\"\n dark\n color=\"success\"\n depressed\n >\n <v-icon left> fa-clock </v-icon>\n {{ timeLastBlock }}\n </v-btn>\n <v-spacer></v-spacer>\n <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\n <v-icon dark> fa fa-xmark </v-icon>\n </v-btn>\n </div-title>\n </div>\n </v-dialog>\n <Help :media=\"media\" @close=\"media = null\" />\n <v-dialog\n v-if=\"userMultiTabsGrid\"\n v-model=\"userMultiTabsGridsModel\"\n persistent\n width=\"60%\"\n >\n <div class=\"card\">\n <div class=\"card\"-title class=\"warning text-h5\" primary-title>\n <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\n <v-icon dark left style=\"font-size: 24px !important\">\n fa fa-exclamation-triangle\n </v-icon>\n <div style=\"color: white\">{{ $t('form.alert') }}</div>\n </div>\n </div-title>\n <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\n <h3>\n {{ $t('alerts.userMultiTabsGrid') }}\n </h3>\n </div-text>\n <hr class=\"divider\" class=\"grey lighten-1\"></span>\n <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\n <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\n <v-icon left color=\"white\">fa fa-times</v-icon>\n {{ $t('form.close') }}\n </v-btn>\n </div-actions>\n </div>\n </v-dialog> -->\n </div>\n</template>\n<script>\nimport Frame from './components/Frame.vue'\nimport FramesInterface from './utils/FramesInterface.js'\nimport FramesService from './services/FramesService.js'\n\nimport Commands from './components/Commands.vue'\nimport Infos from './components/Infos.vue'\nimport VideoProgress from './components/VideoProgress.vue'\nimport Settings from './components/Settings.vue'\n\nconst Positions = Object.freeze({\n previous: 0,\n current: 1,\n next: 2,\n})\n\nexport default {\n name: 'visualization-container',\n props: {\n value: {\n type: Boolean,\n required: true,\n },\n date: {\n type: String,\n required: true,\n },\n channel: {\n type: Number,\n required: true,\n },\n startAudienceTime: {\n type: String,\n required: true,\n },\n videoProgressBar: {\n type: Boolean,\n default: false,\n },\n jumpOnInsert: {\n type: Boolean,\n default: false,\n },\n framesFormat: {\n type: [Number, String],\n default: 6,\n },\n maxSize: {\n type: Number,\n }\n },\n components: {\n Frame,\n CommandBar: Commands,\n InfoBar: Infos,\n VideoProgress,\n Settings,\n // Help,\n },\n data() {\n return {\n Positions,\n updatingChannel: null,\n dialog: false,\n timeLastBlock: null,\n alternativeServer: false,\n useCache: true,\n numberOfRows: 1,\n framesPerRow: 5,\n secondsPerFrame: 1,\n fInterface: null,\n velocity: 1,\n frames: [],\n previousFrames: [],\n nextFrames: [],\n channelCode: 0,\n videoPlaying: false,\n activeFrame: null,\n activeVideo: null,\n videoTime: 0,\n videoTotalTime: null,\n progressVideoDrag: false,\n hourIniSelected: false,\n hourEndSelected: false,\n canInsertTime: false,\n lastHeight: 0,\n loopInterval: null,\n nextLoop: false,\n prevLoop: false,\n videoSliderTotalDuration: 900,\n blockStartTime: null,\n media: null,\n changeServer: false,\n userMultiTabsGrid: false,\n userMultiTabsGridsModel: true,\n playbackRate: 1,\n paused: false,\n commandBarShow: true,\n dialogs: {\n playbackRate: false,\n goTo: false,\n secondsPerFrame: false,\n frames: false,\n },\n }\n },\n async created() {\n this.changeServer = this.serverOfFrames === 'alternative'\n this.alternativeServer = this.serverOfFrames === 'alternative'\n\n const settings = [\n {\n framesPerRow: 2,\n numberOfRows: 1,\n },\n {\n framesPerRow: 3,\n numberOfRows: 1,\n },\n {\n framesPerRow: 3,\n numberOfRows: 2,\n },\n {\n framesPerRow: 4,\n numberOfRows: 1,\n },\n {\n framesPerRow: 4,\n numberOfRows: 2,\n },\n {\n framesPerRow: 5,\n numberOfRows: 1,\n },\n {\n framesPerRow: 5,\n numberOfRows: 2,\n },\n {\n framesPerRow: 6,\n numberOfRows: 1,\n },\n {\n framesPerRow: 6,\n numberOfRows: 2,\n },\n ]\n\n const storedOnDb = settings[parseInt(this.framesFormat) - 1]\n this.framesPerRow = storedOnDb.framesPerRow\n this.numberOfRows = storedOnDb.numberOfRows\n\n await this.createFramesInterface()\n if (this.maxSize) {\n this.resize(this.maxSize, true)\n }\n },\n methods: {\n framesClicked(e) {\n if (e.target.id != 'insert') {\n this.active = true\n }\n },\n async goToStartBlock() {\n try {\n const d = new Date()\n let timestamp = Date.UTC(\n d.getFullYear(),\n d.getMonth(),\n d.getDate(),\n d.getHours(),\n d.getMinutes(),\n d.getSeconds()\n )\n\n const response = (\n await FramesService.getNextAvailableBlock({\n channel: this.channel,\n time: timestamp / 1000,\n })\n ).data\n\n this.dialog = false\n this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\n } catch (err) {\n console.error(err)\n }\n },\n async checkAvailableBlock() {\n try {\n const d = new Date()\n let timestamp = Date.UTC(\n d.getFullYear(),\n d.getMonth(),\n d.getDate(),\n d.getHours(),\n d.getMinutes(),\n d.getSeconds()\n )\n\n const response = (\n await FramesService.getNextAvailableBlock({\n channel: this.channel,\n time: timestamp / 1000,\n })\n ).data\n\n this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\n this.dialog = true\n if (!response.status) {\n this.timeLastBlock = 'N/D'\n }\n } catch (err) {\n console.error(err)\n }\n },\n updateSlider(videoStartTime, time) {\n // * atualizar slider se estiver fora do range definido previamente\n if (\n time < this.blockStartTime ||\n time > this.blockStartTime ||\n videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\n ) {\n this.blockStartTime = videoStartTime\n this.videoSliderTotalDuration = 900\n }\n },\n nextLoopActivate() {\n this.breakLoop()\n this.loopInterval = setInterval(this.next, 40)\n setTimeout(() => {\n this.nextLoop = true\n }, 0)\n },\n prevLoopActivate() {\n this.breakLoop()\n this.loopInterval = setInterval(this.prev, 40)\n setTimeout(() => {\n this.prevLoop = true\n }, 0)\n },\n breakLoop() {\n clearInterval(this.loopInterval)\n this.loopInterval = null\n this.nextLoop = false\n this.prevLoop = false\n },\n changePlayPause(status) {\n this.paused = !status\n },\n resize(height=this.lastHeight) {\n this.lastHeight = height\n if (this.$refs.frames) {\n for (let frame of this.$refs.frames) {\n frame.resize(height)\n }\n }\n this.$emit('resized')\n },\n async goToFirstFrame() {\n let frames = this.$refs.frames\n\n let audienceTime = null\n if (frames.length > 0) {\n let frame = frames[0].frame\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n }\n // if (audienceTime) {\n // this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n // }\n if (audienceTime) {\n const [hours, minutes, seconds] = audienceTime.split(':')\n const totalSeconds =\n parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\n if (totalSeconds >= 9000)\n this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\n }\n },\n async goToLastFrame() {\n let frames = this.$refs.frames\n let audienceTime = null\n if (frames.length > 0) {\n let frame = frames[0].frame\n\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n }\n if (audienceTime) {\n this.changeHour(this.getLastFirtsBlockTime(audienceTime))\n }\n },\n getLastFirtsBlockTime(time, first = false) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n let h, m, newTime\n const t = time.match(/.{1,2}/g)\n if (t[0] && t[1]) {\n h = parseInt(t[0])\n m = parseInt(t[1])\n }\n if (h < 26) {\n if (m < 15)\n if (first) newTime = t[0] + ':00:00'\n else newTime = t[0] + ':14:59'\n else if (m < 30)\n if (first) newTime = t[0] + ':15:00'\n else newTime = t[0] + ':29:59'\n else if (m < 45)\n if (first) newTime = t[0] + ':30:00'\n else newTime = t[0] + ':44:59'\n else if (first) newTime = t[0] + ':45:00'\n else newTime = t[0] + ':59:59'\n } else {\n if (m < 15)\n if (first) newTime = '26:00:00'\n else newTime = '26:14:59'\n else {\n if (first) newTime = '26:15:00'\n else newTime = '26:29:59'\n }\n }\n return newTime\n },\n openBlocks() {\n this.$refs.settings2?.openBlocks()\n },\n playOrPause() {\n const array = this.$refs.frames.filter((fc) => !!fc.active)\n if (array.length === 1) {\n const frame = array[0]\n frame.playOrPause(this.playbackRate)\n }\n },\n stopPlayingBar() {\n for (let ref of this.$refs.frames) {\n if (\n ref.videoStatus === ref.Status.playing ||\n ref.videoStatus === ref.Status.paused\n ) {\n ref.stop(false)\n }\n }\n },\n async setFrameSelection(selected) {\n this.frames = this.loadingArray\n switch (parseInt(selected)) {\n // 2x1\n case 1:\n this.framesPerRow = 2\n this.numberOfRows = 1\n break\n // 3x1\n case 2:\n this.framesPerRow = 3\n this.numberOfRows = 1\n break\n // 3x2\n case 3:\n this.framesPerRow = 3\n this.numberOfRows = 2\n break\n // 4x1\n case 4:\n this.framesPerRow = 4\n this.numberOfRows = 1\n break\n // 4x2\n case 5:\n this.framesPerRow = 4\n this.numberOfRows = 2\n break\n // 5x1\n case 6:\n this.framesPerRow = 5\n this.numberOfRows = 1\n break\n // 5x2\n case 7:\n this.framesPerRow = 5\n this.numberOfRows = 2\n break\n // 6x1\n case 8:\n this.framesPerRow = 6\n this.numberOfRows = 1\n break\n // 6x2\n case 9:\n this.framesPerRow = 6\n this.numberOfRows = 2\n break\n }\n await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\n this.getFramesArray()\n setTimeout(() => {\n for (let ref of this.$refs.frames) {\n ref?.resize(this.lastHeight)\n }\n }, 150)\n },\n getFramesArray() {\n this.frames = this.fInterface.getFrames(Positions.current)\n this.nextFrames = this.fInterface.getFrames(Positions.next)\n this.previousFrames = this.fInterface.getFrames(Positions.previous)\n },\n async createFramesInterface() {\n this.frames = this.loadingArray\n let ch = this.channel\n let associationTMP = {\n 1735073: 1,\n 1735074: 139,\n 1735075: 3,\n 1735076: 132,\n }\n //\n this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\n\n const t = this.startAudienceTime.match(/.{1,2}/g)\n const d = this.getDateParts()\n const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n // * iniciar slider\n this.blockStartTime = time\n this.fInterface = await new FramesInterface(\n this.channelCode,\n this.numberOfRows,\n this.framesPerRow,\n time,\n this.startAudienceTime,\n this.useCache\n )\n await this.fInterface.init()\n\n this.getFramesArray()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n\n this.activeVideo = null\n },\n getIndex(rowNumber, frameIndex, position) {\n let from = this.framesPerRow * this.numberOfRows * position\n let till = this.framesPerRow * this.numberOfRows * (position + 1)\n\n return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\n },\n getAudienceTime(frameTime, rowNumber, frameNumber, position) {\n if (!frameTime) {\n return 'Loading...'\n } else if (\n this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\n ) {\n return this.convertToAudienceTime(this.videoTime)\n } else {\n return this.convertToAudienceTime(frameTime)\n }\n },\n dateInUtc(miliSeconds) {\n var date = new Date(miliSeconds)\n var utc = new Date(\n date.getUTCFullYear(),\n date.getUTCMonth(),\n date.getUTCDate(),\n date.getUTCHours(),\n date.getUTCMinutes(),\n date.getUTCSeconds()\n )\n return utc\n },\n convertToAudienceTime(time, separator = ':') {\n const d = this.getDateParts()\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n\n let hour = this.dateInUtc(time * 1000)\n .toTimeString()\n .split(' ')[0]\n .split(':')\n .map(Number)\n\n if (time > limit && time <= limit + this.startAudienceSeconds) {\n hour[0] = 24 + hour[0]\n }\n return hour\n .map((part) => (part > 9 ? part.toString() : '0' + part))\n .join(separator)\n },\n getDateParts(date = this.date) {\n const d = new Date(date)\n return {\n year: d.getFullYear(),\n month: d.getMonth(),\n day: d.getDate(),\n }\n },\n selectFrame(index, frame) {\n const d = this.getDateParts()\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n const frameTime = frame?.time\n\n if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\n if (this.hourIniSelected === true) {\n this.hourIniSelected = frameTime\n\n if (\n this.hourEndSelected &&\n this.hourIniSelected > this.hourEndSelected\n ) {\n this.hourEndSelected = false\n }\n } else if (this.hourEndSelected === true) {\n if (frameTime > this.hourIniSelected) {\n this.hourEndSelected = frameTime\n this.canInsertTime = true\n } else {\n this.hourEndSelected = false\n }\n }\n }\n\n if (this.activeFrame !== index) {\n // ? Se clicar no frame diferente de onde está a dar play, faz pausa\n const array = this.$refs.frames.filter(\n (fc) => fc.videoStatus === fc.Status.playing\n )\n if (array.length === 1) {\n const frame = array[0]\n frame.playOrPause()\n }\n this.activeVideo = null\n this.activeFrame = index\n }\n },\n setHourIni() {\n this.canInsertTime = true\n this.hourIniSelected = true\n document.getElementById(`frame-${this.activeFrame}`).click()\n this.$emit('setHourIni', {\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n })\n },\n setHourEnd() {\n this.canInsertTime = true\n this.hourEndSelected = true\n document.getElementById(`frame-${this.activeFrame}`).click()\n },\n //* Navegação\n arrowRight() {\n if (this.checkLimitRight(false)) {\n if (\n this.activeFrame ===\n this.numberOfRows * this.framesPerRow * 2 - 1\n ) {\n this.next()\n } else {\n this.activeFrame++\n }\n }\n },\n arrowLeft() {\n if (this.checkLimitLeft(false)) {\n if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\n this.prev()\n } else {\n this.activeFrame--\n }\n }\n },\n checkLimitRight(value) {\n const d = this.getDateParts()\n const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\n\n if (value) {\n return (\n high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\n this.nextFrames[0].title !== -1\n )\n } else {\n // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\n return high > this.fInterface.getCurrentTime() * 1000\n }\n },\n checkLimitLeft(value) {\n const d = this.getDateParts()\n const low = Date.UTC(d.year, d.month, d.day, 2, 30, 0)\n\n if (value) {\n return low <= (this.fInterface.getCurrentTime() - 1) * 1000\n } else {\n return (\n low <\n (this.fInterface.getCurrentTime() +\n this.activeFrame -\n this.numberOfRows * this.framesPerRow) *\n 1000\n )\n }\n },\n async next() {\n if (this.checkLimitRight(true)) {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n this.fInterface.setCurrentStep(this.secondsPerFrame)\n await this.fInterface.loadNextFrames()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n this.activeVideo = null\n\n this.getFramesArray()\n }\n },\n async prev() {\n if (this.checkLimitLeft(true)) {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n\n this.fInterface.setCurrentStep(this.secondsPerFrame)\n await this.fInterface.loadPrevFrames()\n\n this.activeFrame = this.getIndex(\n this.numberOfRows,\n this.framesPerRow - 1,\n Positions.current\n )\n this.activeVideo = null\n\n this.getFramesArray()\n }\n },\n async setStartTime(time) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n const t = time.match(/.{1,2}/g)\n const d = this.getDateParts()\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n this.frames = this.loadingArray\n\n await this.fInterface.changeTime(setTime)\n\n this.getFramesArray()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n // let frames = this.$refs.frames\n\n // let audienceTime = null\n // if (frames.length > 0) {\n // let frame = frames[0].frame\n // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n // }\n\n this.activeVideo = null\n\n return true\n },\n hourToTimeStamp(time) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n const t = time.match(/.{1,2}/g)\n const d = this.getDateParts()\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n\n return setTime\n },\n async changeHour(value) {\n if (value) {\n setTimeout(() => {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n\n this.setStartTime(value, true)\n }, 0)\n }\n },\n changeBlockInterval(value) {\n this.changeHour(value.ini)\n let time_ini, time_end\n time_ini = this.hourToTimeStamp(value.ini)\n time_end = this.hourToTimeStamp(value.end)\n this.videoSliderTotalDuration = time_end - time_ini\n this.$refs.frames[0].changeSettings(time_ini)\n this.blockStartTime = time_ini\n },\n //eslint-disable-next-line\n async updateVideoTime(index, videoTime) {\n this.activeVideo = index\n this.videoTime = videoTime\n },\n //eslint-disable-next-line\n updateVideoStatus(currentTime) {\n if (!this.progressVideoDrag) {\n // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\n // this.updateProgress(null, currentTime)\n }\n },\n async startPlaying(frame, totalTime) {\n const array = this.$refs.frames.filter(\n (fc) => fc.frame.time !== frame.time\n )\n\n for (let ref of array) {\n if (\n ref.videoStatus === ref.Status.playing ||\n ref.videoStatus === ref.Status.paused\n ) {\n ref.stop(false)\n }\n }\n\n this.videoTotalTime = totalTime\n this.videoPlaying = true\n },\n stopPlaying() {\n this.videoTotalTime = null\n this.videoPlaying = false\n this.paused = false\n },\n insertTime() {\n this.$emit('timeToInsert', {\n channel: this.channel,\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n hour_end: this.hourEndSelected\n ? this.convertToAudienceTime(this.hourEndSelected, '')\n : null,\n force: false,\n })\n\n if (this.jumpOnInsert) {\n this.changeHour(\n this.convertToAudienceTime(\n (this.hourEndSelected || this.hourIniSelected) + 1\n )\n )\n }\n\n this.hourIniSelected = null\n this.hourEndSelected = null\n this.canInsertTime = false\n\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\n },\n insertTimeForce() {\n this.$emit('timeToInsert', {\n channel: this.channel,\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n hour_end: this.hourEndSelected\n ? this.convertToAudienceTime(this.hourEndSelected, '')\n : null,\n force: true,\n })\n\n this.hourIniSelected = null\n this.hourEndSelected = null\n this.canInsertTime = false\n\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\n },\n async getChannelMedia() {\n // this.media = (await ChannelService.show(this.channel)).data.MEDIA\n },\n async changeServerClick() {\n this.changeServer = !this.changeServer\n // this.$store.dispatch(\n // 'serverOfFrames',\n // this.changeServer ? 'alternative' : 'default'\n // )\n sessionStorage.setItem(\n 'serverOfFrames',\n this.changeServer ? 'alternative' : 'default'\n )\n\n // if (this.$route.params.time != this.frames[0].time)\n // this.$router.push({\n // name: 'grid',\n // params: {\n // date: this.date,\n // channel: this.channelCode,\n // time: this.frames[0].time,\n // },\n // })\n location.reload()\n },\n },\n computed: {\n active: {\n get() {\n return this.value\n },\n set(value) {\n this.$emit('input', value)\n },\n },\n settingsClosed() {\n return !Object.values(this.dialogs).find((v) => v)\n },\n startAudienceSeconds() {\n const t = this.startAudienceTime.match(/.{1,2}/g)\n return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\n },\n loadingArray() {\n return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\n },\n serverOfFrames() {\n return sessionStorage.getItem('server')\n },\n },\n watch: {\n framesFormat(value) {\n this.setFrameSelection(value)\n },\n active() {\n // ? sempre que trocamos de tabs dar reset as horas selected\n this.hourIniSelected = false\n this.hourEndSelected = false\n },\n useCache() {\n this.createFramesInterface()\n },\n hourIniSelected(value) {\n if (value) {\n sessionStorage.setItem(\n 'currentTimeFrames',\n this.convertToAudienceTime(this.hourIniSelected, '')\n )\n } else {\n sessionStorage.removeItem('currentTimeFrames')\n }\n },\n activeFrame(value) {\n if (value) {\n this.stopPlayingBar()\n }\n },\n channel() {\n this.updatingChannel = new Promise((resolve, reject) => {\n try {\n this.createFramesInterface()\n resolve(true)\n } catch (err) {\n reject(err)\n }\n })\n },\n },\n}\n</script>\n<style scoped>\n.visualization-row {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n}\n\n.visualization-col {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n}\n\n.visualization-divider {\n display: block;\n flex: 1 1 100%;\n height: 0px;\n max-height: 0px;\n opacity: 1;\n transition: inherit;\n border-style: solid;\n border-width: thin 0 0 0;\n border-color: rgba(0, 0, 0, 0.12);\n margin: 0;\n}\n\n.visualization-divider.vertical {\n align-self: stretch;\n border-width: 0 thin 0 0;\n display: inline-flex;\n height: inherit;\n margin-left: -1px;\n max-height: 100%;\n max-width: 0px;\n vertical-align: text-bottom;\n width: 0px;\n}\n\n.visualization-card {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n width: 100%;\n transition-property: box-shadow, opacity, -webkit-box-shadow;\n overflow-wrap: break-word;\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n\n.visualization-justify-center {\n justify-content: center;\n}\n\n.visualization-align-center {\n align-items: center;\n}\n\n#visualization-container {\n max-width: 100% !important;\n margin: 0 auto !important;\n height: 100%;\n border-bottom: none;\n}\n#visualization-container > .card {\n border-radius: 0 !important;\n font-size: 12px;\n width: 100%;\n box-shadow: none;\n height: 100%;\n}\n\n#command-bar,\n#info-bar {\n background-color: #f5f5f5;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button {\n width: 42px;\n height: 36px;\n border: none;\n background: none;\n}\n\n#command-bar button:hover {\n cursor: pointer;\n background: rgba(0, 0, 0, 0.12);\n}\n\n#command-bar svg {\n font-size: 16px;\n}\n\n#command-bar {\n padding: 0 !important;\n}\n\n#info-bar {\n padding: 4px;\n font-size: 14px;\n position: relative;\n}\n\n.settings-container {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.settings-container > * {\n margin: 0 2px;\n cursor: pointer;\n}\n\n#info-bar svg {\n font-size: 16px;\n}\n\n#info-bar .divider {\n margin: 0 8px;\n}\n\nsvg:focus {\n border: none;\n}\n\n.visualization-card {\n border-left: 8px solid #eee;\n}\n\n.active-tab {\n border-left: 8px solid var(--visualization-primary) !important;\n border-image-slice: 1;\n}\n\n[id^='frame-'] {\n padding: 1px;\n display: flex;\n flex-flow: column;\n}\n\n.tooltip {\n display: block !important;\n z-index: 10000;\n}\n\n.tooltip .tooltip-inner {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\n\n.tooltip .tooltip-arrow {\n width: 0;\n height: 0;\n border-style: solid;\n position: absolute;\n margin: 5px;\n border-color: var(--visualization-primary);\n z-index: 1;\n}\n\n.tooltip[x-placement^='top'] {\n margin-bottom: 5px;\n}\n\n.tooltip[x-placement^='top'] .tooltip-arrow {\n border-width: 5px 5px 0 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n bottom: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.tooltip[x-placement^='bottom'] {\n margin-top: 5px;\n}\n\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\n border-width: 0 5px 5px 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-top-color: transparent !important;\n top: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.tooltip[x-placement^='right'] {\n margin-left: 5px;\n}\n\n.tooltip[x-placement^='right'] .tooltip-arrow {\n border-width: 5px 5px 5px 0;\n border-left-color: transparent !important;\n border-top-color: transparent !important;\n border-bottom-color: transparent !important;\n left: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n\n.tooltip[x-placement^='left'] {\n margin-right: 5px;\n}\n\n.tooltip[x-placement^='left'] .tooltip-arrow {\n border-width: 5px 0 5px 5px;\n border-top-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n right: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n\n.tooltip.popover .popover-inner {\n background: #f9f9f9;\n color: black;\n padding: 24px;\n border-radius: 5px;\n box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n\n.tooltip.popover .popover-arrow {\n border-color: #f9f9f9;\n}\n\n.tooltip[aria-hidden='true'] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n\n.tooltip[aria-hidden='false'] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n</style>\n"]}, media: undefined });
|
|
4474
|
+
inject("data-v-e02ee6e8_0", { source: "\n.visualization-row[data-v-e02ee6e8],[data-v-e02ee6e8] .visualization-row {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n}\n.visualization-col[data-v-e02ee6e8] {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n}\n.visualization-divider[data-v-e02ee6e8] {\n display: block;\n flex: 1 1 100%;\n height: 0px;\n max-height: 0px;\n opacity: 1;\n transition: inherit;\n border-style: solid;\n border-width: thin 0 0 0;\n border-color: rgba(0, 0, 0, 0.12);\n margin: 0;\n}\n.visualization-divider.vertical[data-v-e02ee6e8] {\n align-self: stretch;\n border-width: 0 thin 0 0;\n display: inline-flex;\n height: inherit;\n margin-left: -1px;\n max-height: 100%;\n max-width: 0px;\n vertical-align: text-bottom;\n width: 0px;\n}\n.visualization-card[data-v-e02ee6e8] {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n width: 100%;\n transition-property: box-shadow, opacity, -webkit-box-shadow;\n overflow-wrap: break-word;\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n.visualization-justify-center[data-v-e02ee6e8],[data-v-e02ee6e8] .visualization-justify-center {\n justify-content: center;\n}\n.visualization-align-center[data-v-e02ee6e8] {\n align-items: center;\n}\n#visualization-container[data-v-e02ee6e8] {\n max-width: 100% !important;\n margin: 0 auto !important;\n height: 100%;\n border-bottom: none;\n}\n#visualization-container > .card[data-v-e02ee6e8] {\n border-radius: 0 !important;\n font-size: 12px;\n width: 100%;\n box-shadow: none;\n height: 100%;\n}\n#command-bar[data-v-e02ee6e8],\n#info-bar[data-v-e02ee6e8] {\n background-color: #f5f5f5;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button[data-v-e02ee6e8] {\n width: 42px;\n height: 36px;\n border: none;\n background: none;\n}\n#command-bar button[data-v-e02ee6e8]:hover {\n cursor: pointer;\n background: rgba(0, 0, 0, 0.12);\n}\n#command-bar svg[data-v-e02ee6e8] {\n font-size: 16px;\n}\n#command-bar[data-v-e02ee6e8] {\n padding: 0 !important;\n}\n#info-bar[data-v-e02ee6e8] {\n padding: 4px;\n font-size: 14px;\n position: relative;\n}\n.settings-container[data-v-e02ee6e8] {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n}\n.settings-container > *[data-v-e02ee6e8] {\n margin: 0 2px;\n cursor: pointer;\n}\n#info-bar svg[data-v-e02ee6e8] {\n font-size: 16px;\n}\n#info-bar .divider[data-v-e02ee6e8] {\n margin: 0 8px;\n}\nsvg[data-v-e02ee6e8]:focus {\n border: none;\n}\n.visualization-card[data-v-e02ee6e8] {\n border-left: 8px solid #eee;\n}\n.active-tab[data-v-e02ee6e8] {\n border-left: 8px solid var(--visualization-primary) !important;\n border-image-slice: 1;\n}\n[id^='frame-'][data-v-e02ee6e8] {\n padding: 1px;\n display: flex;\n flex-flow: column;\n}\n.tooltip[data-v-e02ee6e8] {\n display: block !important;\n z-index: 10000;\n}\n.tooltip .tooltip-inner[data-v-e02ee6e8] {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\n.tooltip .tooltip-arrow[data-v-e02ee6e8] {\n width: 0;\n height: 0;\n border-style: solid;\n position: absolute;\n margin: 5px;\n border-color: var(--visualization-primary);\n z-index: 1;\n}\n.tooltip[x-placement^='top'][data-v-e02ee6e8] {\n margin-bottom: 5px;\n}\n.tooltip[x-placement^='top'] .tooltip-arrow[data-v-e02ee6e8] {\n border-width: 5px 5px 0 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n bottom: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n.tooltip[x-placement^='bottom'][data-v-e02ee6e8] {\n margin-top: 5px;\n}\n.tooltip[x-placement^='bottom'] .tooltip-arrow[data-v-e02ee6e8] {\n border-width: 0 5px 5px 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-top-color: transparent !important;\n top: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n.tooltip[x-placement^='right'][data-v-e02ee6e8] {\n margin-left: 5px;\n}\n.tooltip[x-placement^='right'] .tooltip-arrow[data-v-e02ee6e8] {\n border-width: 5px 5px 5px 0;\n border-left-color: transparent !important;\n border-top-color: transparent !important;\n border-bottom-color: transparent !important;\n left: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n.tooltip[x-placement^='left'][data-v-e02ee6e8] {\n margin-right: 5px;\n}\n.tooltip[x-placement^='left'] .tooltip-arrow[data-v-e02ee6e8] {\n border-width: 5px 0 5px 5px;\n border-top-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n right: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n.tooltip.popover .popover-inner[data-v-e02ee6e8] {\n background: #f9f9f9;\n color: black;\n padding: 24px;\n border-radius: 5px;\n box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n.tooltip.popover .popover-arrow[data-v-e02ee6e8] {\n border-color: #f9f9f9;\n}\n.tooltip[aria-hidden='true'][data-v-e02ee6e8] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n.tooltip[aria-hidden='false'][data-v-e02ee6e8] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\Visualization.vue"],"names":[],"mappings":";AA0mCA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;EACA,UAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,iCAAA;EACA,SAAA;AACA;AAEA;EACA,mBAAA;EACA,wBAAA;EACA,oBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,2BAAA;EACA,UAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,WAAA;EACA,4DAAA;EACA,yBAAA;EACA;qCACA;AACA;AAEA;EACA,uBAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,0BAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;AACA;AACA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AACA;AAEA;;EAEA,yBAAA;EACA;mCACA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;EACA,+BAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,WAAA;EACA,QAAA;EACA,2BAAA;AACA;AAEA;EACA,aAAA;EACA,eAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,2BAAA;AACA;AAEA;EACA,8DAAA;EACA,qBAAA;AACA;AAEA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;AACA;AAEA;EACA,yBAAA;EACA,cAAA;AACA;AAEA;EACA,wCAAA;EACA,YAAA;EACA,mBAAA;EACA,qBAAA;AACA;AAEA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,0CAAA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,2CAAA;EACA,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,0CAAA;EACA,wCAAA;EACA,SAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,2BAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,UAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,2BAAA;EACA,wCAAA;EACA,0CAAA;EACA,2CAAA;EACA,WAAA;EACA,oBAAA;EACA,cAAA;EACA,eAAA;AACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AACA;AAEA;EACA,qBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,2CAAA;AACA;AAEA;EACA,mBAAA;EACA,UAAA;EACA,yBAAA;AACA","file":"Visualization.vue","sourcesContent":["<template>\n <div\n class=\"visualization-row\"\n id=\"visualization-container\"\n @click=\"framesClicked\"\n >\n <GlobalEvents\n v-if=\"active && canInsertTime && settingsClosed\"\n @keydown.45=\"insertTime\"\n @keydown.46=\"insertTime\"\n />\n <GlobalEvents\n v-if=\"active && settingsClosed\"\n @keydown.left.prevent=\"arrowLeft\"\n @keydown.right.prevent=\"arrowRight\"\n @keydown.shift.page-down.prevent=\"nextLoopActivate\"\n @keydown.page-down.prevent=\"next\"\n @keydown.page-up.prevent=\"prev\"\n @keydown.shift.page-up.prevent=\"prevLoopActivate\"\n @keydown.83.prevent=\"setHourIni\"\n @keydown.69.prevent=\"setHourEnd\"\n @keydown.36.prevent=\"goToFirstFrame\"\n @keydown.35.prevent=\"goToLastFrame\"\n @keydown.71.prevent=\"dialogs.goTo = true\"\n @keydown.73.prevent=\"dialogs.secondsPerFrame = true\"\n @keydown.76.prevent=\"dialogs.frames = true\"\n @keydown.49.97=\"() => (secondsPerFrame = 1)\"\n @keydown.50.98=\"() => (secondsPerFrame = 2)\"\n @keydown.51.99=\"() => (secondsPerFrame = 3)\"\n @keydown.52.100=\"() => (secondsPerFrame = 4)\"\n @keydown.53.101=\"() => (secondsPerFrame = 5)\"\n />\n <GlobalEvents\n v-if=\"prevLoop || nextLoop\"\n @keydown=\"breakLoop\"\n v-on:click=\"breakLoop\"\n />\n <settings\n v-if=\"active\"\n :dialogs-visibility=\"dialogs\"\n :playback-rate=\"playbackRate\"\n :seconds-per-frame=\"secondsPerFrame\"\n :frames-per-row=\"framesPerRow\"\n :number-of-rows=\"numberOfRows\"\n @change-playback-rate=\"(value) => (playbackRate = value)\"\n @change-go-to=\"changeHour\"\n @change-seconds-per-frame=\"(value) => (secondsPerFrame = value)\"\n @set-frames-selection=\"setFrameSelection\"\n @close=\"(dialog) => (dialogs[dialog] = false)\"\n />\n <div\n :class=\"{ 'visualization-card': true, 'active-tab': active }\"\n style=\"width: 100%; padding: 0\"\n >\n <command-bar\n v-show=\"commandBarShow\"\n :video-playing=\"videoPlaying\"\n :video-paused=\"paused\"\n :insert-time=\"canInsertTime\"\n :hour-ini-selected=\"!!hourIniSelected\"\n :hour-end-selected=\"!!hourEndSelected\"\n @prev-loop-activate=\"prevLoopActivate\"\n @next-loop-activate=\"nextLoopActivate\"\n @prev=\"prev\"\n @next=\"next\"\n @go-to=\"dialogs.goTo = true\"\n @open-frame-selection=\"dialogs.frames = true\"\n @open-frames-per-second=\"dialogs.secondsPerFrame = true\"\n @open-blocks=\"openBlocks\"\n @open-playback-rate=\"dialogs.playbackRate = true\"\n @play-or-pause=\"playOrPause\"\n @stop-playing=\"stopPlayingBar\"\n @set-hour-ini=\"setHourIni\"\n @set-hour-end=\"setHourEnd\"\n @insert-time=\"insertTime\"\n />\n <video-progress\n v-if=\"videoProgressBar\"\n v-show=\"videoPlaying\"\n :video-time=\"videoTime\"\n />\n <info-bar\n :playback-rate=\"playbackRate\"\n :seconds-per-frame=\"secondsPerFrame\"\n :commands-show=\"commandBarShow\"\n :cache=\"useCache\"\n :block-start-time=\"blockStartTime\"\n :video-total-duration=\"videoSliderTotalDuration\"\n :alternative-server=\"alternativeServer\"\n :frames-per-row=\"framesPerRow\"\n :number-of-rows=\"numberOfRows\"\n :hour-ini=\"hourIniSelected\"\n :hour-end=\"hourEndSelected\"\n @toogle-commands-visibility=\"commandBarShow = !commandBarShow\"\n @toogle-cache=\"useCache = !useCache\"\n @change-server=\"changeServerClick\"\n />\n <div\n class=\"visualization-row\"\n v-for=\"rowNumber in numberOfRows\"\n :id=\"'row-' + rowNumber\"\n :key=\"'row-' + rowNumber\"\n style=\"padding: 12px\"\n >\n <div\n v-for=\"(frame, frameNumber) in previousFrames\"\n :key=\"\n numberOfRows +\n '-' +\n framesPerRow +\n '-' +\n getIndex(rowNumber, frameNumber, Positions.previous)\n \"\n style=\"display: none\"\n >\n <span v-html=\"frame.img\" />\n </div>\n <div\n v-for=\"(frame, frameNumber) in nextFrames\"\n :key=\"\n numberOfRows +\n '-' +\n framesPerRow +\n '-' +\n getIndex(rowNumber, frameNumber, Positions.next)\n \"\n style=\"display: none\"\n >\n <span v-html=\"frame.img\" />\n </div>\n <div\n class=\"visualization-col\"\n v-for=\"(frame, frameNumber) in frames.slice(\n framesPerRow * (rowNumber - 1),\n framesPerRow * rowNumber\n )\"\n :key=\"'row-' + rowNumber + '-frame-' + frameNumber\"\n :id=\"`frame-${getIndex(rowNumber, frameNumber, Positions.current)}`\"\n :class=\"{ loaderImg: !!frame.img }\"\n @click=\"\n frame.time\n ? selectFrame(\n getIndex(rowNumber, frameNumber, Positions.current),\n frame\n )\n : null\n \"\n >\n <span :id=\"activeFrame ? 'aa' : 0\" style=\"padding-left: 4px\">\n <b>\n {{\n getAudienceTime(\n frame.time,\n rowNumber,\n frameNumber,\n Positions.current\n )\n }}\n </b>\n </span>\n\n <frame\n ref=\"frames\"\n :frame=\"frame\"\n :index=\"getIndex(rowNumber, frameNumber, Positions.current)\"\n :grid-settings=\"{ numberOfRows, framesPerRow }\"\n :initialTime=\"frame.time === hourIniSelected\"\n :endTime=\"frame.time === hourEndSelected\"\n :betweenTime=\"\n frame.time > hourIniSelected && frame.time < hourEndSelected\n \"\n :active=\"\n getIndex(rowNumber, frameNumber, Positions.current) ===\n activeFrame\n \"\n :activeTab=\"active\"\n :videoUrl=\"fInterface ? fInterface.getVideoUrl(frame) : ''\"\n @startPlaying=\"startPlaying\"\n @stopPlaying=\"stopPlaying\"\n @playPauseStatus=\"changePlayPause\"\n @updateSlider=\"updateSlider\"\n :playback-rate=\"playbackRate\"\n style=\"margin: 0 auto\"\n ></frame>\n </div>\n </div>\n </div>\n <!-- <settings\n ref=\"settings2\"\n :active=\"active\"\n @goToTime=\"changeHour\"\n @goToBlockInterval=\"changeBlockInterval\"\n @setSplitTime=\"setSplitTime\"\n @setFrameSelection=\"setFrameSelection\"\n @setPlaybackRate=\"\n (rate) => {\n playbackRate = rate\n }\n \"\n >\n </settings> -->\n <!-- <v-dialog v-model=\"dialog\" width=\"500\">\n <div class=\"card\">\n <div class=\"card\"-title class=\"text-h5 grey lighten-2\">\n {{ ' Último bloco disponível até: ' }}\n <v-btn\n @click=\"goToStartBlock\"\n class=\"ml-2\"\n dark\n color=\"success\"\n depressed\n >\n <v-icon left> fa-clock </v-icon>\n {{ timeLastBlock }}\n </v-btn>\n <v-spacer></v-spacer>\n <v-btn color=\"error\" fab small class=\"ml-5\" @click=\"dialog = false\">\n <v-icon dark> fa fa-xmark </v-icon>\n </v-btn>\n </div-title>\n </div>\n </v-dialog>\n <Help :media=\"media\" @close=\"media = null\" />\n <v-dialog\n v-if=\"userMultiTabsGrid\"\n v-model=\"userMultiTabsGridsModel\"\n persistent\n width=\"60%\"\n >\n <div class=\"card\">\n <div class=\"card\"-title class=\"warning text-h5\" primary-title>\n <div class=\"row\" class=\"ma-0\" justify=\"center\" align=\"center\">\n <v-icon dark left style=\"font-size: 24px !important\">\n fa fa-exclamation-triangle\n </v-icon>\n <div style=\"color: white\">{{ $t('form.alert') }}</div>\n </div>\n </div-title>\n <div class=\"card\"-text class=\"justify-center pa-6 grey lighten-2\">\n <h3>\n {{ $t('alerts.userMultiTabsGrid') }}\n </h3>\n </div-text>\n <hr class=\"divider\" class=\"grey lighten-1\"></span>\n <div class=\"card\"-actions class=\"grey lighten-2 justify-center\">\n <v-btn color=\"error\" ml-5 @click=\"userMultiTabsGrid = false\">\n <v-icon left color=\"white\">fa fa-times</v-icon>\n {{ $t('form.close') }}\n </v-btn>\n </div-actions>\n </div>\n </v-dialog> -->\n </div>\n</template>\n<script>\nimport Frame from './components/Frame.vue'\nimport FramesInterface from './utils/FramesInterface.js'\nimport FramesService from './services/FramesService.js'\n\nimport Commands from './components/Commands.vue'\nimport Infos from './components/Infos.vue'\nimport VideoProgress from './components/VideoProgress.vue'\nimport Settings from './components/Settings.vue'\n\nconst Positions = Object.freeze({\n previous: 0,\n current: 1,\n next: 2,\n})\n\nexport default {\n name: 'visualization-container',\n props: {\n value: {\n type: Boolean,\n required: true,\n },\n date: {\n type: String,\n required: true,\n },\n channel: {\n type: Number,\n required: true,\n },\n startAudienceTime: {\n type: String,\n required: true,\n },\n videoProgressBar: {\n type: Boolean,\n default: false,\n },\n jumpOnInsert: {\n type: Boolean,\n default: false,\n },\n framesFormat: {\n type: [Number, String],\n default: 6,\n },\n maxSize: {\n type: Number,\n }\n },\n components: {\n Frame,\n CommandBar: Commands,\n InfoBar: Infos,\n VideoProgress,\n Settings,\n // Help,\n },\n data() {\n return {\n Positions,\n updatingChannel: null,\n dialog: false,\n timeLastBlock: null,\n alternativeServer: false,\n useCache: true,\n numberOfRows: 1,\n framesPerRow: 5,\n secondsPerFrame: 1,\n fInterface: null,\n velocity: 1,\n frames: [],\n previousFrames: [],\n nextFrames: [],\n channelCode: 0,\n videoPlaying: false,\n activeFrame: null,\n activeVideo: null,\n videoTime: 0,\n videoTotalTime: null,\n progressVideoDrag: false,\n hourIniSelected: false,\n hourEndSelected: false,\n canInsertTime: false,\n lastHeight: 0,\n loopInterval: null,\n nextLoop: false,\n prevLoop: false,\n videoSliderTotalDuration: 900,\n blockStartTime: null,\n media: null,\n changeServer: false,\n userMultiTabsGrid: false,\n userMultiTabsGridsModel: true,\n playbackRate: 1,\n paused: false,\n commandBarShow: true,\n dialogs: {\n playbackRate: false,\n goTo: false,\n secondsPerFrame: false,\n frames: false,\n },\n }\n },\n async created() {\n this.changeServer = this.serverOfFrames === 'alternative'\n this.alternativeServer = this.serverOfFrames === 'alternative'\n\n const settings = [\n {\n framesPerRow: 2,\n numberOfRows: 1,\n },\n {\n framesPerRow: 3,\n numberOfRows: 1,\n },\n {\n framesPerRow: 3,\n numberOfRows: 2,\n },\n {\n framesPerRow: 4,\n numberOfRows: 1,\n },\n {\n framesPerRow: 4,\n numberOfRows: 2,\n },\n {\n framesPerRow: 5,\n numberOfRows: 1,\n },\n {\n framesPerRow: 5,\n numberOfRows: 2,\n },\n {\n framesPerRow: 6,\n numberOfRows: 1,\n },\n {\n framesPerRow: 6,\n numberOfRows: 2,\n },\n ]\n\n const storedOnDb = settings[parseInt(this.framesFormat) - 1]\n this.framesPerRow = storedOnDb.framesPerRow\n this.numberOfRows = storedOnDb.numberOfRows\n\n await this.createFramesInterface()\n if (this.maxSize) {\n this.resize(this.maxSize, true)\n }\n },\n methods: {\n framesClicked(e) {\n if (e.target.id != 'insert') {\n this.active = true\n }\n },\n async goToStartBlock() {\n try {\n const d = new Date()\n let timestamp = Date.UTC(\n d.getFullYear(),\n d.getMonth(),\n d.getDate(),\n d.getHours(),\n d.getMinutes(),\n d.getSeconds()\n )\n\n const response = (\n await FramesService.getNextAvailableBlock({\n channel: this.channel,\n time: timestamp / 1000,\n })\n ).data\n\n this.dialog = false\n this.changeHour(this.convertToAudienceTime(response.data.start, ':'))\n } catch (err) {\n console.error(err)\n }\n },\n async checkAvailableBlock() {\n try {\n const d = new Date()\n let timestamp = Date.UTC(\n d.getFullYear(),\n d.getMonth(),\n d.getDate(),\n d.getHours(),\n d.getMinutes(),\n d.getSeconds()\n )\n\n const response = (\n await FramesService.getNextAvailableBlock({\n channel: this.channel,\n time: timestamp / 1000,\n })\n ).data\n\n this.timeLastBlock = this.convertToAudienceTime(response.data.end, ':')\n this.dialog = true\n if (!response.status) {\n this.timeLastBlock = 'N/D'\n }\n } catch (err) {\n console.error(err)\n }\n },\n updateSlider(videoStartTime, time) {\n // * atualizar slider se estiver fora do range definido previamente\n if (\n time < this.blockStartTime ||\n time > this.blockStartTime ||\n videoStartTime > this.blockStartTime + this.videoSliderTotalDuration\n ) {\n this.blockStartTime = videoStartTime\n this.videoSliderTotalDuration = 900\n }\n },\n nextLoopActivate() {\n this.breakLoop()\n this.loopInterval = setInterval(this.next, 40)\n setTimeout(() => {\n this.nextLoop = true\n }, 0)\n },\n prevLoopActivate() {\n this.breakLoop()\n this.loopInterval = setInterval(this.prev, 40)\n setTimeout(() => {\n this.prevLoop = true\n }, 0)\n },\n breakLoop() {\n clearInterval(this.loopInterval)\n this.loopInterval = null\n this.nextLoop = false\n this.prevLoop = false\n },\n changePlayPause(status) {\n this.paused = !status\n },\n resize(height=this.lastHeight) {\n this.lastHeight = height\n if (this.$refs.frames) {\n for (let frame of this.$refs.frames) {\n frame.resize(height)\n }\n }\n this.$emit('resized')\n },\n async goToFirstFrame() {\n let frames = this.$refs.frames\n\n let audienceTime = null\n if (frames.length > 0) {\n let frame = frames[0].frame\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n }\n // if (audienceTime) {\n // this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n // }\n if (audienceTime) {\n const [hours, minutes, seconds] = audienceTime.split(':')\n const totalSeconds =\n parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)\n if (totalSeconds >= 9000)\n this.changeHour(this.getLastFirtsBlockTime(audienceTime, true))\n else this.changeHour(this.getLastFirtsBlockTime('02:30:00', true))\n }\n },\n async goToLastFrame() {\n let frames = this.$refs.frames\n let audienceTime = null\n if (frames.length > 0) {\n let frame = frames[0].frame\n\n audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n }\n if (audienceTime) {\n this.changeHour(this.getLastFirtsBlockTime(audienceTime))\n }\n },\n getLastFirtsBlockTime(time, first = false) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n let h, m, newTime\n const t = time.match(/.{1,2}/g)\n if (t[0] && t[1]) {\n h = parseInt(t[0])\n m = parseInt(t[1])\n }\n if (h < 26) {\n if (m < 15)\n if (first) newTime = t[0] + ':00:00'\n else newTime = t[0] + ':14:59'\n else if (m < 30)\n if (first) newTime = t[0] + ':15:00'\n else newTime = t[0] + ':29:59'\n else if (m < 45)\n if (first) newTime = t[0] + ':30:00'\n else newTime = t[0] + ':44:59'\n else if (first) newTime = t[0] + ':45:00'\n else newTime = t[0] + ':59:59'\n } else {\n if (m < 15)\n if (first) newTime = '26:00:00'\n else newTime = '26:14:59'\n else {\n if (first) newTime = '26:15:00'\n else newTime = '26:29:59'\n }\n }\n return newTime\n },\n openBlocks() {\n this.$refs.settings2?.openBlocks()\n },\n playOrPause() {\n const array = this.$refs.frames.filter((fc) => !!fc.active)\n if (array.length === 1) {\n const frame = array[0]\n frame.playOrPause(this.playbackRate)\n }\n },\n stopPlayingBar() {\n for (let ref of this.$refs.frames) {\n if (\n ref.videoStatus === ref.Status.playing ||\n ref.videoStatus === ref.Status.paused\n ) {\n ref.stop(false)\n }\n }\n },\n async setFrameSelection(selected) {\n this.frames = this.loadingArray\n switch (parseInt(selected)) {\n // 2x1\n case 1:\n this.framesPerRow = 2\n this.numberOfRows = 1\n break\n // 3x1\n case 2:\n this.framesPerRow = 3\n this.numberOfRows = 1\n break\n // 3x2\n case 3:\n this.framesPerRow = 3\n this.numberOfRows = 2\n break\n // 4x1\n case 4:\n this.framesPerRow = 4\n this.numberOfRows = 1\n break\n // 4x2\n case 5:\n this.framesPerRow = 4\n this.numberOfRows = 2\n break\n // 5x1\n case 6:\n this.framesPerRow = 5\n this.numberOfRows = 1\n break\n // 5x2\n case 7:\n this.framesPerRow = 5\n this.numberOfRows = 2\n break\n // 6x1\n case 8:\n this.framesPerRow = 6\n this.numberOfRows = 1\n break\n // 6x2\n case 9:\n this.framesPerRow = 6\n this.numberOfRows = 2\n break\n }\n await this.fInterface.changeSize(this.numberOfRows, this.framesPerRow)\n this.getFramesArray()\n setTimeout(() => {\n for (let ref of this.$refs.frames) {\n ref?.resize(this.lastHeight)\n }\n }, 150)\n },\n getFramesArray() {\n this.frames = this.fInterface.getFrames(Positions.current)\n this.nextFrames = this.fInterface.getFrames(Positions.next)\n this.previousFrames = this.fInterface.getFrames(Positions.previous)\n },\n async createFramesInterface() {\n this.frames = this.loadingArray\n let ch = this.channel\n let associationTMP = {\n 1735073: 1,\n 1735074: 139,\n 1735075: 3,\n 1735076: 132,\n }\n //\n this.channelCode = associationTMP[ch] ? associationTMP[ch] : ch\n\n const t = this.startAudienceTime.match(/.{1,2}/g)\n const d = this.getDateParts()\n const time = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n // * iniciar slider\n this.blockStartTime = time\n this.fInterface = await new FramesInterface(\n this.channelCode,\n this.numberOfRows,\n this.framesPerRow,\n time,\n this.startAudienceTime,\n this.useCache\n )\n await this.fInterface.init()\n\n this.getFramesArray()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n\n this.activeVideo = null\n },\n getIndex(rowNumber, frameIndex, position) {\n let from = this.framesPerRow * this.numberOfRows * position\n let till = this.framesPerRow * this.numberOfRows * (position + 1)\n\n return (from + till * (rowNumber - 1)) / rowNumber + frameIndex\n },\n getAudienceTime(frameTime, rowNumber, frameNumber, position) {\n if (!frameTime) {\n return 'Loading...'\n } else if (\n this.getIndex(rowNumber, frameNumber, position) === this.activeVideo\n ) {\n return this.convertToAudienceTime(this.videoTime)\n } else {\n return this.convertToAudienceTime(frameTime)\n }\n },\n dateInUtc(miliSeconds) {\n var date = new Date(miliSeconds)\n var utc = new Date(\n date.getUTCFullYear(),\n date.getUTCMonth(),\n date.getUTCDate(),\n date.getUTCHours(),\n date.getUTCMinutes(),\n date.getUTCSeconds()\n )\n return utc\n },\n convertToAudienceTime(time, separator = ':') {\n const d = this.getDateParts()\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n\n let hour = this.dateInUtc(time * 1000)\n .toTimeString()\n .split(' ')[0]\n .split(':')\n .map(Number)\n\n if (time > limit && time <= limit + this.startAudienceSeconds) {\n hour[0] = 24 + hour[0]\n }\n return hour\n .map((part) => (part > 9 ? part.toString() : '0' + part))\n .join(separator)\n },\n getDateParts(date = this.date) {\n const d = new Date(date)\n return {\n year: d.getFullYear(),\n month: d.getMonth(),\n day: d.getDate(),\n }\n },\n selectFrame(index, frame) {\n const d = this.getDateParts()\n const limit = Date.UTC(d.year, d.month, d.day, 23, 59, 59) / 1000\n const frameTime = frame?.time\n\n if (frameTime - (this.startAudienceSeconds + limit) <= 0) {\n if (this.hourIniSelected === true) {\n this.hourIniSelected = frameTime\n\n if (\n this.hourEndSelected &&\n this.hourIniSelected > this.hourEndSelected\n ) {\n this.hourEndSelected = false\n }\n } else if (this.hourEndSelected === true) {\n if (frameTime > this.hourIniSelected) {\n this.hourEndSelected = frameTime\n this.canInsertTime = true\n } else {\n this.hourEndSelected = false\n }\n }\n }\n\n if (this.activeFrame !== index) {\n // ? Se clicar no frame diferente de onde está a dar play, faz pausa\n const array = this.$refs.frames.filter(\n (fc) => fc.videoStatus === fc.Status.playing\n )\n if (array.length === 1) {\n const frame = array[0]\n frame.playOrPause()\n }\n this.activeVideo = null\n this.activeFrame = index\n }\n },\n setHourIni() {\n this.canInsertTime = true\n this.hourIniSelected = true\n document.getElementById(`frame-${this.activeFrame}`).click()\n this.$emit('setHourIni', {\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n })\n },\n setHourEnd() {\n this.canInsertTime = true\n this.hourEndSelected = true\n document.getElementById(`frame-${this.activeFrame}`).click()\n },\n //* Navegação\n arrowRight() {\n if (this.checkLimitRight(false)) {\n if (\n this.activeFrame ===\n this.numberOfRows * this.framesPerRow * 2 - 1\n ) {\n this.next()\n } else {\n this.activeFrame++\n }\n }\n },\n arrowLeft() {\n if (this.checkLimitLeft(false)) {\n if (this.activeFrame === this.numberOfRows * this.framesPerRow) {\n this.prev()\n } else {\n this.activeFrame--\n }\n }\n },\n checkLimitRight(value) {\n const d = this.getDateParts()\n const high = Date.UTC(d.year, d.month, d.day, 26, 29, 59)\n\n if (value) {\n return (\n high > (this.fInterface.getCurrentTime() - 1) * 1000 &&\n this.nextFrames[0].title !== -1\n )\n } else {\n // return high > (this.fInterface.getCurrentTime() + this.activeFrame) * 1000\n return high > this.fInterface.getCurrentTime() * 1000\n }\n },\n checkLimitLeft(value) {\n const d = this.getDateParts()\n const low = Date.UTC(d.year, d.month, d.day, 2, 30, 0)\n\n if (value) {\n return low <= (this.fInterface.getCurrentTime() - 1) * 1000\n } else {\n return (\n low <\n (this.fInterface.getCurrentTime() +\n this.activeFrame -\n this.numberOfRows * this.framesPerRow) *\n 1000\n )\n }\n },\n async next() {\n if (this.checkLimitRight(true)) {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n this.fInterface.setCurrentStep(this.secondsPerFrame)\n await this.fInterface.loadNextFrames()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n this.activeVideo = null\n\n this.getFramesArray()\n }\n },\n async prev() {\n if (this.checkLimitLeft(true)) {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n\n this.fInterface.setCurrentStep(this.secondsPerFrame)\n await this.fInterface.loadPrevFrames()\n\n this.activeFrame = this.getIndex(\n this.numberOfRows,\n this.framesPerRow - 1,\n Positions.current\n )\n this.activeVideo = null\n\n this.getFramesArray()\n }\n },\n async setStartTime(time) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n const t = time.match(/.{1,2}/g)\n const d = this.getDateParts()\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n this.frames = this.loadingArray\n\n await this.fInterface.changeTime(setTime)\n\n this.getFramesArray()\n\n this.activeFrame = this.getIndex(1, 0, Positions.current)\n // let frames = this.$refs.frames\n\n // let audienceTime = null\n // if (frames.length > 0) {\n // let frame = frames[0].frame\n // audienceTime = this.getAudienceTime(frame.time, 0, 0, 0)\n // }\n\n this.activeVideo = null\n\n return true\n },\n hourToTimeStamp(time) {\n if (time.indexOf(':') !== -1) {\n time = time.replace(/:/g, '')\n }\n const t = time.match(/.{1,2}/g)\n const d = this.getDateParts()\n const setTime = Date.UTC(d.year, d.month, d.day, t[0], t[1], t[2]) / 1000\n\n return setTime\n },\n async changeHour(value) {\n if (value) {\n setTimeout(() => {\n const array = this.$refs.frames.filter(\n (fc) =>\n fc.videoStatus === fc.Status.playing ||\n fc.videoStatus === fc.Status.paused\n )\n\n if (array.length === 1) {\n const frame = array[0]\n frame.stop(false)\n }\n\n this.setStartTime(value, true)\n }, 0)\n }\n },\n changeBlockInterval(value) {\n this.changeHour(value.ini)\n let time_ini, time_end\n time_ini = this.hourToTimeStamp(value.ini)\n time_end = this.hourToTimeStamp(value.end)\n this.videoSliderTotalDuration = time_end - time_ini\n this.$refs.frames[0].changeSettings(time_ini)\n this.blockStartTime = time_ini\n },\n //eslint-disable-next-line\n async updateVideoTime(index, videoTime) {\n this.activeVideo = index\n this.videoTime = videoTime\n },\n //eslint-disable-next-line\n updateVideoStatus(currentTime) {\n if (!this.progressVideoDrag) {\n // ESTA FUNÇÃO PASSOU PARA DENTRO DOS COMMANDS\n // this.updateProgress(null, currentTime)\n }\n },\n async startPlaying(frame, totalTime) {\n const array = this.$refs.frames.filter(\n (fc) => fc.frame.time !== frame.time\n )\n\n for (let ref of array) {\n if (\n ref.videoStatus === ref.Status.playing ||\n ref.videoStatus === ref.Status.paused\n ) {\n ref.stop(false)\n }\n }\n\n this.videoTotalTime = totalTime\n this.videoPlaying = true\n },\n stopPlaying() {\n this.videoTotalTime = null\n this.videoPlaying = false\n this.paused = false\n },\n insertTime() {\n this.$emit('timeToInsert', {\n channel: this.channel,\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n hour_end: this.hourEndSelected\n ? this.convertToAudienceTime(this.hourEndSelected, '')\n : null,\n force: false,\n })\n\n if (this.jumpOnInsert) {\n this.changeHour(\n this.convertToAudienceTime(\n (this.hourEndSelected || this.hourIniSelected) + 1\n )\n )\n }\n\n this.hourIniSelected = null\n this.hourEndSelected = null\n this.canInsertTime = false\n\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\n },\n insertTimeForce() {\n this.$emit('timeToInsert', {\n channel: this.channel,\n hour_ini: this.hourIniSelected\n ? this.convertToAudienceTime(this.hourIniSelected, '')\n : null,\n hour_end: this.hourEndSelected\n ? this.convertToAudienceTime(this.hourEndSelected, '')\n : null,\n force: true,\n })\n\n this.hourIniSelected = null\n this.hourEndSelected = null\n this.canInsertTime = false\n\n // this.fInterface.setCurrentPosition(this.hourEndSelected)\n },\n async getChannelMedia() {\n // this.media = (await ChannelService.show(this.channel)).data.MEDIA\n },\n async changeServerClick() {\n this.changeServer = !this.changeServer\n // this.$store.dispatch(\n // 'serverOfFrames',\n // this.changeServer ? 'alternative' : 'default'\n // )\n sessionStorage.setItem(\n 'serverOfFrames',\n this.changeServer ? 'alternative' : 'default'\n )\n\n // if (this.$route.params.time != this.frames[0].time)\n // this.$router.push({\n // name: 'grid',\n // params: {\n // date: this.date,\n // channel: this.channelCode,\n // time: this.frames[0].time,\n // },\n // })\n location.reload()\n },\n },\n computed: {\n active: {\n get() {\n return this.value\n },\n set(value) {\n this.$emit('input', value)\n },\n },\n settingsClosed() {\n return !Object.values(this.dialogs).find((v) => v)\n },\n startAudienceSeconds() {\n const t = this.startAudienceTime.match(/.{1,2}/g)\n return parseInt(t[0] * 3600 + t[1] * 60 + t[2])\n },\n loadingArray() {\n return Array.from(Array(this.numberOfRows * this.framesPerRow).keys())\n },\n serverOfFrames() {\n return sessionStorage.getItem('server')\n },\n },\n watch: {\n framesFormat(value) {\n this.setFrameSelection(value)\n },\n active() {\n // ? sempre que trocamos de tabs dar reset as horas selected\n this.hourIniSelected = false\n this.hourEndSelected = false\n },\n useCache() {\n this.createFramesInterface()\n },\n hourIniSelected(value) {\n if (value) {\n sessionStorage.setItem(\n 'currentTimeFrames',\n this.convertToAudienceTime(this.hourIniSelected, '')\n )\n } else {\n sessionStorage.removeItem('currentTimeFrames')\n }\n },\n activeFrame(value) {\n if (value) {\n this.stopPlayingBar()\n }\n },\n channel() {\n this.updatingChannel = new Promise((resolve, reject) => {\n try {\n this.createFramesInterface()\n resolve(true)\n } catch (err) {\n reject(err)\n }\n })\n },\n },\n}\n</script>\n<style scoped>\n.visualization-row, /deep/ .visualization-row {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n}\n\n.visualization-col {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n}\n\n.visualization-divider {\n display: block;\n flex: 1 1 100%;\n height: 0px;\n max-height: 0px;\n opacity: 1;\n transition: inherit;\n border-style: solid;\n border-width: thin 0 0 0;\n border-color: rgba(0, 0, 0, 0.12);\n margin: 0;\n}\n\n.visualization-divider.vertical {\n align-self: stretch;\n border-width: 0 thin 0 0;\n display: inline-flex;\n height: inherit;\n margin-left: -1px;\n max-height: 100%;\n max-width: 0px;\n vertical-align: text-bottom;\n width: 0px;\n}\n\n.visualization-card {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n padding: 12px;\n width: 100%;\n transition-property: box-shadow, opacity, -webkit-box-shadow;\n overflow-wrap: break-word;\n /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/\n}\n\n.visualization-justify-center, /deep/ .visualization-justify-center {\n justify-content: center;\n}\n\n.visualization-align-center {\n align-items: center;\n}\n\n#visualization-container {\n max-width: 100% !important;\n margin: 0 auto !important;\n height: 100%;\n border-bottom: none;\n}\n#visualization-container > .card {\n border-radius: 0 !important;\n font-size: 12px;\n width: 100%;\n box-shadow: none;\n height: 100%;\n}\n\n#command-bar,\n#info-bar {\n background-color: #f5f5f5;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n#command-bar button {\n width: 42px;\n height: 36px;\n border: none;\n background: none;\n}\n\n#command-bar button:hover {\n cursor: pointer;\n background: rgba(0, 0, 0, 0.12);\n}\n\n#command-bar svg {\n font-size: 16px;\n}\n\n#command-bar {\n padding: 0 !important;\n}\n\n#info-bar {\n padding: 4px;\n font-size: 14px;\n position: relative;\n}\n\n.settings-container {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.settings-container > * {\n margin: 0 2px;\n cursor: pointer;\n}\n\n#info-bar svg {\n font-size: 16px;\n}\n\n#info-bar .divider {\n margin: 0 8px;\n}\n\nsvg:focus {\n border: none;\n}\n\n.visualization-card {\n border-left: 8px solid #eee;\n}\n\n.active-tab {\n border-left: 8px solid var(--visualization-primary) !important;\n border-image-slice: 1;\n}\n\n[id^='frame-'] {\n padding: 1px;\n display: flex;\n flex-flow: column;\n}\n\n.tooltip {\n display: block !important;\n z-index: 10000;\n}\n\n.tooltip .tooltip-inner {\n background: var(--visualization-primary);\n color: white;\n border-radius: 16px;\n padding: 5px 10px 4px;\n}\n\n.tooltip .tooltip-arrow {\n width: 0;\n height: 0;\n border-style: solid;\n position: absolute;\n margin: 5px;\n border-color: var(--visualization-primary);\n z-index: 1;\n}\n\n.tooltip[x-placement^='top'] {\n margin-bottom: 5px;\n}\n\n.tooltip[x-placement^='top'] .tooltip-arrow {\n border-width: 5px 5px 0 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n bottom: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.tooltip[x-placement^='bottom'] {\n margin-top: 5px;\n}\n\n.tooltip[x-placement^='bottom'] .tooltip-arrow {\n border-width: 0 5px 5px 5px;\n border-left-color: transparent !important;\n border-right-color: transparent !important;\n border-top-color: transparent !important;\n top: -5px;\n left: calc(50% - 5px);\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.tooltip[x-placement^='right'] {\n margin-left: 5px;\n}\n\n.tooltip[x-placement^='right'] .tooltip-arrow {\n border-width: 5px 5px 5px 0;\n border-left-color: transparent !important;\n border-top-color: transparent !important;\n border-bottom-color: transparent !important;\n left: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n\n.tooltip[x-placement^='left'] {\n margin-right: 5px;\n}\n\n.tooltip[x-placement^='left'] .tooltip-arrow {\n border-width: 5px 0 5px 5px;\n border-top-color: transparent !important;\n border-right-color: transparent !important;\n border-bottom-color: transparent !important;\n right: -5px;\n top: calc(50% - 5px);\n margin-left: 0;\n margin-right: 0;\n}\n\n.tooltip.popover .popover-inner {\n background: #f9f9f9;\n color: black;\n padding: 24px;\n border-radius: 5px;\n box-shadow: 0 5px 30px rgba(black, 0.1);\n}\n\n.tooltip.popover .popover-arrow {\n border-color: #f9f9f9;\n}\n\n.tooltip[aria-hidden='true'] {\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.15s, visibility 0.15s;\n}\n\n.tooltip[aria-hidden='false'] {\n visibility: visible;\n opacity: 1;\n transition: opacity 0.15s;\n}\n</style>\n"]}, media: undefined });
|
|
4475
4475
|
|
|
4476
4476
|
};
|
|
4477
4477
|
/* scoped */
|
|
4478
|
-
const __vue_scope_id__ = "data-v-
|
|
4478
|
+
const __vue_scope_id__ = "data-v-e02ee6e8";
|
|
4479
4479
|
/* module identifier */
|
|
4480
4480
|
const __vue_module_identifier__ = undefined;
|
|
4481
4481
|
/* functional template */
|