diff --git a/src/assets/DroneFootage_small.gif b/src/assets/DroneFootage_small.gif new file mode 100644 index 0000000..5d0d8a9 Binary files /dev/null and b/src/assets/DroneFootage_small.gif differ diff --git a/src/assets/RequestVideoDefault.png b/src/assets/RequestVideoDefault.png new file mode 100644 index 0000000..c25aae6 Binary files /dev/null and b/src/assets/RequestVideoDefault.png differ diff --git a/src/components/Widget/ListWidget.tsx b/src/components/Widget/ListWidget.tsx index c3f2691..20a85a3 100644 --- a/src/components/Widget/ListWidget.tsx +++ b/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( diff --git a/src/components/Widget/VideoWidget.tsx b/src/components/Widget/VideoWidget.tsx new file mode 100644 index 0000000..bf0f681 --- /dev/null +++ b/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 ( +