media_player_client/src/components/SubtitleDialog.vue

281 lines
7.8 KiB
Vue
Raw Normal View History

2021-09-29 14:21:33 +08:00
<template>
<q-dialog
persistent
v-model="show_dialog"
@show="onShow"
@before-hide="resetData"
2022-01-25 19:41:28 +08:00
@keydown="
(evt) => {
if (!loading && evt.keyCode == 27) {
2022-01-25 19:41:28 +08:00
show_dialog = false;
}
}
"
2021-09-29 14:21:33 +08:00
>
2021-11-05 09:15:51 +08:00
<q-card class="overflow-hidden" style="max-width: 70vw">
2021-09-29 14:21:33 +08:00
<q-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm">
<div class="row">
<div class="col-auto text-h6">
{{ $t("subtitle") }}
</div>
<q-space />
<q-btn
:loading="loading"
flat
round
icon="close"
color="red"
v-close-popup
>
<q-tooltip>
{{ $t("close") }}
</q-tooltip>
</q-btn>
2021-09-29 14:21:33 +08:00
</div>
</q-card-section>
<q-separator />
<q-card-section class="scroll" style="width: 70vw">
2021-09-29 14:21:33 +08:00
<q-list>
<q-item v-if="false">
2021-09-29 14:21:33 +08:00
<q-item-section>
<q-input
:label="$t('background color')"
v-model="subtitle.background"
2022-01-18 08:52:51 +08:00
:disable="subtitle.bakcground_transparent"
2021-09-29 14:21:33 +08:00
:rules="['anyColor']"
2022-01-18 08:52:51 +08:00
hint=""
2021-09-29 14:21:33 +08:00
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer">
<q-popup-proxy
transition-show="scale"
transition-hide="scale"
>
<q-color v-model="subtitle.background" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-item-section>
<q-item-section>
<q-checkbox
:label="$t('background transparent')"
v-model="subtitle.bakcground_transparent"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-select
:label="$t('speed')"
v-model="subtitle.x_speed"
:options="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 20]"
2021-09-29 14:21:33 +08:00
></q-select>
</q-item-section>
2022-01-18 08:52:51 +08:00
<q-item-section>
<q-input
type="number"
:label="$t('y offset')"
maxlength="4"
max="2160"
min="0"
v-model="subtitle.y_offset"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-checkbox
:label="$t('enable subtitle')"
v-model="subtitle.show"
/>
</q-item-section>
2021-09-29 14:21:33 +08:00
</q-item>
2021-09-29 14:21:33 +08:00
<q-separator inset />
<q-item style="height: 50vh">
<q-item-section
:style="{
'align-items': loading ? 'center' : 'unset',
}"
>
<editor
v-if="!loading"
class="fit"
tinymce-script-src="tinymce/tinymce.min.js"
:init="editor_config"
v-model="subtitle.text"
/>
<q-spinner v-else color="primary" size="5em" :thickness="2" />
</q-item-section>
2021-09-29 14:21:33 +08:00
</q-item>
</q-list>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
:loading="loading"
flat
:label="$t('Cancel')"
color="primary"
v-close-popup
/>
<q-btn
ref="accept"
flat
:label="$t('Accept')"
:loading="loading"
type="submit"
color="primary"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script lang="ts">
import {
defineComponent,
ref,
Ref,
reactive,
2021-09-29 14:21:33 +08:00
watch,
computed,
onMounted,
onBeforeUnmount,
2021-11-05 09:15:51 +08:00
nextTick,
2021-09-29 14:21:33 +08:00
} from "vue";
2021-09-29 14:21:33 +08:00
import { useStore } from "src/store";
import { useQuasar, dom as DomUtil } from "quasar";
2021-09-29 14:21:33 +08:00
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import SubtitleEntity from "src/entities/SubtitleEntity";
import Editor from "@tinymce/tinymce-vue";
2021-09-29 14:21:33 +08:00
export default defineComponent({
name: "ComponentSubtitleDialog",
components: {
Editor,
},
2021-09-29 14:21:33 +08:00
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
const i18n = useI18n();
2021-09-29 14:21:33 +08:00
let show_dialog = ref(false);
let loading = ref(false);
let subtitle = ref(new SubtitleEntity());
const fontOptions: number[] = [];
for (let i = 9; i <= 300; i += 3) {
fontOptions.push(i);
}
2021-09-29 14:21:33 +08:00
const get_font_size_formarts = () => {
let result = "";
for (const item of fontOptions) {
result += item + "pt ";
2021-11-05 09:15:51 +08:00
}
return result;
2021-09-29 14:21:33 +08:00
};
const editor_config = reactive({
plugins: [
"fullscreen",
/*'lists link image paste help wordcount'*/
],
mobile: {
menubar: true,
},
font_size_formats: get_font_size_formarts(),
skin: "tinymce-5",
language: i18n.locale.value == "zh-CN" ? "zh_CN" : "",
menubar: false,
branding: false,
toolbar_mode: "wrap",
toolbar:
// "fullscreen | code undo redo restoredraft | cut copy paste pastetext | fontsize| forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify |subscript superscript removeformat",
"fullscreen | fontsize| forecolor backcolor bold italic underline strikethrough | subscript superscript removeformat",
});
2021-09-29 14:21:33 +08:00
return {
show_dialog,
loading,
subtitle,
editor_config,
2021-09-29 14:21:33 +08:00
async showDialog() {
show_dialog.value = true;
loading.value = true;
try {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.getSubtitle();
if (response) {
subtitle.value = response.subtitle;
}
} catch (e) {
console.log(e);
show_dialog.value = false;
}
loading.value = false;
2021-09-29 14:21:33 +08:00
},
onShow() {
let success = false;
const checkZIndex = () => {
document.querySelectorAll(".tox ").forEach((item) => {
if (item && item.classList.contains("tox-tinymce-aux")) {
DomUtil.css(item, {
zIndex: "99999",
});
success = true;
}
});
};
const checkZIndexAsync = () => {
checkZIndex();
setTimeout(() => {
if (!success) {
checkZIndexAsync();
} else {
console.log("subtitle initialize success");
}
}, 50);
};
checkZIndexAsync();
2021-09-29 14:21:33 +08:00
},
resetData() {
loading.value = false;
},
async onSubmit() {
loading.value = true;
try {
GlobalData.getInstance()
.getCurrentClient()
?.setSubtitle(subtitle.value);
$q.notify({
color: "positive",
icon: "done",
message: $t.t("set subtitle success") + "!",
position: "top",
2021-12-22 11:25:04 +08:00
timeout: 1500,
2021-09-29 14:21:33 +08:00
});
show_dialog.value = false;
} catch {}
},
};
},
});
</script>