media_player_client/src/components/SubtitleDialog.vue

<template>
  <q-dialog
    persistent
    v-model="show_dialog"
    @show="onShow"
    @before-hide="resetData"
    @keydown="
      (evt) => {
        if (!loading && evt.keyCode == 27) {
          show_dialog = false;
        }
      }
    "
  >
    <q-card class="overflow-hidden" style="max-width: 70vw">
      <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 />
            <div>
              <q-btn
                flat
                round
                color="secondary"
                :icon="
                  $q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'
                "
                @click="toggleFullScreen"
              >
                <q-tooltip>
                  {{
                    $q.fullscreen.isActive
                      ? $t("Exit Fullscreen")
                      : $t("Go Fullscreen")
                  }}
                </q-tooltip>
              </q-btn>
              <q-btn
                :loading="loading"
                flat
                round
                icon="close"
                color="red"
                v-close-popup
              >
                <q-tooltip>
                  {{ $t("close") }}
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-section class="scroll" style="width: 60vw">
          <q-list>
            <q-item>
              <q-item-section>
                <q-input
                  :label="$t('background color')"
                  v-model="subtitle.background"
                  :disable="subtitle.bakcground_transparent"
                  :rules="['anyColor']"
                  hint=""
                >
                  <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]"
                ></q-select>
              </q-item-section>
              <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>
            </q-item>
            <q-separator inset />

            <q-item ref="editor_parent" style="height: 40vh">
              <div class="col">
                <div class="row">
                  <div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div>
                </div>
                <div class="row" style="height: 90%">
                  <div ref="wysiwyg_editor"></div>
                </div>
              </div>
            </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>

<style scoped>
/* --------- EDITOR STYLES  ---------------------------------------------------------------------------------------- */

.editor__editable,
/* Classic build. */
main .ck-editor[role='application'] .ck.ck-content,
/* Decoupled document build. */
.ck.editor__editable[role='textbox'],
.ck.ck-editor__editable[role='textbox'],
/* Inline & Balloon build. */
.ck.editor[role='textbox'] {
  width: 100%;
  background: #fff;
  font-size: 1em;
  min-height: var(--ck-sample-editor-min-height);
  padding: 1.5em 2em;
}

main .ck-editor[role="application"] {
  overflow: auto;
}

.ck.ck-editor__editable {
  background: #fff;
  border: 1px solid hsl(0, 0%, 70%);
  width: 100%;
}

/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
.ck.ck-editor__editable {
  position: relative;
  z-index: var(--ck-sample-editor-z-index);
}

.editor-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  justify-content: center;
}
</style>

<script lang="ts">
import {
  defineComponent,
  ref,
  Ref,
  watch,
  computed,
  onMounted,
  onBeforeUnmount,
  nextTick,
} from "vue";
import { useStore } from "src/store";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import SubtitleEntity from "src/entities/SubtitleEntity";
import { log } from "util";

export default defineComponent({
  name: "ComponentSubtitleDialog",
  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let loading = ref(false);
    let subtitle = ref(new SubtitleEntity());
    let wysiwyg_editor: Ref<HTMLElement | null> = ref(null);
    let wysiwyg_toolbar: Ref<HTMLElement | null> = ref(null);
    let editor_parent: Ref<HTMLElement | null> = ref(null);
    let editor: any = null;

    const createEditor = () => {
      if (!wysiwyg_editor.value) {
        throw "wysiwyg_editor is null";
      }

      const fontOptions: number[] = [];
      for (let i = 9; i < 500; i += 3) {
        fontOptions.push(i);
      }

      (window as any).DecoupledDocumentEditor.create(wysiwyg_editor.value, {
        fontSize: {
          options: fontOptions,
        },
        toolbar: {
          items: [
            "alignment",
            "|",
            "fontSize",
            "fontColor",
            "fontBackgroundColor",
            "|",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "|",
            // "numberedList",
            // "bulletedList",
            // "todoList",
            // "|",
            "undo",
            "redo",
          ],
        },
        language: "zh-cn",
        licenseKey: "",
      })
        .then((_editor: any) => {
          editor = _editor;

          wysiwyg_toolbar.value?.appendChild(editor.ui.view.toolbar.element);
          document.querySelector(".ck-toolbar")?.classList.add("ck-reset_all");
        })
        .catch((error: any) => {
          console.error("Oops, something went wrong!");
          console.error(
            "Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:"
          );
          console.warn("Build id: t0wgz4abajwu-875d6cqqao7");
          console.error(error);
        });
    };

    return {
      show_dialog,
      loading,
      subtitle,
      wysiwyg_editor,
      wysiwyg_toolbar,
      editor_parent,
      async showDialog() {
        show_dialog.value = true;
        loading.value = true;

        try {
          let response = await GlobalData.getInstance()
            .getCurrentClient()
            ?.getSubtitle();
          if (response) {
            subtitle.value = response.subtitle;
            createEditor();
          }
          loading.value = false;
        } catch (e) {
          console.log(e);
          show_dialog.value = false;
        }
      },
      onShow() {
        if (editor) {
          setTimeout(() => {
            editor.ui.view.toolbar.isCompact = false;
            editor.ui.view.toolbar.maxWidth = "100%";
          }, 500);

          document.querySelectorAll(".ck-dropdown__panel").forEach((item) => {
            ((item as HTMLElement)?.style as any).overflow = "auto";
            ((item as HTMLElement)?.style as any).overflowX = "hidden";
            ((item as HTMLElement)?.style as any).height = "40vh";
            item.querySelectorAll(".ck-button__label").forEach((item_) => {
              ((item_ as HTMLElement)?.style as any).fontSize = "20px";
            });
          });

          editor.setData(subtitle.value.text);
        }
      },
      resetData() {
        loading.value = false;
      },

      async onSubmit() {
        loading.value = true;
        try {
          if (!editor) {
            $q.notify({
              color: "negative",
              icon: "warning",
              message: $t.t("editor error") + "!",
              position: "top",
              timeout: 1500,
            });
            return;
          }
          subtitle.value.text = editor.getData();

          GlobalData.getInstance()
            .getCurrentClient()
            ?.setSubtitle(subtitle.value);
          $q.notify({
            color: "positive",
            icon: "done",
            message: $t.t("set subtitle success") + "!",
            position: "top",
            timeout: 1500,
          });
          show_dialog.value = false;
        } catch {}
        loading.value = false;
      },
      toggleFullScreen(e: any) {
        console.log(e);
        const target = e.target.parentNode.parentNode.parentNode;
        console.log(target);
        $q.fullscreen
          .toggle(target)
          .then(() => {})
          .catch((err) => {
            console.error(err);
          });
      },
    };
  },
});
</script>