media_player_client/src/pages/MediaControlPage.vue

<template>
  <div
    v-show="is_multimedia_window && selected_window"
    class="col full-width"
    style="
      background-color: #bce0f0;
      border: 1px solid black;
      position: absolute;
      bottom: 1.5%;
    "
    @click="(evt) => evt.stopPropagation()"
  >
    <div class="row q-ma-sm">
      <div class="col-1 q-mx-md">
        <q-btn
          round
          flag
          size="lg"
          icon="skip_previous"
          :disable="!can_next_prev_window || plan_running"
          @click="playPrev"
        >
          <q-tooltip> {{ $t("play prev") }}</q-tooltip>
        </q-btn>
      </div>
      <div class="col-1 q-mx-md">
        <q-btn
          round
          flag
          size="lg"
          v-if="selected_window?.paused"
          :disable="!can_pause_window || plan_running"
          icon="play_arrow"
          @click="play"
        >
          <q-tooltip> {{ $t("play") }}</q-tooltip></q-btn
        >
        <q-btn
          :disable="!can_pause_window || plan_running"
          v-else
          round
          flag
          size="lg"
          icon="pause"
          @click="pause"
        >
          <q-tooltip> {{ $t("pause") }}</q-tooltip></q-btn
        >
      </div>
      <div class="col-1 q-mx-md">
        <q-btn
          round
          flag
          size="lg"
          :disable="!can_next_prev_window || plan_running"
          icon="skip_next"
          @click="playNext"
        >
          <q-tooltip> {{ $t("play next") }}</q-tooltip></q-btn
        >
      </div>
      <q-space />
      <div class="col-1 q-mx-md">
        <q-btn
          :disable="plan_running"
          round
          flag
          size="lg"
          icon="volume_down"
          @click="volumeDown"
        >
          <q-tooltip> {{ $t("volume down") }}</q-tooltip>
        </q-btn>
      </div>
      <div class="col-1 q-mx-md">
        <q-btn
          round
          flag
          size="lg"
          v-if="selected_window?.muted"
          :disable="plan_running"
          icon="volume_off"
          @click="unmuteWindow"
          ><q-tooltip> {{ $t("unmute") }}</q-tooltip></q-btn
        >
        <q-btn
          v-else
          :disable="plan_running"
          round
          flag
          size="lg"
          icon="volume_mute"
          @click="muteWindow"
          ><q-tooltip> {{ $t("mute") }}</q-tooltip></q-btn
        >
      </div>
      <div class="col-1 q-mx-md">
        <q-btn
          :disable="plan_running"
          round
          flag
          size="lg"
          icon="volume_up"
          @click="volumeUp"
        >
          <q-tooltip> {{ $t("volume up") }}</q-tooltip>
        </q-btn>
      </div>
    </div>
  </div>
</template>

<style scoped></style>

<script lang="ts">
import GlobalData from "src/common/GlobalData";
import { defineComponent, ref, Ref, computed, onMounted, watch } from "vue";
const elementResizeDetectorMaker = require("element-resize-detector");
import { Protocol } from "src/entities/WSProtocol";
import Window from "src/components/Window.vue";

import { useI18n } from "vue-i18n";
import { useStore } from "src/store";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
import { useQuasar } from "quasar";
import { NotifyMessage } from "src/common/ClientConnection";

import EditVolumeDialog from "src/components/EditVolumeDialog.vue";

export default defineComponent({
  name: "PageMediaControl",

  components: { Window, EditVolumeDialog },
  setup() {
    const $q = useQuasar();
    const $store = useStore();
    const $t = useI18n();

    let selected_window: Ref<WindowOpenNotifyEntity | null> = ref(null);
    let is_multimedia_window = ref(false);

    let can_pause_window = ref(false);
    let can_next_prev_window = ref(false);

    const plan_running = computed(
      () => $store.state.current_running_plan.trim() != ""
    );

    watch(
      () => $store.state.selected_window,
      (newValue, oldValue) => {
        const window = $store.state.windows.find(
          (element) => element && element.uuid == newValue
        );
        if (window) {
          selected_window.value = window;
          const signal_source = GlobalData.getInstance().signal_source.find(
            (element) =>
              element && element.uuid == window.signal_source_table_uuid
          );
          if (signal_source) {
            const type = window.polling
              ? window.polling_window_type
              : signal_source.window_type;
            is_multimedia_window.value =
              type == "EwindowType::Multimedia" ||
              type == "EwindowType::Rtsp" ||
              type == "EwindowType::HdmiIn";

            can_pause_window.value =
              type == "EwindowType::Multimedia" ||
              type == "EwindowType::HdmiIn";
            can_next_prev_window.value = type == "EwindowType::Multimedia";
          }
        } else {
          selected_window.value = null;
          is_multimedia_window.value = false;
          can_pause_window.value = false;
          can_next_prev_window.value = false;
        }
      }
    );

    return {
      selected_window,
      is_multimedia_window,
      can_pause_window,
      can_next_prev_window,
      plan_running,

      volumeUp(evt: MouseEvent) {
        evt.stopPropagation();
        if (selected_window.value) {
          let volume = selected_window.value.volume + 5;
          if (volume > 100) {
            volume = 100;
          }
          GlobalData.getInstance()
            .getCurrentClient()
            ?.setWindowVolume(selected_window.value.window_id, volume);
        }
      },
      muteWindow(evt: MouseEvent) {
        evt.stopPropagation();
        if (selected_window.value) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.muteWindow(selected_window.value.window_id);
        }
      },
      unmuteWindow(evt: MouseEvent) {
        evt.stopPropagation();
        if (selected_window.value) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.unmuteWindow(selected_window.value.window_id);
        }
      },
      volumeDown(evt: MouseEvent) {
        evt.stopPropagation();
        if (selected_window.value) {
          let volume = selected_window.value.volume - 5;
          if (volume < 0) {
            volume = 0;
          }
          GlobalData.getInstance()
            .getCurrentClient()
            ?.setWindowVolume(selected_window.value.window_id, volume);
        }
      },
      playNext(evt: MouseEvent) {
        evt.stopPropagation();
        if (selected_window.value) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.windowPlayNext(selected_window.value.window_id);
        }
      },
      play(evt: MouseEvent) {
        evt.stopPropagation();
        if (selected_window.value) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.playWindow(selected_window.value.window_id);
        }
      },
      pause(evt: MouseEvent) {
        evt.stopPropagation();
        if (selected_window.value) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.pauseWindow(selected_window.value.window_id);
        }
      },
      playPrev(evt: MouseEvent) {
        evt.stopPropagation();
        if (selected_window.value) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.windowPlayPrev(selected_window.value.window_id);
        }
      },
    };
  },
});
</script>