feat: new video footage will be played when the pilot hovers over element and middle clicks.
This commit is contained in:
parent
96a8f94eab
commit
6830ac9ac5
BIN
src/assets/DroneFootage_small.gif
Normal file
BIN
src/assets/DroneFootage_small.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 13 MiB |
BIN
src/assets/RequestVideoDefault.png
Normal file
BIN
src/assets/RequestVideoDefault.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.8 KiB |
@ -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(
|
||||
|
68
src/components/Widget/VideoWidget.tsx
Normal file
68
src/components/Widget/VideoWidget.tsx
Normal file
@ -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;
|
@ -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>;
|
||||
}
|
||||
|
@ -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]: {
|
||||
|
@ -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 };
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user