diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue index 13f3e75776..5485655ff5 100644 --- a/photon-client/src/components/app/photon-camera-stream.vue +++ b/photon-client/src/components/app/photon-camera-stream.vue @@ -8,7 +8,7 @@ import PvIcon from "@/components/common/pv-icon.vue"; const props = defineProps<{ streamType: "Raw" | "Processed"; - id?: string; + id: string; }>(); const streamSrc = computed(() => { @@ -25,8 +25,6 @@ const streamDesc = computed(() => `${props.streamType} Stream View`); const streamStyle = computed(() => { if (useStateStore().colorPickingMode) { return { width: "100%", cursor: "crosshair" }; - } else if (streamSrc.value !== loadingImage) { - return { width: "100%", cursor: "pointer" }; } return { width: "100%" }; @@ -40,11 +38,6 @@ const overlayStyle = computed(() => { } }); -const handleStreamClick = () => { - if (!useStateStore().colorPickingMode && streamSrc.value !== loadingImage) { - window.open(streamSrc.value); - } -}; const handleCaptureClick = () => { if (props.streamType === "Raw") { useCameraSettingsStore().saveInputSnapshot(); @@ -52,6 +45,14 @@ const handleCaptureClick = () => { useCameraSettingsStore().saveOutputSnapshot(); } }; +const handlePopoutClick = () => { + window.open(streamSrc.value); +}; +const handleFullscreenRequest = () => { + const stream = document.getElementById(props.id); + if (!stream) return; + stream.requestFullscreen(); +}; @@ -81,6 +94,7 @@ const handleCaptureClick = () => { } .stream-overlay { + display: flex; opacity: 0; transition: 0.1s ease; position: absolute; diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue index f7c110cf62..1d52bfcf05 100644 --- a/photon-client/src/components/cameras/CamerasView.vue +++ b/photon-client/src/components/cameras/CamerasView.vue @@ -78,10 +78,20 @@ const fpsTooLow = computed(() => {
- +
- +