media_player_client/src/components/PlaylistDialog.vue

<template>
  <q-dialog
    persistent
    v-model="show_dialog"
    @before-hide="resetData"
    @keydown="
      (evt) => {
        if (!loading && evt.keyCode == 27) {
          show_dialog = false;
        }
      }
    "
  >
    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("play list") }}
            </div>
            <q-space />
            <div>
              <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
          style="max-height: 50vh; width: 60vw; height: 50vh"
          class="scroll"
        >
          <q-list>
            <div v-for="(item, index) of play_list" :key="index">
              <q-item clickable>
                <q-item-section>
                  <div class="fit">{{ item }}</div>
                </q-item-section>
                <q-item-section avatar>
                  <q-btn
                    icon="edit"
                    round
                    flat
                    color="blue"
                    @click="editPlaylistItem(index, item)"
                  />
                </q-item-section>
                <q-item-section avatar>
                  <q-btn
                    icon="delete"
                    round
                    flat
                    color="red"
                    @click="play_list.splice(index, 1)"
                  />
                </q-item-section>
              </q-item>
            </div>
          </q-list>
        </q-card-section>

        <q-separator />
        <q-card-actions>
          <q-btn
            ref="accept"
            flat
            :label="$t('add row')"
            :loading="loading"
            color="primary"
            @click="addRow"
          />
          <q-space />
          <q-btn
            :loading="loading"
            flat
            :label="$t('close and reset')"
            color="primary"
            v-close-popup
          />
          <q-btn
            ref="accept"
            flat
            :label="$t('close and save')"
            :disable="play_list.length == 0"
            :loading="loading"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
  <file-manage-dialog ref="file_manage_dialog" />
</template>

<style scoped>
.disable_tree {
  background: #9e9e9e;
  cursor: wait;
  pointer-events: none;
}
</style>

<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { api } from "boot/axios";
import { HttpProtocol } from "src/entities/HttpProtocol";
import FileManageDialog from "src/components/FileManageDialog.vue";
import FileEntity from "src/entities/FileEntity";
import { url } from "inspector";

export default defineComponent({
  name: "ComponentPlaylistDialog",
  components: { FileManageDialog },

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let loading = ref(false);
    let file_manage_dialog: any = ref(null);

    let play_list = ref(<string[]>[]);

    let _resolove: any = null;

    const initialize_properties = (playlist: string) => {
      play_list.value = [];
      const prefix = (
        GlobalData.getInstance().applicationConfig?.application_data_dir ?? ""
      ).replace(/\\/g, "/");

      console.log(playlist);
      const temp_play_list = [];
      try {
        const temp_parse = JSON.parse(playlist);
        if (Array.isArray(temp_parse)) {
          for (const item of temp_parse) {
            temp_play_list.push(item.toString());
          }
        } else {
          temp_play_list.push(temp_parse.toString());
        }
      } catch (e) {
        temp_play_list.push(playlist.toString());
      }

      for (let item of temp_play_list) {
        if (!item || item.length == 0) {
          continue;
        }
        try {
          let temp_str = decodeURI(new URL(item).pathname).replace(/\\/g, "/");
          if (
            (GlobalData.getInstance().applicationConfig?.runtime_os ??
              "UNKNOW") == "WINDOWS"
          ) {
            temp_str = temp_str.substr(1);
          }

          if (temp_str.startsWith(prefix)) {
            temp_str = temp_str.substr(prefix.length + 1);
          }
          play_list.value.push(temp_str);
        } catch (e) {
          console.warn(e);
        }
      }
    };

    const doSelectFile = async () => {
      let result = "";
      const obj = await file_manage_dialog.value.showDialogAsync(
        "select",
        filter
      );
      if (obj) {
        interface __I {
          path: string;
          file: FileEntity;
        }
        let { path, file }: __I = obj;
        if (path && file) {
          result = path + "/" + file.name;
        }

        return result.replace(/\\/g, "/");
      }
    };

    const addRow = async () => {
      const path = await doSelectFile();
      if (path) {
        play_list.value.push(path);
      }
    };

    let filter: string | undefined = "";

    return {
      show_dialog,
      loading,
      play_list,
      file_manage_dialog,

      addRow,

      showDialogAsync(options: any, _filter?: string) {
        if (_resolove) {
          _resolove();
          _resolove = null;
        }
        filter = _filter;
        initialize_properties(options);
        if (play_list.value.length == 0) {
          addRow();
        }
        show_dialog.value = true;
        return new Promise((resolove) => {
          _resolove = resolove;
        });
      },
      resetData() {
        loading.value = false;
        if (_resolove) {
          _resolove();
          _resolove = null;
        }
      },
      async editPlaylistItem(index: number, item: string) {
        const path = await doSelectFile();
        if (path) {
          play_list.value[index] = path;
        }
      },
      async onSubmit() {
        loading.value = true;
        try {
          if (_resolove) {
            if (play_list.value.length == 0) {
              _resolove();
            } else {
              const temp =
                GlobalData.getInstance().applicationConfig
                  ?.application_data_dir ?? "";
              let temp_play_list = [];
              for (const item of play_list.value) {
                try {
                  if (
                    (GlobalData.getInstance().applicationConfig?.runtime_os ??
                      "UNKNOW") == "WINDOWS"
                  ) {
                    /** windows */
                    if (item.startsWith("/")) {
                      temp_play_list.push(item);
                    } else if (item[1] == ":") {
                      // windows 盘符
                      temp_play_list.push("file:///" + item);
                    } else {
                      temp_play_list.push(
                        new URL(temp + "/" + item).toString()
                      );
                    }
                  } else {
                    /** linux */
                    temp_play_list.push(item);
                  }
                } catch (e) {
                  console.log(e);
                }
              }
              _resolove(temp_play_list);
            }
          }
          show_dialog.value = false;
        } catch {}
        loading.value = false;
      },
    };
  },
});
</script>