fcast/receivers/common/web/viewer/Renderer.ts

import { EventMessage, EventType, KeyEvent, MediaItem, MediaItemEvent, PlayMessage, SeekMessage, SetSpeedMessage, SetVolumeMessage } from 'common/Packets';
import { supportedImageTypes } from 'common/MimeTypes';
import * as connectionMonitor from '../ConnectionMonitor';
import { toast, ToastIcon } from '../components/Toast';
const logger = window.targetAPI.logger;



const imageViewer = document.getElementById('viewer-image') as HTMLImageElement;
const genericViewer = document.getElementById('viewer-generic') as HTMLIFrameElement;

function onPlay(_event, value: PlayMessage) {
    logger.info("Handle play message renderer", JSON.stringify(value));
    const playMediaItem = new MediaItem(
            value.container, value.url, value.content,
            value.time, value.volume, value.speed,
            null, null, value.headers, value.metadata
        );
    window.targetAPI.emitEvent(new EventMessage(Date.now(), new MediaItemEvent(EventType.MediaItemChange, playMediaItem)));
    const src = value.url ? value.url : value.content;

    if (src && value.container && supportedImageTypes.find(v => v === value.container.toLocaleLowerCase()) && imageViewer) {
        logger.info("Loading image viewer");

        genericViewer.style.display = "none";
        genericViewer.src = "";

        imageViewer.src = src;
        imageViewer.style.display = "block";
    }
    else if (src && genericViewer) {
        logger.info("Loading generic viewer");

        imageViewer.style.display = "none";
        imageViewer.src = "";

        genericViewer.src = src;
        genericViewer.style.display = "block";
    } else {
        logger.error("Error loading content");

        imageViewer.style.display = "none";
        imageViewer.src = "";

        genericViewer.style.display = "none";
        genericViewer.src = "";
    }
};

window.targetAPI.onPause(() => { logger.warn('onPause handler invoked for generic content viewer'); });
window.targetAPI.onResume(() => { logger.warn('onResume handler invoked for generic content viewer'); });
window.targetAPI.onSeek((_event, value: SeekMessage) => { logger.warn('onSeek handler invoked for generic content viewer'); });
window.targetAPI.onSetVolume((_event, value: SetVolumeMessage) => { logger.warn('onSetVolume handler invoked for generic content viewer'); });
window.targetAPI.onSetSpeed((_event, value: SetSpeedMessage) => { logger.warn('onSetSpeed handler invoked for generic content viewer'); });

connectionMonitor.setUiUpdateCallbacks({
    onConnect: (connections: string[], initialUpdate: boolean = false) => {
        if (!initialUpdate) {
            toast('Device connected', ToastIcon.INFO);
        }
    },
    onDisconnect: (connections: string[]) => {
        toast('Device disconnected. If you experience playback issues, please reconnect.', ToastIcon.INFO);
    },
});

window.targetAPI.onPlay(onPlay);

document.addEventListener('keydown', (event: KeyboardEvent) => {
    if (window.targetAPI.getSubscribedKeys().keyDown.has(event.key)) {
        window.targetAPI.emitEvent(new EventMessage(Date.now(), new KeyEvent(EventType.KeyDown, event.key, event.repeat, false)));
    }
});
document.addEventListener('keyup', (event: KeyboardEvent) => {
    if (window.targetAPI.getSubscribedKeys().keyUp.has(event.key)) {
        window.targetAPI.emitEvent(new EventMessage(Date.now(), new KeyEvent(EventType.KeyUp, event.key, event.repeat, false)));
    }
});