vue-files-preview-inno/es/packages/preview/supports/video-preview/index.vue2.mjs.map

A tool for previewing files such as doc, excel, pdf, image, markdown, txt, audio, and video and so on.

{"version":3,"file":"index.vue2.mjs","sources":["../../../../../../packages/preview/supports/video-preview/index.vue"],"sourcesContent":["<script lang='ts' setup>\nimport {onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue'\nimport type {PreviewProps} from '../../preview.interface'\nimport {getFileRenderByFile} from '../../utils/utils'\n\nconst props = withDefaults(\n    defineProps<PreviewProps>(),\n    {\n      url: () => null,\n      file: () => null,\n    },\n)\n\nconst fileRender = ref(null)\nwatch(\n    () => props.file,\n    (file) => {\n      if (file) {\n        fileRender.value && URL.revokeObjectURL(fileRender.value)\n        getFileRenderByFile(file).then((render) => {\n          fileRender.value = render\n          // Set the video element src\n          videoPreviewRef.value.src = fileRender.value\n        })\n      }\n    },\n    {immediate: true},\n)\nconst videoPreviewRef = shallowRef(null)\nonMounted(() => {\n  // Listen for video elements loadedmetadata. Event to automatically play the video once it has loaded\n  videoPreviewRef.value.addEventListener('loadedmetadata', () => {\n    videoPreviewRef.value.play()\n  })\n})\n\nonBeforeUnmount(() => {\n  // When the component is destroyed. Release the video element src\n  videoPreviewRef.value.pause()\n  if (props.file) {\n    URL.revokeObjectURL(fileRender.value)\n  }\n})\n</script>\n\n<template>\n  <div class=\"video-preview web-full-screen\">\n    <video ref=\"videoPreviewRef\" class=\"player-video-main\" controls autoplay/>\n  </div>\n</template>\n\n<style scoped lang='scss'>\n.web-full-screen {\n  z-index: 9999999;\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw !important;\n  height: 100vh !important;\n  overflow: hidden; /* Hide overflow content. Keep the full screen experience */\n  background: rgba(0, 0, 0, 0.8); /* Background color can improve video contrast */\n  display: flex; /* Use flexbox to the center video */\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n}\n\n.player-video-main {\n  width: 100%;\n  height: auto; /* Keep video aspect ratio */\n  max-height: 100%; /* Limit the maximum height to prevent overflow */\n  object-fit: contain; /* Keep aspect ratio. Black edges may appear */\n  transition: .2s;\n}\n\n.player-video-main.video-mirror {\n  transform: rotateY(180deg);\n}\n</style>\n"],"names":["props","__props","fileRender","ref","watch","file","getFileRenderByFile","render","videoPreviewRef","shallowRef","onMounted","onBeforeUnmount"],"mappings":";;;;;;;;;;AAKA,UAAMA,IAAQC,GAQRC,IAAaC,EAAI,IAAI;AAC3B,IAAAC;AAAA,MACI,MAAMJ,EAAM;AAAA,MACZ,CAACK,MAAS;AACR,QAAIA,MACFH,EAAW,SAAS,IAAI,gBAAgBA,EAAW,KAAK,GACxDI,EAAoBD,CAAI,EAAE,KAAK,CAACE,MAAW;AACzC,UAAAL,EAAW,QAAQK,GAEnBC,EAAgB,MAAM,MAAMN,EAAW;AAAA,QACzC,CAAC;AAAA,MAEL;AAAA,MACA,EAAC,WAAW,GAAA;AAAA,IAAI;AAEpB,UAAMM,IAAkBC,EAAW,IAAI;AACvC,WAAAC,EAAU,MAAM;AAEd,MAAAF,EAAgB,MAAM,iBAAiB,kBAAkB,MAAM;AAC7D,QAAAA,EAAgB,MAAM,KAAA;AAAA,MACxB,CAAC;AAAA,IACH,CAAC,GAEDG,EAAgB,MAAM;AAEpB,MAAAH,EAAgB,MAAM,MAAA,GAClBR,EAAM,QACR,IAAI,gBAAgBE,EAAW,KAAK;AAAA,IAExC,CAAC;;;;;;;;;;;"}