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,
|
getConversations,
|
||||||
updateNumUnreadMessages,
|
updateNumUnreadMessages,
|
||||||
} from 'src/redux/slices/conversationSlice';
|
} from 'src/redux/slices/conversationSlice';
|
||||||
|
import { getAllElements } from 'src/redux/slices/minimapSlice';
|
||||||
|
|
||||||
type ListWidgetProps = {
|
type ListWidgetProps = {
|
||||||
widget: Widget;
|
widget: Widget;
|
||||||
@ -23,6 +24,8 @@ const GAP_BETWEEN_ELEMENTS = 6;
|
|||||||
const ListWidget = ({ widget }: ListWidgetProps) => {
|
const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||||
const conversations = useAppSelector(getConversations);
|
const conversations = useAppSelector(getConversations);
|
||||||
|
|
||||||
|
const allElements = useAppSelector(getAllElements);
|
||||||
|
|
||||||
const elementsInGaze = useAppSelector(getElementsInGaze);
|
const elementsInGaze = useAppSelector(getElementsInGaze);
|
||||||
const gazesAndKeys = useAppSelector(getGazesAndKeys);
|
const gazesAndKeys = useAppSelector(getGazesAndKeys);
|
||||||
const { activeElementId, activeConversationId } =
|
const { activeElementId, activeConversationId } =
|
||||||
@ -76,8 +79,31 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
|||||||
setConvoElements(newConvoElements);
|
setConvoElements(newConvoElements);
|
||||||
}, [widget.elements, conversations]);
|
}, [widget.elements, conversations]);
|
||||||
|
|
||||||
// change selected element in list of arrow up or arrow down
|
|
||||||
|
|
||||||
useEffect(() => {
|
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')) {
|
if (gazesAndKeys.some((gazeAndKey) => gazeAndKey.keyPress === 'KeyS')) {
|
||||||
const currSelectedElemIndex =
|
const currSelectedElemIndex =
|
||||||
convoElements.findIndex(
|
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 MapWarningWidget from 'src/components/Widget/MapWarningWidget';
|
||||||
import HistoryWidget from 'src/components/Widget/HistoryWidget';
|
import HistoryWidget from 'src/components/Widget/HistoryWidget';
|
||||||
import AcaHeaderWidget from 'src/components/Widget/AcaHeaderWidget';
|
import AcaHeaderWidget from 'src/components/Widget/AcaHeaderWidget';
|
||||||
|
import VideoWidget from 'src/components/Widget/VideoWidget';
|
||||||
import BasicWidget from './BasicWidget';
|
import BasicWidget from './BasicWidget';
|
||||||
|
|
||||||
type WidgetProps = {
|
type WidgetProps = {
|
||||||
@ -25,6 +26,8 @@ const Widget = ({ widget }: WidgetProps) => {
|
|||||||
return <HistoryWidget widget={widget} />;
|
return <HistoryWidget widget={widget} />;
|
||||||
case 'aca-header':
|
case 'aca-header':
|
||||||
return <AcaHeaderWidget widget={widget} />;
|
return <AcaHeaderWidget widget={widget} />;
|
||||||
|
case 'video-footage':
|
||||||
|
return <VideoWidget widget={widget} />
|
||||||
default:
|
default:
|
||||||
return <div>Unknown Widget</div>;
|
return <div>Unknown Widget</div>;
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { v4 as uuid } from 'uuid';
|
import { v4 as uuid } from 'uuid';
|
||||||
import LeftScreenMap from 'src/assets/left-bottom-map.png';
|
import LeftScreenMap from 'src/assets/left-bottom-map.png';
|
||||||
import LeftScreenVideo from 'src/assets/left-video.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 { type ImageElement } from 'src/types/element';
|
||||||
import {
|
import {
|
||||||
initialShips,
|
initialShips,
|
||||||
@ -19,7 +19,7 @@ const initialLeftScreenWidgets: WidgetMap = {
|
|||||||
// left video box widget
|
// left video box widget
|
||||||
[videoBoxUuid]: {
|
[videoBoxUuid]: {
|
||||||
id: videoBoxUuid,
|
id: videoBoxUuid,
|
||||||
type: 'basic',
|
type: 'video-footage',
|
||||||
screen: '/pearce-screen',
|
screen: '/pearce-screen',
|
||||||
sectionType: 'map-video',
|
sectionType: 'map-video',
|
||||||
x: 50,
|
x: 50,
|
||||||
@ -42,7 +42,7 @@ const initialLeftScreenWidgets: WidgetMap = {
|
|||||||
],
|
],
|
||||||
maxAmount: 1,
|
maxAmount: 1,
|
||||||
tags: ['video'],
|
tags: ['video'],
|
||||||
} satisfies BasicWidget,
|
} satisfies VideoWidget,
|
||||||
|
|
||||||
// left map box widget
|
// left map box widget
|
||||||
[mapBoxUuid]: {
|
[mapBoxUuid]: {
|
||||||
|
@ -68,6 +68,10 @@ export type CustomWidget = BaseWidget & {
|
|||||||
// additonal properties...
|
// additonal properties...
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type VideoWidget = BaseWidget & {
|
||||||
|
type: 'video-footage'
|
||||||
|
}
|
||||||
|
|
||||||
export type Widget =
|
export type Widget =
|
||||||
| CustomWidget
|
| CustomWidget
|
||||||
| VehicleWidget
|
| VehicleWidget
|
||||||
@ -76,7 +80,8 @@ export type Widget =
|
|||||||
| GridWidget
|
| GridWidget
|
||||||
| HistoryWidget
|
| HistoryWidget
|
||||||
| AcaHeaderWidget
|
| AcaHeaderWidget
|
||||||
| MapWarningWidget;
|
| MapWarningWidget
|
||||||
|
| VideoWidget;
|
||||||
|
|
||||||
export type WidgetMap = { [key: string]: Widget };
|
export type WidgetMap = { [key: string]: Widget };
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user