{event.name}
{#if event.name}
- {event.name}
+ {#if customName}
+ {event.name}: {customName}
+ {:else}
+ {event.name}
+ {/if}
{:else}
{getFileName(settings.backgroundPath)}
{#key msg}
- {#if !msg.includes("<") && msg?.length - msg?.replaceAll(".", "").length === 1}
+ {#if msg.includes("captions#")}
+
+{#key retryCount}
+
+{/key}
diff --git a/src/frontend/components/drawer/media/MediaLoader.svelte b/src/frontend/components/drawer/media/MediaLoader.svelte
index 22a57498..1636d8f8 100644
--- a/src/frontend/components/drawer/media/MediaLoader.svelte
+++ b/src/frontend/components/drawer/media/MediaLoader.svelte
@@ -3,16 +3,16 @@
import type { Resolution } from "../../../../types/Settings"
import type { MediaType, ShowType } from "../../../../types/Show"
- import { mediaCache, outputs, styles, videoExtensions } from "../../../stores"
+ import { outputs, styles, videoExtensions } from "../../../stores"
import { getExtension } from "../../helpers/media"
import { getResolution } from "../../helpers/output"
import Camera from "../../output/Camera.svelte"
import { getStyleResolution } from "../../slide/getStyleResolution"
import Capture from "../live/Capture.svelte"
- // import Image from "./Image.svelte"
export let name: any = ""
export let path: string
+ export let thumbnailPath: string = ""
export let loadFullImage: boolean = false
export let cameraGroup: string = ""
export let mediaStyle: MediaStyle = {}
@@ -22,87 +22,11 @@
export let resolution: Resolution | null = null
export let duration: number = 0
export let videoElem: any = null
- export let ghost: boolean = false
- // TODO: update
- $: if ((!type || type === "image") && canvas) {
- duration = 0
-
- // image cache
- loadImage()
- }
-
- // const thumbnailSize = { width: 1920, height: 1080 }
- const thumbnailSize = { width: 480, height: 270 }
- // const thumbnailSize = { width: 320, height: 180 }
- // const thumbnailSize = {width: 240, height: 135}
- // const thumbnailSize = { width: 160, height: 90 }
- // const thumbnailSize = { width: 80, height: 45 }
- let storedSize: any = {}
-
- function loadImage() {
- img = new Image()
-
- let cache = $mediaCache[path]
- let src: string = path
- if (cache) src = cache.data
-
- img.src = src
- canvas.width = cache ? cache.size?.width || cache.width || 160 : thumbnailSize.width
- canvas.height = cache ? cache.size?.height || cache.height || 90 : thumbnailSize.height
-
- storedSize = cache ? cache.size || { width: cache.width, height: cache.height } : {}
-
- if (cache) checkIfCacheLoaded()
- else checkIfLoaded()
- }
-
- let img: any = null
- function checkIfLoaded(): any {
- if (!img.complete) return setTimeout(checkIfLoaded, 100)
-
- let width = img.naturalWidth || thumbnailSize.width
- let height = img.naturalHeight || thumbnailSize.height
- let x = 0
- let y = 0
-
- if (width / height > customResolution.width / customResolution.height) {
- height = height / (width / thumbnailSize.width)
- width = thumbnailSize.width
- y = (thumbnailSize.height - height) / 2
- } else {
- width = width / (height / thumbnailSize.height)
- height = thumbnailSize.height
- x = (thumbnailSize.width - width) / 2
- }
-
- // canvas?.getContext("2d").drawImage(img, 0, 0, 160, 90)
- setTimeout(() => {
- canvas?.getContext("2d").drawImage(img, x, y, width, height)
- setTimeout(() => {
- if (canvas) {
- mediaCache.update((a) => {
- a[path] = { data: canvas.toDataURL(), size: { width, height } }
- // a[path] = { data: canvas.toDataURL(), width, height, x, y }
- return a
- })
- // canvas?.getContext("2d").clearRect(0, 0, 160, 90)
- // cavas?.getContext("2d").drawImage(img, x, y, width, height)
-
- loaded = true
- }
- }, 100)
- }, 50)
- }
-
- function checkIfCacheLoaded(): any {
- if (!img.complete) return setTimeout(checkIfCacheLoaded, 100)
+ $: if (path) loaded = false
- // let cache = $mediaCache[path]
- // canvas?.getContext("2d").drawImage(img, cache.x, cache.y, cache.width, cache.height)
- canvas?.getContext("2d").drawImage(img, 0, 0, storedSize.width || 160, storedSize.height || 90)
- loaded = true
- }
+ let width: number = 0
+ let height: number = 0
// type
$: if (!type && path) {
@@ -110,90 +34,57 @@
if ($videoExtensions.includes(extension)) type = "video"
}
- $: if (path) loaded = false
-
- let canvas: any
-
- let time = false
- function ready() {
- if (loaded || !videoElem) return
-
- // check cache
- let cache: any = $mediaCache[path]
- if (cache) {
- // TODO: cache
- var img = new window.Image()
- // console.log(cache)
- img.src = cache.data
-
- canvas.width = cache.size?.width || cache.width
- canvas.height = cache.size?.height || cache.height
- setTimeout(() => {
- canvas?.getContext("2d").drawImage(img, 0, 0, cache.width, cache.height)
- // canvas.getContext("2d").drawImage(videoElem, 0, 0, cache.width, cache.height)
- }, 200)
-
- duration = videoElem.duration
- videoElem.currentTime = duration / 2
- time = true
-
- loaded = true
- return
- }
+ $: customResolution = resolution || getResolution(null, { $outputs, $styles })
- if (ghost) return
+ $: if (mediaStyle.speed && videoElem) videoElem.playbackRate = mediaStyle.speed
- if (!time) {
- duration = videoElem.duration
- // it's sometimes Infinity for some reason
- if (duration === Infinity) duration = 0
- videoElem.currentTime = duration / 2
- time = true
- } else {
- let width = videoElem.offsetWidth
- let height = videoElem.offsetHeight
- canvas.width = width
- canvas.height = height
- canvas.getContext("2d").drawImage(videoElem, 0, 0, width, height)
+ $: if (!videoElem) duration = 0
+ function getDuration() {
+ if (!videoElem || duration) return
- // set cache
- setTimeout(() => {
- if (!canvas) return
- mediaCache.update((a: any) => {
- a[path] = { data: canvas.toDataURL(), width, height, size: { width, height } }
- return a
- })
+ duration = videoElem.duration
- loaded = true
- }, 1000)
- }
+ // set video time
+ if (hover || !useOriginal) return
+ videoElem.currentTime = duration / 2
}
- let width: number = 0
- let height: number = 0
-
- $: customResolution = resolution || getResolution(null, { $outputs, $styles })
-
- $: if (mediaStyle.speed && videoElem) videoElem.playbackRate = mediaStyle.speed
-
- // retry on error (don't think this is neccesary)
+ // retry on error
let retryCount = 0
- $: if (path) retryCount = 0
+ $: if (path || thumbnailPath) retryCount = 0
function reload() {
- if (ghost || retryCount > 5) return
+ if (retryCount > 5) {
+ loaded = true
+ return
+ }
+ loaded = false
+ let time = 500 * (retryCount + 1)
setTimeout(() => {
- loaded = false
retryCount++
- }, 100)
+ }, time)
}
// path starting at "/" auto completes to app root, but should be file://
$: if (path[0] === "/") path = `file://${path}`
+
+ $: useOriginal = hover || loadFullImage || retryCount > 5 || !thumbnailPath
+
+ // get duration
+ $: if (type === "video" && thumbnailPath) getVideoDuration()
+ function getVideoDuration() {
+ let video = document.createElement("video")
+ video.onloadeddata = () => {
+ duration = video.duration || 0
+ // video.pause()
+ video.src = ""
+ }
+ video.src = path
+ }
(loaded = true)}
/>
{/key}
{/if}
+ {#if type === "video" && useOriginal}
+
+ {/if}
{/if}
{/key}
+
+
+ {msg.slice(msg.indexOf("#") + 1)}
+ {:else if !msg.includes("<") && msg?.length - msg?.replaceAll(".", "").length === 1}