From 9ed2f7070142a53b69a0b3d91e892df56ee0b723 Mon Sep 17 00:00:00 2001 From: Stanislav Fifik Date: Mon, 15 Jul 2024 22:09:03 +0000 Subject: [PATCH] :rotating_light: cleanup --- docker-compose.yml | 5 +- src/map.ts | 2 + src/model/ChromecastListener.ts | 15 ++-- src/model/FileManager.ts | 2 +- src/model/injectionSymbols.ts | 4 - src/modules/controls/ControlApp.vue | 6 +- src/modules/controls/OldApp.vue | 132 ---------------------------- src/modules/map/MapScene.vue | 20 ----- 8 files changed, 19 insertions(+), 167 deletions(-) delete mode 100644 src/modules/controls/OldApp.vue diff --git a/docker-compose.yml b/docker-compose.yml index 54f9db4..084f69e 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,7 +1,10 @@ version: "3.7" services: gate: - image: nginx:latest + image: registry.gitlab.com/standa-fifik/battle-caster:latest + build: + context: . + dockerfile: Dockerfile ports: - "8080:80" volumes: diff --git a/src/map.ts b/src/map.ts index 244fe63..61416b2 100644 --- a/src/map.ts +++ b/src/map.ts @@ -9,7 +9,9 @@ import { ChromecastReceiver } from './model/ChromecastListener'; const app = createApp(MapApp) // @ts-ignore app.provide(ReceiverSymbol, new MultiReceiver([ + // @ts-ignore new BroadcastReceiver(), + // @ts-ignore new ChromecastReceiver(), ])); diff --git a/src/model/ChromecastListener.ts b/src/model/ChromecastListener.ts index 63d901d..8b7acba 100644 --- a/src/model/ChromecastListener.ts +++ b/src/model/ChromecastListener.ts @@ -56,14 +56,13 @@ export class ChromecastSender implements Sender { this.dataChannel.addEventListener('message', (event) => { console.log('data channel message', event.data); }); - window['webrtcPeer'] = this.webrtcPeer; - window['dataChannel'] = this.dataChannel; const offer = await this.webrtcPeer.createOffer(); await this.webrtcPeer.setLocalDescription(offer); // @ts-ignore this.sendMessage({ type: 'RTC_OFFER', offer }); this.webrtcPeer.onicecandidate = (event: any) => { if (event.candidate) { + // @ts-ignore this.sendMessage({ type: 'RTC_ICE', candidate: event.candidate }); // @ts-ignore console.log('sending ice candidate', event.candidate); @@ -159,7 +158,7 @@ export class ChromecastSender implements Sender { export class ChromecastReceiver extends EventTarget implements Receiver { private webrtcPeer?: RTCPeerConnection - private dataChannel: RTCDataChannel; + private dataChannel?: RTCDataChannel; constructor() { super(); @@ -189,7 +188,7 @@ export class ChromecastReceiver extends EventTarget implements Receiver { this.dispatchEvent(new CustomEvent(msg.type, {detail: msg})); this.dispatchEvent(new CustomEvent('all', {detail: msg})); // log('data channel message', event.data); - this.dataChannel.send(JSON.stringify({ type: 'ACK', data: 'Hello, sender!' })); + this.dataChannel?.send(JSON.stringify({ type: 'ACK', data: 'Hello, sender!' })); } catch (err) { log('data channel error', err); } @@ -210,15 +209,16 @@ export class ChromecastReceiver extends EventTarget implements Receiver { private initializeCastApi() { try { + // @ts-ignore const context = cast.framework.CastReceiverContext.getInstance(); + // @ts-ignore const options = new cast.framework.CastReceiverOptions(); - const playerManager = context.getPlayerManager(); - context.addCustomMessageListener(CHANNEL, (event) => { + context.addCustomMessageListener(CHANNEL, (event: any) => { const msg = event.data; log('msg', event.data.type); if (msg.type === 'RTC_OFFER') { - this.initializeWebRTC(msg.offer, (data) => context.sendCustomMessage(CHANNEL, event.senderId, data)); + this.initializeWebRTC(msg.offer, (data: any) => context.sendCustomMessage(CHANNEL, event.senderId, data)); } else if (msg.type === 'RTC_ICE') { this.webrtcPeer?.addIceCandidate(msg.candidate); } else { @@ -233,6 +233,7 @@ export class ChromecastReceiver extends EventTarget implements Receiver { options.maxInactivity = 3600; // Development only context.start(options); } catch (err) { + // @ts-ignore log('initializeCastApi error', err.stack); } } diff --git a/src/model/FileManager.ts b/src/model/FileManager.ts index 526c8be..9fde676 100644 --- a/src/model/FileManager.ts +++ b/src/model/FileManager.ts @@ -54,7 +54,7 @@ export class FileManager { } } - private extractMetaFromFileName(name: string): { width: number, height: number } { + private extractMetaFromFileName(name: string): { width: number, height: number } | undefined { const czepeku = new RegExp(/\[([0-9]+)x([0-9]+)\]/); const czepekuMatches = name?.match(czepeku); if (czepekuMatches) { diff --git a/src/model/injectionSymbols.ts b/src/model/injectionSymbols.ts index bc8bc27..f697898 100644 --- a/src/model/injectionSymbols.ts +++ b/src/model/injectionSymbols.ts @@ -1,13 +1,9 @@ import { InjectionKey } from "vue"; import type { FileManager } from "./FileManager"; -import type { CastSender } from "./CastSender.ts_"; -import type { CastReceiver } from "./CastReceiver.ts_"; import { Receiver, Sender } from "./CommunicationChannel"; export const FileManagerSymbol = Symbol("FileManager") as InjectionKey; -export const CastSenderSymbol = Symbol("CastSender") as InjectionKey; -export const CastReceiverSymbol = Symbol("CastReceiver") as InjectionKey; export const CastTypeSymbol = Symbol("CastType") as InjectionKey<"sender" | "receiver">; export const SenderSymbol = Symbol('Sender') as InjectionKey; export const ReceiverSymbol = Symbol('Receiver') as InjectionKey; \ No newline at end of file diff --git a/src/modules/controls/ControlApp.vue b/src/modules/controls/ControlApp.vue index 5266c06..8069f6f 100644 --- a/src/modules/controls/ControlApp.vue +++ b/src/modules/controls/ControlApp.vue @@ -14,7 +14,6 @@ -
DPI: {{ screenDPI }}
@@ -54,7 +53,7 @@ watch(() => screenDiameterInch.value, (value) => { }) }); -watch(() => [positionX.value, positionY.value, flipped.value], (value) => { +watch(() => [positionX.value, positionY.value, flipped.value], () => { sender?.sendMessage({ type: 'changePosition', x: positionX.value, @@ -79,6 +78,9 @@ function openMapWindow() { const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); function onStreamImage() { + if (!openedFile.value?.path) { + return; + } const image = new Image() image.onload = async () => { const canvas = document.createElement('canvas'); diff --git a/src/modules/controls/OldApp.vue b/src/modules/controls/OldApp.vue deleted file mode 100644 index 42ff40b..0000000 --- a/src/modules/controls/OldApp.vue +++ /dev/null @@ -1,132 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/modules/map/MapScene.vue b/src/modules/map/MapScene.vue index e84af42..56a16db 100644 --- a/src/modules/map/MapScene.vue +++ b/src/modules/map/MapScene.vue @@ -22,7 +22,6 @@ import { computed, defineProps, inject, ref, watch } from 'vue'; import {ReceiverSymbol} from '../../model/injectionSymbols'; const video = ref(); -const image = ref(); const canvas = ref(); const props = defineProps<{ @@ -37,12 +36,7 @@ const isImage = computed(() => props.src?.endsWith('.png') || props.src?.endsWit const isVideo = computed(() => props.src?.endsWith('.mp4') || props.src?.endsWith('.webm')); const mediaDimensions = ref({width: 0, height: 0}); -const virtualMediaDimensions = ref({width: 0, height: 0}); -const windowSize = { - width: window.innerWidth, - height: window.innerHeight, -}; watch(() => props.src, (src) => { if (isImage.value) { @@ -113,14 +107,6 @@ const dynamicStyle = computed(() => { }); -function onImageLoaded(event: Event) { - console.log('image loaded', event.target); - mediaDimensions.value = { - width: image.value!.naturalWidth, - height: image.value!.naturalHeight, - }; -} - function onVideoLoaded(event: Event) { console.log('video loaded', event.target); mediaDimensions.value = { @@ -129,12 +115,6 @@ function onVideoLoaded(event: Event) { }; } -function updateImageSize() { - if (image.value) { - image.value.width = props.width; - } -} -