@twab/visualization 1.6.3 → 1.6.4
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 +21 -22
- package/package.json +1 -1
package/dist/visualization.js
CHANGED
|
@@ -263,8 +263,8 @@ var script$5 = {
|
|
|
263
263
|
isLoading() {
|
|
264
264
|
return (
|
|
265
265
|
((!this.frame.image || !this.frame.time) && this.frame.title !== -1) ||
|
|
266
|
-
this.loading
|
|
267
|
-
this.videoIsLoading
|
|
266
|
+
this.loading
|
|
267
|
+
// || this.videoIsLoading
|
|
268
268
|
)
|
|
269
269
|
},
|
|
270
270
|
aspectRatioFrac() {
|
|
@@ -285,6 +285,10 @@ var script$5 = {
|
|
|
285
285
|
},
|
|
286
286
|
},
|
|
287
287
|
methods: {
|
|
288
|
+
canPlay() {
|
|
289
|
+
this.$refs.videoPlayer.play();
|
|
290
|
+
this.videoIsLoading = false;
|
|
291
|
+
},
|
|
288
292
|
changeToVideo() {
|
|
289
293
|
this.videoOnModal = true;
|
|
290
294
|
this.playOrPause();
|
|
@@ -373,18 +377,18 @@ var script$5 = {
|
|
|
373
377
|
} catch (error) {
|
|
374
378
|
console.log(error);
|
|
375
379
|
}
|
|
376
|
-
this.videoIsLoading = false
|
|
380
|
+
// this.videoIsLoading = false
|
|
377
381
|
this.videoStatus = Status.playing;
|
|
378
|
-
this.$nextTick(() => {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
})
|
|
382
|
+
// this.$nextTick(() => {
|
|
383
|
+
// this.$refs.videoPlayer.onloaded = (e) => {
|
|
384
|
+
// this.$refs.videoPlayer.playbackRate = this.playbackRate
|
|
385
|
+
// // * atualizar slider
|
|
386
|
+
// this.$emit('updateSlider', this.videoStartTime, this.frame.time)
|
|
387
|
+
// //*
|
|
388
|
+
// this.$emit('startPlaying', this.frame, e.target.duration)
|
|
389
|
+
// this.$emit('playPauseStatus', true)
|
|
390
|
+
// }
|
|
391
|
+
// })
|
|
388
392
|
break
|
|
389
393
|
case Status.paused:
|
|
390
394
|
this.$refs.videoPlayer.play();
|
|
@@ -724,9 +728,7 @@ var __vue_render__$5 = function () {
|
|
|
724
728
|
})
|
|
725
729
|
: _vm._e(),
|
|
726
730
|
_vm._v(" "),
|
|
727
|
-
!_vm.videoOnModal &&
|
|
728
|
-
_vm.videoStatus !== _vm.Status.stopped &&
|
|
729
|
-
!_vm.videoIsLoading
|
|
731
|
+
!_vm.videoOnModal && _vm.videoStatus !== _vm.Status.stopped
|
|
730
732
|
? _c("video", {
|
|
731
733
|
ref: "videoPlayer",
|
|
732
734
|
style: {
|
|
@@ -737,14 +739,12 @@ var __vue_render__$5 = function () {
|
|
|
737
739
|
maxHeight: _vm.height + "px",
|
|
738
740
|
maxWidth: _vm.width + "px",
|
|
739
741
|
src: _vm.videoUrlString,
|
|
740
|
-
preload: "none",
|
|
741
|
-
autoplay: "",
|
|
742
|
-
controls: _vm.videoControls,
|
|
743
742
|
},
|
|
744
743
|
on: {
|
|
745
744
|
timeupdate: _vm.updateTimeLabel,
|
|
746
745
|
ended: _vm.videoEnded,
|
|
747
746
|
click: _vm.playOrPause,
|
|
747
|
+
canplay: _vm.canPlay,
|
|
748
748
|
},
|
|
749
749
|
})
|
|
750
750
|
: _vm._e(),
|
|
@@ -787,7 +787,6 @@ var __vue_render__$5 = function () {
|
|
|
787
787
|
staticStyle: { width: "100%", "aspect-ratio": "11/9" },
|
|
788
788
|
attrs: {
|
|
789
789
|
src: _vm.videoUrlString,
|
|
790
|
-
preload: "none",
|
|
791
790
|
autoplay: "",
|
|
792
791
|
controls: "true",
|
|
793
792
|
width: "200%",
|
|
@@ -807,11 +806,11 @@ __vue_render__$5._withStripped = true;
|
|
|
807
806
|
/* style */
|
|
808
807
|
const __vue_inject_styles__$5 = function (inject) {
|
|
809
808
|
if (!inject) return
|
|
810
|
-
inject("data-v-0331a375_0", { source: "\n.frame-container > div[data-v-0331a375] {\r\n max-height: 100%;\n}\n.frame-container[data-v-0331a375] {\r\n background-color: black;\r\n display: flex;\r\n justify-content: center;\n}\n.frame-content[data-v-0331a375],\r\n.dummy-frame[data-v-0331a375] {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\n}\n.frame-content video[data-v-0331a375] {\r\n flex-grow: 1;\r\n object-fit: fill;\r\n z-index: 0;\n}\n.overlay[data-v-0331a375] {\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-0331a375] {\r\n border-color: var(--visualization-primary);\n}\n.between-time .overlay[data-v-0331a375] {\r\n border-top-color: var(--visualization-secondary);\n}\n.between-time.active .overlay[data-v-0331a375] {\r\n border-color: var(--visualization-secondary);\n}\n.initial-time .overlay[data-v-0331a375] {\r\n border-top-color: var(--visualization-start);\n}\n.initial-time.active .overlay[data-v-0331a375] {\r\n border-color: var(--visualization-start);\n}\n.end-time .overlay[data-v-0331a375] {\r\n border-top-color: var(--visualization-end);\n}\n.end-time.active .overlay[data-v-0331a375] {\r\n border-color: var(--visualization-end);\n}\n.initial-time.end-time .overlay[data-v-0331a375] {\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-0331a375] {\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-0331a375] img {\r\n width: 90vh !important;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Frame.vue"],"names":[],"mappings":";AA0aA;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%', aspectRatio: aspectRatioFrac }\"\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 aspectRatio: {\r\n type: Number,\r\n default: 11 / 9,\r\n },\r\n },\r\n data() {\r\n return {\r\n Status,\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 aspectRatioFrac() {\r\n var gcd = function (a, b) {\r\n if (b < 0.0000001) return a\r\n\r\n return gcd(b, Math.floor(a % b))\r\n }\r\n\r\n var denominator = Math.pow(10, this.aspectRatio.toString().length - 2)\r\n var numerator = this.aspectRatio * denominator\r\n\r\n var divisor = gcd(numerator, denominator)\r\n\r\n return `${Math.floor(numerator / divisor)}/${Math.floor(\r\n denominator / divisor\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 });
|
|
809
|
+
inject("data-v-1d658fac_0", { source: "\n.frame-container > div[data-v-1d658fac] {\r\n max-height: 100%;\n}\n.frame-container[data-v-1d658fac] {\r\n background-color: black;\r\n display: flex;\r\n justify-content: center;\n}\n.frame-content[data-v-1d658fac],\r\n.dummy-frame[data-v-1d658fac] {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\n}\n.frame-content video[data-v-1d658fac] {\r\n flex-grow: 1;\r\n object-fit: fill;\r\n z-index: 0;\n}\n.overlay[data-v-1d658fac] {\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-1d658fac] {\r\n border-color: var(--visualization-primary);\n}\n.between-time .overlay[data-v-1d658fac] {\r\n border-top-color: var(--visualization-secondary);\n}\n.between-time.active .overlay[data-v-1d658fac] {\r\n border-color: var(--visualization-secondary);\n}\n.initial-time .overlay[data-v-1d658fac] {\r\n border-top-color: var(--visualization-start);\n}\n.initial-time.active .overlay[data-v-1d658fac] {\r\n border-color: var(--visualization-start);\n}\n.end-time .overlay[data-v-1d658fac] {\r\n border-top-color: var(--visualization-end);\n}\n.end-time.active .overlay[data-v-1d658fac] {\r\n border-color: var(--visualization-end);\n}\n.initial-time.end-time .overlay[data-v-1d658fac] {\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-1d658fac] {\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-1d658fac] img {\r\n width: 90vh !important;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Frame.vue"],"names":[],"mappings":";AAyaA;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=\"!videoOnModal && videoStatus !== Status.stopped\"\r\n ref=\"videoPlayer\"\r\n :maxHeight=\"`${height}px`\"\r\n :maxWidth=\"`${width}px`\"\r\n :src=\"videoUrlString\"\r\n @timeupdate=\"updateTimeLabel\"\r\n @ended=\"videoEnded\"\r\n @click=\"playOrPause\"\r\n @canplay=\"canPlay\"\r\n :style=\"{ width: '100%', aspectRatio: aspectRatioFrac }\"\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 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 aspectRatio: {\r\n type: Number,\r\n default: 11 / 9,\r\n },\r\n },\r\n data() {\r\n return {\r\n Status,\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 aspectRatioFrac() {\r\n var gcd = function (a, b) {\r\n if (b < 0.0000001) return a\r\n\r\n return gcd(b, Math.floor(a % b))\r\n }\r\n\r\n var denominator = Math.pow(10, this.aspectRatio.toString().length - 2)\r\n var numerator = this.aspectRatio * denominator\r\n\r\n var divisor = gcd(numerator, denominator)\r\n\r\n return `${Math.floor(numerator / divisor)}/${Math.floor(\r\n denominator / divisor\r\n )}`\r\n },\r\n },\r\n methods: {\r\n canPlay() {\r\n this.$refs.videoPlayer.play()\r\n this.videoIsLoading = false\r\n },\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.onloaded = (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 });
|
|
811
810
|
|
|
812
811
|
};
|
|
813
812
|
/* scoped */
|
|
814
|
-
const __vue_scope_id__$5 = "data-v-
|
|
813
|
+
const __vue_scope_id__$5 = "data-v-1d658fac";
|
|
815
814
|
/* module identifier */
|
|
816
815
|
const __vue_module_identifier__$5 = undefined;
|
|
817
816
|
/* functional template */
|