PhotonVision/photon-client/src/components/app/photon-camera-stream.vue

<script setup lang="ts">
import { computed, inject } from "vue";
import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
import { useStateStore } from "@/stores/StateStore";
import loadingImage from "@/assets/images/loading.svg";
import type { StyleValue } from "vue/types/jsx";

const props = defineProps<{
  streamType: "Raw" | "Processed";
  id?: string;
}>();

const src = computed<string>(() => {
  const port =
    useCameraSettingsStore().currentCameraSettings.stream[props.streamType === "Raw" ? "inputPort" : "outputPort"];

  if (!useStateStore().backendConnected || port === 0) {
    return loadingImage;
  }

  return `http://${inject("backendHostname")}:${port}/stream.mjpg`;
});
const alt = computed<string>(() => `${props.streamType} Stream View`);

const style = computed<StyleValue>(() => {
  if (useStateStore().colorPickingMode) {
    return { cursor: "crosshair" };
  } else if (src.value !== loadingImage) {
    return { cursor: "pointer" };
  }

  return {};
});

const handleClick = () => {
  if (!useStateStore().colorPickingMode && src.value !== loadingImage) {
    window.open(src.value);
  }
};
</script>

<template>
  <img :id="id" crossorigin="anonymous" :src="src" :alt="alt" :style="style" @click="handleClick" />
</template>