82 lines
2.4 KiB
Vue
Executable file
82 lines
2.4 KiB
Vue
Executable file
<template>
|
|
<div class="flex items-start space-x-2" :class="textClass ?? 'text-4'">
|
|
<component :is="icon" class="mt-0.5 flex-shrink-0"/>
|
|
<div :class="singleLine && 'truncate'">
|
|
{{ text }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MusicNoteIcon from "virtual:icons/ph/music-note"
|
|
import ChatCircleTextIcon from "virtual:icons/ph/chat-circle-TEXT"
|
|
import StopIcon from "virtual:icons/ph/stop"
|
|
import HeadlightsIcon from "virtual:icons/ph/headlights"
|
|
import WarningIcon from "virtual:icons/ph/warning"
|
|
import ArrowsOutLineHorizontalIcon from "virtual:icons/ph/arrows-out-line-horizontal"
|
|
import ArrowsInLineHorizontalIcon from "virtual:icons/ph/arrows-in-line-horizontal"
|
|
import DotFillIcon from "virtual:icons/ph/dot-fill"
|
|
import { computed } from "vue"
|
|
import { START_STEP, Step } from "../state"
|
|
import { formatSeconds } from "../helpers"
|
|
import { isEqual } from "lodash-es"
|
|
|
|
const props = defineProps<{
|
|
step: Step,
|
|
singleLine?: boolean
|
|
textClass?: string
|
|
}>()
|
|
|
|
const icon = computed(() => {
|
|
const cue = props.step.cue
|
|
|
|
if (isEqual(props.step.position, START_STEP.position)) {
|
|
return DotFillIcon
|
|
}
|
|
|
|
switch (cue.type) {
|
|
case "CURTAIN":
|
|
return cue.state === "closed"
|
|
? ArrowsInLineHorizontalIcon
|
|
: ArrowsOutLineHorizontalIcon
|
|
|
|
case "LIGHTS": return HeadlightsIcon
|
|
case "TEXT": return ChatCircleTextIcon
|
|
case "MUSIC_START": return MusicNoteIcon
|
|
case "MUSIC_END": return StopIcon
|
|
case "CUSTOM": return WarningIcon
|
|
}
|
|
})
|
|
|
|
const text = computed(() => {
|
|
const cue = props.step.cue
|
|
|
|
switch (cue.type) {
|
|
case "CURTAIN":
|
|
if (cue.state === "open") {
|
|
return cue.whileMoving ? "Der Vorhang öffnet sich" : "Der Vorhang ist geöffnet"
|
|
} else {
|
|
return cue.whileMoving ? "Der Vorhang schließt sich" : "Der Vorhang ist geschlossen"
|
|
}
|
|
|
|
case "LIGHTS":
|
|
if (cue.state === "on") {
|
|
return cue.whileFading ? "Das Licht geht an" : "Das Licht ist an"
|
|
} else {
|
|
return cue.whileFading ? "Das Licht geht aus" : "Das Licht ist aus"
|
|
}
|
|
|
|
case "TEXT":
|
|
let suffix = ""
|
|
if (cue.clarification !== undefined) {
|
|
suffix = ` (${cue.clarification})`
|
|
}
|
|
|
|
return `${cue.speaker}: »${cue.text}«${suffix}`
|
|
|
|
case "MUSIC_START": return `${cue.title} [${formatSeconds(cue.duration / 1000)}]`
|
|
case "MUSIC_END": return "Ende der Musik"
|
|
case "CUSTOM": return cue.text
|
|
}
|
|
})
|
|
</script>
|