feat: new video footage will be played when the pilot hovers over element and middle clicks.

src/components/Widget/ListWidget.tsx

@@ -12,6 +12,7 @@ import {
   getConversations,
   updateNumUnreadMessages,
 } from 'src/redux/slices/conversationSlice';
+import { getAllElements } from 'src/redux/slices/minimapSlice';
 
 type ListWidgetProps = {
   widget: Widget;
@@ -23,6 +24,8 @@ const GAP_BETWEEN_ELEMENTS = 6;
 const ListWidget = ({ widget }: ListWidgetProps) => {
   const conversations = useAppSelector(getConversations);
 
+  const allElements = useAppSelector(getAllElements);
+
   const elementsInGaze = useAppSelector(getElementsInGaze);
   const gazesAndKeys = useAppSelector(getGazesAndKeys);
   const { activeElementId, activeConversationId } =
@@ -76,8 +79,31 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
     setConvoElements(newConvoElements);
   }, [widget.elements, conversations]);
 
-  // change selected element in list of arrow up or arrow down
+
+
   useEffect(() => {
+  for(let gk of gazesAndKeys){
+    if(gk.keyPress === "1"){
+      for(let element of allElements){
+          if(element === undefined || gk.elemsInGaze[0] === undefined){
+              break;
+          }
+          if(element.id == gk.elemsInGaze[0].id && element.type == 'information'){
+          console.log(element);
+          dispatch(updateCommunication({
+            //@ts-ignore 
+            activeConversationId: element.conversationId,
+            activeElementId: element.id
+
+          }));
+          }
+      }
+    }
+  }
+}, [gazesAndKeys]);
+  
+  useEffect(() => {
+// change selected element in list of arrow up or arrow down
     if (gazesAndKeys.some((gazeAndKey) => gazeAndKey.keyPress === 'KeyS')) {
       const currSelectedElemIndex =
         convoElements.findIndex(

src/components/Widget/VideoWidget.tsx

@@ -0,0 +1,68 @@
+import type {VideoWidget as VideoWidgetType } from 'src/types/widget';
+import { useAppSelector } from 'src/redux/hooks';
+import droneFootage from 'src/assets/DroneFootage_small.gif';
+import defaultVideoScreen from 'src/assets/RequestVideoDefault.png';
+import {getElementsInGaze, getGazesAndKeys } from 'src/redux/slices/gazeSlice';
+import { useState, useEffect } from 'react';
+import { getAllElements } from 'src/redux/slices/minimapSlice';
+import { getActiveConversationId } from 'src/redux/slices/communicationSlice';
+
+type VideoWidgetProps = {
+  widget: VideoWidgetType;
+};
+
+const VideoWidget = ({ widget }: VideoWidgetProps) => {
+  const { x, y, h, w, elements } = widget;
+
+  
+  
+  
+  var gifImage = new Image();
+  gifImage.src = droneFootage;
+
+  var defaultImage = new Image();
+  defaultImage.src = defaultVideoScreen;
+  const[img, changeImage] = useState(defaultImage);
+  
+
+  const gazesAndKeys = useAppSelector(getGazesAndKeys);
+  const allElements = useAppSelector(getAllElements);
+
+  const selectedMessage = useAppSelector(getActiveConversationId);
+
+  useEffect(() => {
+    changeImage(defaultImage);
+  }, [selectedMessage]);
+
+  useEffect(() => {
+    for(let gk of gazesAndKeys){
+      if(gk.keyPress === "1"){
+        for(let element of allElements){
+            if(element === undefined || gk.elemsInGaze[0] === undefined){
+                // changeImage(defaultImage);
+                break;
+            }
+            if(element.id == gk.elemsInGaze[0].id && element.type == 'information'){
+            changeImage(gifImage);
+            }
+        }
+      }
+    }
+  }, [gazesAndKeys]);
+
+  return (
+    <div
+      style={{
+        top: y,
+        left: x,
+        width: w,
+        height: h,
+      }}
+      className="absolute bg-[#252526] flex gap-4 px-4 py-2"
+    >
+        <img src = {img.src} alt = "Drone Footage"/>
+    </div>
+  );
+};
+
+export default VideoWidget;

src/components/Widget/Widget.tsx

@@ -4,6 +4,7 @@ import VehicleWidget from 'src/components/Widget/VehicleWidget';
 import MapWarningWidget from 'src/components/Widget/MapWarningWidget';
 import HistoryWidget from 'src/components/Widget/HistoryWidget';
 import AcaHeaderWidget from 'src/components/Widget/AcaHeaderWidget';
+import VideoWidget from 'src/components/Widget/VideoWidget';
 import BasicWidget from './BasicWidget';
 
 type WidgetProps = {
@@ -25,6 +26,8 @@ const Widget = ({ widget }: WidgetProps) => {
         return <HistoryWidget widget={widget} />;
       case 'aca-header':
         return <AcaHeaderWidget widget={widget} />;
+      case 'video-footage':
+        return <VideoWidget widget={widget} />
       default:
         return <div>Unknown Widget</div>;
     }

src/prototype/utils/initialWidgets.ts

@@ -1,7 +1,7 @@
 import { v4 as uuid } from 'uuid';
 import LeftScreenMap from 'src/assets/left-bottom-map.png';
 import LeftScreenVideo from 'src/assets/left-video.png';
-import type { BasicWidget, HistoryWidget, WidgetMap } from 'src/types/widget';
+import type { BasicWidget, HistoryWidget, WidgetMap, VideoWidget } from 'src/types/widget';
 import { type ImageElement } from 'src/types/element';
 import {
   initialShips,
@@ -19,7 +19,7 @@ const initialLeftScreenWidgets: WidgetMap = {
   // left video box widget
   [videoBoxUuid]: {
     id: videoBoxUuid,
-    type: 'basic',
+    type: 'video-footage',
     screen: '/pearce-screen',
     sectionType: 'map-video',
     x: 50,
@@ -42,7 +42,7 @@ const initialLeftScreenWidgets: WidgetMap = {
     ],
     maxAmount: 1,
     tags: ['video'],
-  } satisfies BasicWidget,
+  } satisfies VideoWidget,
 
   // left map box widget
   [mapBoxUuid]: {

src/types/widget.ts

@@ -68,6 +68,10 @@ export type CustomWidget = BaseWidget & {
   // additonal properties...
 };
 
+export type VideoWidget = BaseWidget & {
+  type: 'video-footage'
+}
+
 export type Widget =
   | CustomWidget
   | VehicleWidget
@@ -76,7 +80,8 @@ export type Widget =
   | GridWidget
   | HistoryWidget
   | AcaHeaderWidget
-  | MapWarningWidget;
+  | MapWarningWidget
+  | VideoWidget;
 
 export type WidgetMap = { [key: string]: Widget };