@twab/visualization 1.5.1 → 1.5.2
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 +12 -7
- package/package.json +1 -1
package/dist/visualization.js
CHANGED
|
@@ -349,7 +349,7 @@ var script$5 = {
|
|
|
349
349
|
this.videoUrlString =
|
|
350
350
|
this.parentComponent.fInterface.getVideoRequestByUrl(
|
|
351
351
|
blockInfo.url,
|
|
352
|
-
this.frame.number
|
|
352
|
+
this.frame.number + this.parentComponent.shiftFrames
|
|
353
353
|
);
|
|
354
354
|
} catch (error) {
|
|
355
355
|
console.log(error);
|
|
@@ -438,7 +438,7 @@ var script$5 = {
|
|
|
438
438
|
async videoEnded() {
|
|
439
439
|
this.videoStartTime =
|
|
440
440
|
await this.parentComponent.fInterface?.getNextVideoStartTime(
|
|
441
|
-
this.frame.time
|
|
441
|
+
this.frame.time - this.parentComponent.shiftFrames
|
|
442
442
|
);
|
|
443
443
|
this.videoUrlString = this.parentComponent.fInterface.getVideoUrlForTime(
|
|
444
444
|
this.videoStartTime
|
|
@@ -785,11 +785,11 @@ __vue_render__$5._withStripped = true;
|
|
|
785
785
|
/* style */
|
|
786
786
|
const __vue_inject_styles__$5 = function (inject) {
|
|
787
787
|
if (!inject) return
|
|
788
|
-
inject("data-v-1491e06a_0", { source: "\n.frame-container > div[data-v-1491e06a] {\r\n max-height: 100%;\n}\n.frame-container[data-v-1491e06a] {\r\n background-color: black;\r\n display: flex;\r\n justify-content: center;\n}\n.frame-content[data-v-1491e06a],\r\n.dummy-frame[data-v-1491e06a] {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\n}\n.frame-content video[data-v-1491e06a] {\r\n flex-grow: 1;\r\n object-fit: fill;\r\n z-index: 0;\n}\n.overlay[data-v-1491e06a] {\r\n width: 100%;\r\n height: 100%;\r\n z-index: 5;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n border: 4px solid transparent;\r\n pointer-events: none;\n}\n.active .overlay[data-v-1491e06a] {\r\n border-color: var(--visualization-primary);\n}\n.between-time .overlay[data-v-1491e06a] {\r\n border-top-color: var(--visualization-secondary);\n}\n.between-time.active .overlay[data-v-1491e06a] {\r\n border-color: var(--visualization-secondary);\n}\n.initial-time .overlay[data-v-1491e06a] {\r\n border-top-color: var(--visualization-start);\n}\n.initial-time.active .overlay[data-v-1491e06a] {\r\n border-color: var(--visualization-start);\n}\n.end-time .overlay[data-v-1491e06a] {\r\n border-top-color: var(--visualization-end);\n}\n.end-time.active .overlay[data-v-1491e06a] {\r\n border-color: var(--visualization-end);\n}\n.initial-time.end-time .overlay[data-v-1491e06a] {\r\n border-top-color: var(--visualization-start);\r\n border-bottom-color: var(--visualization-end);\n}\n.initial-time.end-time.active .overlay[data-v-1491e06a] {\r\n border-top-color: var(--visualization-start);\r\n border-left-color: var(--visualization-start);\r\n border-bottom-color: var(--visualization-end);\r\n border-right-color: var(--visualization-end);\n}\n.div-frame[data-v-1491e06a] img {\r\n width: 90vh !important;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Frame.vue"],"names":[],"mappings":";AAuZA;EACA,gBAAA;AACA;AACA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;AACA;AACA;;EAEA,aAAA;EACA,mBAAA;EACA,uBAAA;AACA;AACA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,6BAAA;EACA,oBAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,gDAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,wCAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,sCAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;EACA,6CAAA;EACA,4CAAA;AACA;AACA;EACA,sBAAA;AACA","file":"Frame.vue","sourcesContent":["<template>\r\n <div\r\n :style=\"{\r\n maxHeight: `${maxHeight}px`,\r\n width: '100%',\r\n position: 'relative',\r\n }\"\r\n :class=\"{\r\n 'frame-container': true,\r\n 'initial-time': initialTime,\r\n 'end-time': endTime,\r\n 'between-time': betweenTime,\r\n active: active,\r\n }\"\r\n >\r\n <GlobalEvents\r\n v-if=\"active && activeTab && parentComponent.settingsClosed\"\r\n @keydown.32.prevent=\"playOrPause\"\r\n @keydown.27.prevent=\"stop\"\r\n @keydown.79=\"toogleDetailFrame\"\r\n @keydown.13.prevent=\"jumpFrameToStart\"\r\n />\r\n <GlobalEvents\r\n v-if=\"showFrame\"\r\n @keydown.27.prevent=\"toogleDetailFrame\"\r\n @keydown.13.prevent=\"toogleDetailFrame\"\r\n />\r\n\r\n <vue-loading\r\n :active=\"isLoading\"\r\n spinner=\"ring\"\r\n color=\"var(--visualization-primary)\"\r\n background-color=\"#cacaca\"\r\n :style=\"{\r\n 'z-index': 0,\r\n minHeight: `${height}px`,\r\n minWidth: `${width}px`,\r\n }\"\r\n :text=\"videoIsLoading ? $t('infoBar.createVideo') : ''\"\r\n />\r\n <div style=\"background-color: black\">\r\n <div\r\n v-if=\"!isLoading\"\r\n :class=\"{\r\n 'frame-content': frame.title === -1 || videoStatus !== Status.stopped,\r\n }\"\r\n :style=\"{\r\n minHeight: `${height}px`,\r\n minWidth: `${width}px`,\r\n maxHeight: `${height}px`,\r\n maxWidth: `${width}px`,\r\n color: 'white',\r\n }\"\r\n @dblclick=\"playOrPause\"\r\n >\r\n <div\r\n v-if=\"frame.image && videoStatus === Status.stopped\"\r\n :class=\"{ 'dummy-frame': frame.title === -1 }\"\r\n v-html=\"frame.image\"\r\n style=\"width: 100%; height: 100%\"\r\n />\r\n <video\r\n v-if=\"\r\n !videoOnModal && videoStatus !== Status.stopped && !videoIsLoading\r\n \"\r\n ref=\"videoPlayer\"\r\n :maxHeight=\"`${height}px`\"\r\n :maxWidth=\"`${width}px`\"\r\n :src=\"videoUrlString\"\r\n preload=\"none\"\r\n autoplay\r\n @timeupdate=\"updateTimeLabel\"\r\n @ended=\"videoEnded\"\r\n @click=\"playOrPause\"\r\n style=\"width: 100%; aspect-ratio: 11/9\"\r\n :controls=\"videoControls\"\r\n ></video>\r\n <div v-if=\"!loading\" class=\"overlay\"></div>\r\n </div>\r\n </div>\r\n\r\n <dialog\r\n ref=\"imageDetailsDialog\"\r\n :class=\"{ 'dummy-frame': frame.title === -1 }\"\r\n style=\"\r\n top: 50%;\r\n left: 50%;\r\n transform: translateY(-50%) translateX(-50%);\r\n border: none;\r\n background: grey;\r\n width: 60%;\r\n \"\r\n >\r\n <div\r\n v-if=\"videoStatus == Status.stopped\"\r\n style=\"justify-content: center; display: flex\"\r\n class=\"div-frame\"\r\n v-html=\"frame.image\"\r\n @dblclick=\"changeToVideo\"\r\n ></div>\r\n <video\r\n v-if=\"videoOnModal && videoStatus !== Status.stopped && !videoIsLoading\"\r\n ref=\"videoPlayer\"\r\n :src=\"videoUrlString\"\r\n preload=\"none\"\r\n autoplay\r\n @ended=\"videoEnded\"\r\n style=\"width: 100%; aspect-ratio: 11/9\"\r\n controls=\"true\"\r\n width=\"200%\"\r\n ></video>\r\n </dialog>\r\n </div>\r\n</template>\r\n<script>\r\nimport VueLoading from 'vue-loading-twa'\r\n\r\nconst Status = Object.freeze({\r\n stopped: 0,\r\n playing: 1,\r\n paused: 2,\r\n})\r\n\r\nexport default {\r\n components: {\r\n VueLoading,\r\n },\r\n name: 'frame-component',\r\n props: {\r\n frame: {\r\n type: [Object, Number],\r\n required: true,\r\n },\r\n index: {\r\n type: Number,\r\n required: true,\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n gridSettings: {\r\n type: Object,\r\n required: true,\r\n },\r\n initialTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n endTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n betweenTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n active: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n activeTab: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n videoUrl: {\r\n type: [String, Promise],\r\n required: true,\r\n },\r\n playbackRate: {\r\n type: Number,\r\n default: 1,\r\n },\r\n videoControls: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n data() {\r\n return {\r\n Status,\r\n aspectRatio: 11 / 9,\r\n width: 0,\r\n height: 0,\r\n maxWidth: 0,\r\n fullMaxWidth: 0,\r\n maxHeight: 0,\r\n showFrame: false,\r\n videoStatus: Status.stopped,\r\n videoStartTime: null,\r\n videoCurrentTime: null,\r\n videoUrlString: '',\r\n parentComponent: null,\r\n videoIsLoading: false,\r\n currentBlock: null,\r\n lastTimeEnterPressed: null,\r\n videoOnModal: false,\r\n }\r\n },\r\n created() {\r\n this.parentComponent = this.$parent\r\n },\r\n watch: {\r\n playbackRate(val) {\r\n if (\r\n this.videoStatus === Status.playing ||\r\n this.videoStatus === Status.paused\r\n ) {\r\n this.$refs.videoPlayer.playbackRate = val\r\n }\r\n },\r\n },\r\n computed: {\r\n isLoading() {\r\n return (\r\n ((!this.frame.image || !this.frame.time) && this.frame.title !== -1) ||\r\n this.loading ||\r\n this.videoIsLoading\r\n )\r\n },\r\n },\r\n methods: {\r\n changeToVideo() {\r\n this.videoOnModal = true\r\n this.playOrPause()\r\n },\r\n jumpFrameToStart() {\r\n if (this.active) {\r\n const currentTime = new Date().getTime()\r\n\r\n if (currentTime - this.lastTimeEnterPressed <= 500) {\r\n this.parentComponent.changeHour(\r\n this.parentComponent.convertToAudienceTime(this.frame.time)\r\n )\r\n }\r\n\r\n this.lastTimeEnterPressed = currentTime\r\n }\r\n },\r\n changeSettings(value) {\r\n this.videoCurrentTime = value\r\n },\r\n toogleDetailFrame() {\r\n this.stop()\r\n if (this.showFrame) {\r\n this.videoOnModal = false\r\n this.$refs.imageDetailsDialog.close()\r\n } else {\r\n this.$refs.imageDetailsDialog.showModal()\r\n }\r\n this.showFrame = !this.showFrame\r\n },\r\n getMaxWidth() {\r\n const commandBarSize = document.getElementById('command-bar')\r\n\r\n return commandBarSize?.clientWidth\r\n },\r\n resize(height) {\r\n const commandBarSize = document.getElementById('command-bar')\r\n const infoBarSize = document.getElementById('info-bar')\r\n this.fullMaxWidth = infoBarSize?.clientWidth\r\n this.maxWidth =\r\n (this.fullMaxWidth - this.gridSettings.framesPerRow * 10) /\r\n this.gridSettings.framesPerRow\r\n\r\n let heightAvailable =\r\n height -\r\n (commandBarSize?.offsetHeight || 0) -\r\n infoBarSize?.offsetHeight -\r\n 29 * this.gridSettings.numberOfRows\r\n if (this.gridSettings.numberOfRows > 1) {\r\n heightAvailable += 12\r\n }\r\n\r\n this.maxHeight =\r\n this.gridSettings.numberOfRows === 2\r\n ? (heightAvailable - 12) / 2\r\n : heightAvailable\r\n this.maxHeight = this.maxHeight >= 75 ? this.maxHeight : 75\r\n\r\n if (this.maxWidth / this.aspectRatio > this.maxHeight) {\r\n this.height = this.maxHeight\r\n this.width = this.maxHeight * this.aspectRatio\r\n } else {\r\n this.width = this.maxWidth\r\n this.height = this.maxWidth / this.aspectRatio\r\n }\r\n\r\n this.maxHeight = this.height\r\n },\r\n async playOrPause() {\r\n switch (this.videoStatus) {\r\n case Status.stopped:\r\n this.videoIsLoading = true\r\n try {\r\n this.videoUrlString = await this.videoUrl\r\n const blockInfo =\r\n await this.parentComponent.fInterface?.getVideoStartTime(\r\n this.frame\r\n )\r\n\r\n this.videoStartTime = blockInfo.start\r\n this.videoUrlString =\r\n this.parentComponent.fInterface.getVideoRequestByUrl(\r\n blockInfo.url,\r\n this.frame.number\r\n )\r\n } catch (error) {\r\n console.log(error)\r\n }\r\n this.videoIsLoading = false\r\n this.videoStatus = Status.playing\r\n this.$nextTick(() => {\r\n this.$refs.videoPlayer.onloadedmetadata = (e) => {\r\n this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n // * atualizar slider\r\n this.$emit('updateSlider', this.videoStartTime, this.frame.time)\r\n //*\r\n this.$emit('startPlaying', this.frame, e.target.duration)\r\n this.$emit('playPauseStatus', true)\r\n }\r\n })\r\n break\r\n case Status.paused:\r\n this.$refs.videoPlayer.play()\r\n this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n this.videoStatus = Status.playing\r\n this.$emit('playPauseStatus', true)\r\n break\r\n case Status.playing:\r\n this.$refs.videoPlayer.pause()\r\n\r\n this.videoStatus = Status.paused\r\n this.$emit('playPauseStatus', false)\r\n break\r\n }\r\n },\r\n stop(jump = true) {\r\n this.videoOnModal = false\r\n if (\r\n this.videoStatus === Status.playing ||\r\n this.videoStatus === Status.paused\r\n ) {\r\n if (jump) {\r\n this.parentComponent.changeHour(\r\n this.parentComponent.convertToAudienceTime(\r\n parseInt(this.videoCurrentTime)\r\n )\r\n )\r\n }\r\n this.videoStatus = Status.stopped\r\n this.videoUrlString = null\r\n this.videoCurrentTime = null\r\n this.videoStartTime = null\r\n }\r\n this.$emit('stopPlaying')\r\n },\r\n //eslint-disable-next-line\r\n videoJumpTo(time) {\r\n this.videoCurrentTime = this.videoStartTime + time\r\n this.$refs.videoPlayer.currentTime = time\r\n },\r\n async videoJumpToTimeStamp(time) {\r\n let frame = {\r\n time: time,\r\n }\r\n if (!time) return\r\n if (\r\n !(\r\n this.currentBlock &&\r\n time >= this.currentBlock.start &&\r\n time <= this.currentBlock.end\r\n )\r\n ) {\r\n this.currentBlock = await this.parentComponent.fInterface?.getBlockInfo(\r\n frame\r\n )\r\n this.videoStartTime = this.currentBlock.start\r\n this.videoUrlString =\r\n this.parentComponent.fInterface.getVideoUrlForTime(\r\n this.videoStartTime\r\n )\r\n }\r\n this.videoCurrentTime = time - this.videoStartTime\r\n this.$refs.videoPlayer.currentTime = this.videoCurrentTime\r\n },\r\n updateTimeLabel(e) {\r\n this.videoCurrentTime = this.videoStartTime + e.target.currentTime\r\n this.parentComponent.updateVideoTime(this.index, this.videoCurrentTime)\r\n this.parentComponent.updateVideoStatus(e.target.currentTime)\r\n },\r\n async videoEnded() {\r\n this.videoStartTime =\r\n await this.parentComponent.fInterface?.getNextVideoStartTime(\r\n this.frame.time\r\n )\r\n this.videoUrlString = this.parentComponent.fInterface.getVideoUrlForTime(\r\n this.videoStartTime\r\n )\r\n // * Ao acabar o vídeo tenho de mandar atualizar slider\r\n // * aqui o video current time tambem vai ser o videoStartTime\r\n this.$emit('updateSlider', this.videoStartTime, this.videoStartTime)\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.frame-container > div {\r\n max-height: 100%;\r\n}\r\n.frame-container {\r\n background-color: black;\r\n display: flex;\r\n justify-content: center;\r\n}\r\n.frame-content,\r\n.dummy-frame {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.frame-content video {\r\n flex-grow: 1;\r\n object-fit: fill;\r\n z-index: 0;\r\n}\r\n.overlay {\r\n width: 100%;\r\n height: 100%;\r\n z-index: 5;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n border: 4px solid transparent;\r\n pointer-events: none;\r\n}\r\n.active .overlay {\r\n border-color: var(--visualization-primary);\r\n}\r\n.between-time .overlay {\r\n border-top-color: var(--visualization-secondary);\r\n}\r\n.between-time.active .overlay {\r\n border-color: var(--visualization-secondary);\r\n}\r\n.initial-time .overlay {\r\n border-top-color: var(--visualization-start);\r\n}\r\n.initial-time.active .overlay {\r\n border-color: var(--visualization-start);\r\n}\r\n.end-time .overlay {\r\n border-top-color: var(--visualization-end);\r\n}\r\n.end-time.active .overlay {\r\n border-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time .overlay {\r\n border-top-color: var(--visualization-start);\r\n border-bottom-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time.active .overlay {\r\n border-top-color: var(--visualization-start);\r\n border-left-color: var(--visualization-start);\r\n border-bottom-color: var(--visualization-end);\r\n border-right-color: var(--visualization-end);\r\n}\r\n.div-frame >>> img {\r\n width: 90vh !important;\r\n}\r\n</style>\r\n"]}, media: undefined });
|
|
788
|
+
inject("data-v-73ac7b64_0", { source: "\n.frame-container > div[data-v-73ac7b64] {\r\n max-height: 100%;\n}\n.frame-container[data-v-73ac7b64] {\r\n background-color: black;\r\n display: flex;\r\n justify-content: center;\n}\n.frame-content[data-v-73ac7b64],\r\n.dummy-frame[data-v-73ac7b64] {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\n}\n.frame-content video[data-v-73ac7b64] {\r\n flex-grow: 1;\r\n object-fit: fill;\r\n z-index: 0;\n}\n.overlay[data-v-73ac7b64] {\r\n width: 100%;\r\n height: 100%;\r\n z-index: 5;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n border: 4px solid transparent;\r\n pointer-events: none;\n}\n.active .overlay[data-v-73ac7b64] {\r\n border-color: var(--visualization-primary);\n}\n.between-time .overlay[data-v-73ac7b64] {\r\n border-top-color: var(--visualization-secondary);\n}\n.between-time.active .overlay[data-v-73ac7b64] {\r\n border-color: var(--visualization-secondary);\n}\n.initial-time .overlay[data-v-73ac7b64] {\r\n border-top-color: var(--visualization-start);\n}\n.initial-time.active .overlay[data-v-73ac7b64] {\r\n border-color: var(--visualization-start);\n}\n.end-time .overlay[data-v-73ac7b64] {\r\n border-top-color: var(--visualization-end);\n}\n.end-time.active .overlay[data-v-73ac7b64] {\r\n border-color: var(--visualization-end);\n}\n.initial-time.end-time .overlay[data-v-73ac7b64] {\r\n border-top-color: var(--visualization-start);\r\n border-bottom-color: var(--visualization-end);\n}\n.initial-time.end-time.active .overlay[data-v-73ac7b64] {\r\n border-top-color: var(--visualization-start);\r\n border-left-color: var(--visualization-start);\r\n border-bottom-color: var(--visualization-end);\r\n border-right-color: var(--visualization-end);\n}\n.div-frame[data-v-73ac7b64] img {\r\n width: 90vh !important;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Frame.vue"],"names":[],"mappings":";AAuZA;EACA,gBAAA;AACA;AACA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;AACA;AACA;;EAEA,aAAA;EACA,mBAAA;EACA,uBAAA;AACA;AACA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,6BAAA;EACA,oBAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,gDAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,4CAAA;AACA;AACA;EACA,wCAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,sCAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;AACA;AACA;EACA,4CAAA;EACA,6CAAA;EACA,6CAAA;EACA,4CAAA;AACA;AACA;EACA,sBAAA;AACA","file":"Frame.vue","sourcesContent":["<template>\r\n <div\r\n :style=\"{\r\n maxHeight: `${maxHeight}px`,\r\n width: '100%',\r\n position: 'relative',\r\n }\"\r\n :class=\"{\r\n 'frame-container': true,\r\n 'initial-time': initialTime,\r\n 'end-time': endTime,\r\n 'between-time': betweenTime,\r\n active: active,\r\n }\"\r\n >\r\n <GlobalEvents\r\n v-if=\"active && activeTab && parentComponent.settingsClosed\"\r\n @keydown.32.prevent=\"playOrPause\"\r\n @keydown.27.prevent=\"stop\"\r\n @keydown.79=\"toogleDetailFrame\"\r\n @keydown.13.prevent=\"jumpFrameToStart\"\r\n />\r\n <GlobalEvents\r\n v-if=\"showFrame\"\r\n @keydown.27.prevent=\"toogleDetailFrame\"\r\n @keydown.13.prevent=\"toogleDetailFrame\"\r\n />\r\n\r\n <vue-loading\r\n :active=\"isLoading\"\r\n spinner=\"ring\"\r\n color=\"var(--visualization-primary)\"\r\n background-color=\"#cacaca\"\r\n :style=\"{\r\n 'z-index': 0,\r\n minHeight: `${height}px`,\r\n minWidth: `${width}px`,\r\n }\"\r\n :text=\"videoIsLoading ? $t('infoBar.createVideo') : ''\"\r\n />\r\n <div style=\"background-color: black\">\r\n <div\r\n v-if=\"!isLoading\"\r\n :class=\"{\r\n 'frame-content': frame.title === -1 || videoStatus !== Status.stopped,\r\n }\"\r\n :style=\"{\r\n minHeight: `${height}px`,\r\n minWidth: `${width}px`,\r\n maxHeight: `${height}px`,\r\n maxWidth: `${width}px`,\r\n color: 'white',\r\n }\"\r\n @dblclick=\"playOrPause\"\r\n >\r\n <div\r\n v-if=\"frame.image && videoStatus === Status.stopped\"\r\n :class=\"{ 'dummy-frame': frame.title === -1 }\"\r\n v-html=\"frame.image\"\r\n style=\"width: 100%; height: 100%\"\r\n />\r\n <video\r\n v-if=\"\r\n !videoOnModal && videoStatus !== Status.stopped && !videoIsLoading\r\n \"\r\n ref=\"videoPlayer\"\r\n :maxHeight=\"`${height}px`\"\r\n :maxWidth=\"`${width}px`\"\r\n :src=\"videoUrlString\"\r\n preload=\"none\"\r\n autoplay\r\n @timeupdate=\"updateTimeLabel\"\r\n @ended=\"videoEnded\"\r\n @click=\"playOrPause\"\r\n style=\"width: 100%; aspect-ratio: 11/9\"\r\n :controls=\"videoControls\"\r\n ></video>\r\n <div v-if=\"!loading\" class=\"overlay\"></div>\r\n </div>\r\n </div>\r\n\r\n <dialog\r\n ref=\"imageDetailsDialog\"\r\n :class=\"{ 'dummy-frame': frame.title === -1 }\"\r\n style=\"\r\n top: 50%;\r\n left: 50%;\r\n transform: translateY(-50%) translateX(-50%);\r\n border: none;\r\n background: grey;\r\n width: 60%;\r\n \"\r\n >\r\n <div\r\n v-if=\"videoStatus == Status.stopped\"\r\n style=\"justify-content: center; display: flex\"\r\n class=\"div-frame\"\r\n v-html=\"frame.image\"\r\n @dblclick=\"changeToVideo\"\r\n ></div>\r\n <video\r\n v-if=\"videoOnModal && videoStatus !== Status.stopped && !videoIsLoading\"\r\n ref=\"videoPlayer\"\r\n :src=\"videoUrlString\"\r\n preload=\"none\"\r\n autoplay\r\n @ended=\"videoEnded\"\r\n style=\"width: 100%; aspect-ratio: 11/9\"\r\n controls=\"true\"\r\n width=\"200%\"\r\n ></video>\r\n </dialog>\r\n </div>\r\n</template>\r\n<script>\r\nimport VueLoading from 'vue-loading-twa'\r\n\r\nconst Status = Object.freeze({\r\n stopped: 0,\r\n playing: 1,\r\n paused: 2,\r\n})\r\n\r\nexport default {\r\n components: {\r\n VueLoading,\r\n },\r\n name: 'frame-component',\r\n props: {\r\n frame: {\r\n type: [Object, Number],\r\n required: true,\r\n },\r\n index: {\r\n type: Number,\r\n required: true,\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n gridSettings: {\r\n type: Object,\r\n required: true,\r\n },\r\n initialTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n endTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n betweenTime: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n active: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n activeTab: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n videoUrl: {\r\n type: [String, Promise],\r\n required: true,\r\n },\r\n playbackRate: {\r\n type: Number,\r\n default: 1,\r\n },\r\n videoControls: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n data() {\r\n return {\r\n Status,\r\n aspectRatio: 11 / 9,\r\n width: 0,\r\n height: 0,\r\n maxWidth: 0,\r\n fullMaxWidth: 0,\r\n maxHeight: 0,\r\n showFrame: false,\r\n videoStatus: Status.stopped,\r\n videoStartTime: null,\r\n videoCurrentTime: null,\r\n videoUrlString: '',\r\n parentComponent: null,\r\n videoIsLoading: false,\r\n currentBlock: null,\r\n lastTimeEnterPressed: null,\r\n videoOnModal: false,\r\n }\r\n },\r\n created() {\r\n this.parentComponent = this.$parent\r\n },\r\n watch: {\r\n playbackRate(val) {\r\n if (\r\n this.videoStatus === Status.playing ||\r\n this.videoStatus === Status.paused\r\n ) {\r\n this.$refs.videoPlayer.playbackRate = val\r\n }\r\n },\r\n },\r\n computed: {\r\n isLoading() {\r\n return (\r\n ((!this.frame.image || !this.frame.time) && this.frame.title !== -1) ||\r\n this.loading ||\r\n this.videoIsLoading\r\n )\r\n },\r\n },\r\n methods: {\r\n changeToVideo() {\r\n this.videoOnModal = true\r\n this.playOrPause()\r\n },\r\n jumpFrameToStart() {\r\n if (this.active) {\r\n const currentTime = new Date().getTime()\r\n\r\n if (currentTime - this.lastTimeEnterPressed <= 500) {\r\n this.parentComponent.changeHour(\r\n this.parentComponent.convertToAudienceTime(this.frame.time)\r\n )\r\n }\r\n\r\n this.lastTimeEnterPressed = currentTime\r\n }\r\n },\r\n changeSettings(value) {\r\n this.videoCurrentTime = value\r\n },\r\n toogleDetailFrame() {\r\n this.stop()\r\n if (this.showFrame) {\r\n this.videoOnModal = false\r\n this.$refs.imageDetailsDialog.close()\r\n } else {\r\n this.$refs.imageDetailsDialog.showModal()\r\n }\r\n this.showFrame = !this.showFrame\r\n },\r\n getMaxWidth() {\r\n const commandBarSize = document.getElementById('command-bar')\r\n\r\n return commandBarSize?.clientWidth\r\n },\r\n resize(height) {\r\n const commandBarSize = document.getElementById('command-bar')\r\n const infoBarSize = document.getElementById('info-bar')\r\n this.fullMaxWidth = infoBarSize?.clientWidth\r\n this.maxWidth =\r\n (this.fullMaxWidth - this.gridSettings.framesPerRow * 10) /\r\n this.gridSettings.framesPerRow\r\n\r\n let heightAvailable =\r\n height -\r\n (commandBarSize?.offsetHeight || 0) -\r\n infoBarSize?.offsetHeight -\r\n 29 * this.gridSettings.numberOfRows\r\n if (this.gridSettings.numberOfRows > 1) {\r\n heightAvailable += 12\r\n }\r\n\r\n this.maxHeight =\r\n this.gridSettings.numberOfRows === 2\r\n ? (heightAvailable - 12) / 2\r\n : heightAvailable\r\n this.maxHeight = this.maxHeight >= 75 ? this.maxHeight : 75\r\n\r\n if (this.maxWidth / this.aspectRatio > this.maxHeight) {\r\n this.height = this.maxHeight\r\n this.width = this.maxHeight * this.aspectRatio\r\n } else {\r\n this.width = this.maxWidth\r\n this.height = this.maxWidth / this.aspectRatio\r\n }\r\n\r\n this.maxHeight = this.height\r\n },\r\n async playOrPause() {\r\n switch (this.videoStatus) {\r\n case Status.stopped:\r\n this.videoIsLoading = true\r\n try {\r\n this.videoUrlString = await this.videoUrl\r\n const blockInfo =\r\n await this.parentComponent.fInterface?.getVideoStartTime(\r\n this.frame\r\n )\r\n\r\n this.videoStartTime = blockInfo.start\r\n this.videoUrlString =\r\n this.parentComponent.fInterface.getVideoRequestByUrl(\r\n blockInfo.url,\r\n this.frame.number + this.parentComponent.shiftFrames\r\n )\r\n } catch (error) {\r\n console.log(error)\r\n }\r\n this.videoIsLoading = false\r\n this.videoStatus = Status.playing\r\n this.$nextTick(() => {\r\n this.$refs.videoPlayer.onloadedmetadata = (e) => {\r\n this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n // * atualizar slider\r\n this.$emit('updateSlider', this.videoStartTime, this.frame.time)\r\n //*\r\n this.$emit('startPlaying', this.frame, e.target.duration)\r\n this.$emit('playPauseStatus', true)\r\n }\r\n })\r\n break\r\n case Status.paused:\r\n this.$refs.videoPlayer.play()\r\n this.$refs.videoPlayer.playbackRate = this.playbackRate\r\n this.videoStatus = Status.playing\r\n this.$emit('playPauseStatus', true)\r\n break\r\n case Status.playing:\r\n this.$refs.videoPlayer.pause()\r\n\r\n this.videoStatus = Status.paused\r\n this.$emit('playPauseStatus', false)\r\n break\r\n }\r\n },\r\n stop(jump = true) {\r\n this.videoOnModal = false\r\n if (\r\n this.videoStatus === Status.playing ||\r\n this.videoStatus === Status.paused\r\n ) {\r\n if (jump) {\r\n this.parentComponent.changeHour(\r\n this.parentComponent.convertToAudienceTime(\r\n parseInt(this.videoCurrentTime)\r\n )\r\n )\r\n }\r\n this.videoStatus = Status.stopped\r\n this.videoUrlString = null\r\n this.videoCurrentTime = null\r\n this.videoStartTime = null\r\n }\r\n this.$emit('stopPlaying')\r\n },\r\n //eslint-disable-next-line\r\n videoJumpTo(time) {\r\n this.videoCurrentTime = this.videoStartTime + time\r\n this.$refs.videoPlayer.currentTime = time\r\n },\r\n async videoJumpToTimeStamp(time) {\r\n let frame = {\r\n time: time,\r\n }\r\n if (!time) return\r\n if (\r\n !(\r\n this.currentBlock &&\r\n time >= this.currentBlock.start &&\r\n time <= this.currentBlock.end\r\n )\r\n ) {\r\n this.currentBlock = await this.parentComponent.fInterface?.getBlockInfo(\r\n frame\r\n )\r\n this.videoStartTime = this.currentBlock.start\r\n this.videoUrlString =\r\n this.parentComponent.fInterface.getVideoUrlForTime(\r\n this.videoStartTime\r\n )\r\n }\r\n this.videoCurrentTime = time - this.videoStartTime\r\n this.$refs.videoPlayer.currentTime = this.videoCurrentTime\r\n },\r\n updateTimeLabel(e) {\r\n this.videoCurrentTime = this.videoStartTime + e.target.currentTime\r\n this.parentComponent.updateVideoTime(this.index, this.videoCurrentTime)\r\n this.parentComponent.updateVideoStatus(e.target.currentTime)\r\n },\r\n async videoEnded() {\r\n this.videoStartTime =\r\n await this.parentComponent.fInterface?.getNextVideoStartTime(\r\n this.frame.time - this.parentComponent.shiftFrames\r\n )\r\n this.videoUrlString = this.parentComponent.fInterface.getVideoUrlForTime(\r\n this.videoStartTime\r\n )\r\n // * Ao acabar o vídeo tenho de mandar atualizar slider\r\n // * aqui o video current time tambem vai ser o videoStartTime\r\n this.$emit('updateSlider', this.videoStartTime, this.videoStartTime)\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\n.frame-container > div {\r\n max-height: 100%;\r\n}\r\n.frame-container {\r\n background-color: black;\r\n display: flex;\r\n justify-content: center;\r\n}\r\n.frame-content,\r\n.dummy-frame {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.frame-content video {\r\n flex-grow: 1;\r\n object-fit: fill;\r\n z-index: 0;\r\n}\r\n.overlay {\r\n width: 100%;\r\n height: 100%;\r\n z-index: 5;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n border: 4px solid transparent;\r\n pointer-events: none;\r\n}\r\n.active .overlay {\r\n border-color: var(--visualization-primary);\r\n}\r\n.between-time .overlay {\r\n border-top-color: var(--visualization-secondary);\r\n}\r\n.between-time.active .overlay {\r\n border-color: var(--visualization-secondary);\r\n}\r\n.initial-time .overlay {\r\n border-top-color: var(--visualization-start);\r\n}\r\n.initial-time.active .overlay {\r\n border-color: var(--visualization-start);\r\n}\r\n.end-time .overlay {\r\n border-top-color: var(--visualization-end);\r\n}\r\n.end-time.active .overlay {\r\n border-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time .overlay {\r\n border-top-color: var(--visualization-start);\r\n border-bottom-color: var(--visualization-end);\r\n}\r\n.initial-time.end-time.active .overlay {\r\n border-top-color: var(--visualization-start);\r\n border-left-color: var(--visualization-start);\r\n border-bottom-color: var(--visualization-end);\r\n border-right-color: var(--visualization-end);\r\n}\r\n.div-frame >>> img {\r\n width: 90vh !important;\r\n}\r\n</style>\r\n"]}, media: undefined });
|
|
789
789
|
|
|
790
790
|
};
|
|
791
791
|
/* scoped */
|
|
792
|
-
const __vue_scope_id__$5 = "data-v-
|
|
792
|
+
const __vue_scope_id__$5 = "data-v-73ac7b64";
|
|
793
793
|
/* module identifier */
|
|
794
794
|
const __vue_module_identifier__$5 = undefined;
|
|
795
795
|
/* functional template */
|
|
@@ -1310,7 +1310,9 @@ FramesManager.prototype.getBlock = async function (
|
|
|
1310
1310
|
FramesManager.prototype.checkMinBlockSize = async function (checkMinBlock) {
|
|
1311
1311
|
if (this.checkFramesBackward()) {
|
|
1312
1312
|
await this.getBlock(
|
|
1313
|
-
this.buffer.length === 0
|
|
1313
|
+
this.buffer.length === 0
|
|
1314
|
+
? this.currentTime
|
|
1315
|
+
: this.buffer[0].time - this.shiftFrames,
|
|
1314
1316
|
this.channel,
|
|
1315
1317
|
1,
|
|
1316
1318
|
ENUM.Direction[this.buffer.length === 0 ? 'Self' : 'Previous'],
|
|
@@ -1323,7 +1325,7 @@ FramesManager.prototype.checkMinBlockSize = async function (checkMinBlock) {
|
|
|
1323
1325
|
await this.getBlock(
|
|
1324
1326
|
this.buffer.length === 0
|
|
1325
1327
|
? this.currentTime
|
|
1326
|
-
: this.buffer[this.buffer.length - 1].time,
|
|
1328
|
+
: this.buffer[this.buffer.length - 1].time - this.shiftFrames,
|
|
1327
1329
|
this.channel,
|
|
1328
1330
|
1,
|
|
1329
1331
|
ENUM.Direction[this.buffer.length === 0 ? 'Self' : 'Next'],
|
|
@@ -1660,7 +1662,10 @@ FramesInterface.prototype.getVideoUrlForTime = function (time) {
|
|
|
1660
1662
|
|
|
1661
1663
|
FramesInterface.prototype.getVideoStartTime = async function (frame) {
|
|
1662
1664
|
try {
|
|
1663
|
-
const block = await this.framesManager.getFileInfo(
|
|
1665
|
+
const block = await this.framesManager.getFileInfo(
|
|
1666
|
+
frame.time - this.shiftFrames,
|
|
1667
|
+
0
|
|
1668
|
+
);
|
|
1664
1669
|
return block
|
|
1665
1670
|
} catch (err) {
|
|
1666
1671
|
console.log(err);
|