media_player_client/src/pages/MediaControlPage.vue

<template>
  <div
    v-show="is_multimedia_window && selected_window"
    ref="wall"
    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="arrow_back" @click="playPrev"></q-btn>
      </div>
      <div class="col-1 q-mx-md">
        <q-btn
          round
          flag
          size="lg"
          v-if="!selected_window?.playing"
          icon="play_arrow"
          @click="play"
        ></q-btn>
        <q-btn v-else round flag size="lg" icon="pause" @click="pause"></q-btn>
      </div>
      <div class="col-1 q-mx-md">
        <q-btn
          round
          flag
          size="lg"
          icon="arrow_forward"
          @click="playNext"
        ></q-btn>
      </div>
      <q-space />
      <div class="col-1 q-mx-md">
        <q-btn round flag size="lg" icon="volume_down" @click="volumeDown">
        </q-btn>
      </div>
      <div class="col-1 q-mx-md">
        <q-btn
          round
          flag
          size="lg"
          v-if="selected_window?.muted"
          icon="volume_off"
          @click="unmuteWindow"
        ></q-btn>
        <q-btn
          v-else
          round
          flag
          size="lg"
          icon="volume_mute"
          @click="muteWindow"
        ></q-btn>
      </div>
      <div class="col-1 q-mx-md">
        <q-btn round flag size="lg" icon="volume_up" @click="volumeUp"></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);

    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) {
            is_multimedia_window.value =
              signal_source.window_type == "EwindowType::Multimedia" ||
              signal_source.window_type == "EwindowType::RTSP";
          }
        } else {
          selected_window.value = null;
          is_multimedia_window.value = false;
        }
      }
    );

    return {
      selected_window,
      is_multimedia_window,

      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>