Add option to view streams fullscreen (#1006)

closes #1005
PhotonVision · Nov 21, 2023 · 9b183eb · 9b183eb
1 parent 586adeb
commit 9b183eb
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git 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<string>(() => {
@@ -25,8 +25,6 @@ const streamDesc = computed<string>(() => `${props.streamType} Stream View`);
 const streamStyle = computed<StyleValue>(() => {
   if (useStateStore().colorPickingMode) {
     return { width: "100%", cursor: "crosshair" };
-  } else if (streamSrc.value !== loadingImage) {
-    return { width: "100%", cursor: "pointer" };
   }
 
   return { width: "100%" };
@@ -40,18 +38,21 @@ const overlayStyle = computed<StyleValue>(() => {
   }
 });
 
-const handleStreamClick = () => {
-  if (!useStateStore().colorPickingMode && streamSrc.value !== loadingImage) {
-    window.open(streamSrc.value);
-  }
-};
 const handleCaptureClick = () => {
   if (props.streamType === "Raw") {
     useCameraSettingsStore().saveInputSnapshot();
   } else {
     useCameraSettingsStore().saveOutputSnapshot();
   }
 };
+const handlePopoutClick = () => {
+  window.open(streamSrc.value);
+};
+const handleFullscreenRequest = () => {
+  const stream = document.getElementById(props.id);
+  if (!stream) return;
+  stream.requestFullscreen();
+};
 </script>
 
 <template>
@@ -62,7 +63,7 @@ const handleCaptureClick = () => {
       :src="streamSrc"
       :alt="streamDesc"
       :style="streamStyle"
-      @click="handleStreamClick"
+      onclick="this.requestFullscreen()"
     />
     <div class="stream-overlay" :style="overlayStyle">
       <pv-icon
@@ -71,6 +72,18 @@ const handleCaptureClick = () => {
         class="ma-1 mr-2"
         @click="handleCaptureClick"
       />
+      <pv-icon
+        icon-name="mdi-fullscreen"
+        tooltip="Open this stream in fullscreen"
+        class="ma-1 mr-2"
+        @click="handleFullscreenRequest"
+      />
+      <pv-icon
+        icon-name="mdi-open-in-new"
+        tooltip="Open this stream in a new window"
+        class="ma-1 mr-2"
+        @click="handlePopoutClick"
+      />
     </div>
   </div>
 </template>
@@ -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
@@ -78,10 +78,20 @@ const fpsTooLow = computed<boolean>(() => {
     </v-card-title>
     <div class="stream-container pb-4">
       <div class="stream">
-        <photon-camera-stream v-show="value.includes(0)" stream-type="Raw" style="max-width: 100%" />
+        <photon-camera-stream
+          v-show="value.includes(0)"
+          id="input-camera-stream"
+          stream-type="Raw"
+          style="max-width: 100%"
+        />
       </div>
       <div class="stream">
-        <photon-camera-stream v-show="value.includes(1)" stream-type="Processed" style="max-width: 100%" />
+        <photon-camera-stream
+          v-show="value.includes(1)"
+          id="output-camera-stream"
+          stream-type="Processed"
+          style="max-width: 100%"
+        />
       </div>
     </div>
     <v-divider />