mirrors/fcast
1
0
Fork 0
mirror of https://gitlab.com/futo-org/fcast.git synced 2025-06-24 21:25:23 +00:00
Code Activity

Receivers: Added image viewer UI

Browse source
This commit is contained in:
Michael Hollister 2025-06-18 16:58:35 -05:00
parent 023f1054e1
commit 7e4b5485ea
6 changed files with 419 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

25
receivers/electron/src/viewer/Renderer.ts
View file

@ -1,4 +1,11 @@
import { PlayerControlEvent, playerCtrlStateUpdate } from 'common/viewer/Renderer';
import { PlayerControlEvent, playerCtrlStateUpdate, idleBackground, idleIcon, imageViewer, genericViewer } from 'common/viewer/Renderer';
const playerCtrlFullscreen = document.getElementById("fullscreen");
playerCtrlFullscreen.onclick = () => { playerCtrlStateUpdate(PlayerControlEvent.ToggleFullscreen); };
idleBackground.ondblclick = () => { playerCtrlStateUpdate(PlayerControlEvent.ToggleFullscreen); };
idleIcon.ondblclick = () => { playerCtrlStateUpdate(PlayerControlEvent.ToggleFullscreen); };
imageViewer.ondblclick = () => { playerCtrlStateUpdate(PlayerControlEvent.ToggleFullscreen); };
genericViewer.ondblclick = () => { playerCtrlStateUpdate(PlayerControlEvent.ToggleFullscreen); };
export function targetPlayerCtrlStateUpdate(event: PlayerControlEvent): boolean {
let handledCase = false;
@ -7,13 +14,13 @@ export function targetPlayerCtrlStateUpdate(event: PlayerControlEvent): boolean
case PlayerControlEvent.ToggleFullscreen: {
window.electronAPI.toggleFullScreen();
// window.electronAPI.isFullScreen().then((isFullScreen: boolean) => {
// if (isFullScreen) {
// playerCtrlFullscreen.setAttribute("class", "fullscreen_on");
// } else {
// playerCtrlFullscreen.setAttribute("class", "fullscreen_off");
// }
// });
window.electronAPI.isFullScreen().then((isFullScreen: boolean) => {
if (isFullScreen) {
playerCtrlFullscreen.setAttribute("class", "fullscreen_on");
} else {
playerCtrlFullscreen.setAttribute("class", "fullscreen_off");
}
});
handledCase = true;
break;
@ -21,7 +28,7 @@ export function targetPlayerCtrlStateUpdate(event: PlayerControlEvent): boolean
case PlayerControlEvent.ExitFullscreen:
window.electronAPI.exitFullScreen();
// playerCtrlFullscreen.setAttribute("class", "fullscreen_off");
playerCtrlFullscreen.setAttribute("class", "fullscreen_off");
handledCase = true;
break;

27
receivers/electron/src/viewer/index.html
View file

@ -6,16 +6,33 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../assets/fonts/inter.css" />
<link rel="stylesheet" href="./common.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- Empty video element as a workaround to fix issue with white border outline without it... -->
<video id="video-player" class="video"></video>
<video id="idleBackground" class="video"></video>
<div id="viewer" class="viewer">
<div id="title-icon"></div>
<img id="viewer-image" class="viewer" />
<iframe id="viewer-generic" class="viewer"></iframe>
<div id="titleIcon"></div>
<div id="loadingSpinner" class="lds-ring"><div></div><div></div><div></div><div></div></div>
<img id="viewerImage" class="viewer" />
<iframe id="viewerGeneric" class="viewer"></iframe>
</div>>
<div id="controls" class="container">
<div id="leftButtonContainer" class="buttonContainer">
<div id="mediaTitle"></div>
</div>
<div id="centerButtonContainer" class="buttonContainer">
<div id="playPrevious" class="playPrevious iconSize" style="display: none"></div>
<div id="action" class="play iconSize" style="display: none"></div>
<div id="playlistLength" style="display: none"></div>
<div id="playNext" class="playNext iconSize" style="display: none"></div>
</div>
<div id="rightButtonContainer" class="buttonContainer">
<div id="fullscreen" class="fullscreen_on iconSize"></div>
</div>
</div>
<div id="toast-notification">
<div id="toast-icon"></div>
@ -24,4 +41,4 @@
<script src="./renderer.js"></script>
</body>
</html>
</html>

26
receivers/electron/src/viewer/style.css Normal file
View file

@ -0,0 +1,26 @@
.fullscreen_on {
width: 24px;
height: 24px;
cursor: pointer;
background-image: url("../assets/icons/player/icon24_fullscreen_on.svg");
transition: background-image 0.1s ease-in-out;
}
.fullscreen_on:hover {
background-image: url("../assets/icons/player/icon24_fullscreen_on_active.svg");
}
.fullscreen_off {
width: 24px;
height: 24px;
cursor: pointer;
background-image: url("../assets/icons/player/icon24_fullscreen_off.svg");
transition: background-image 0.1s ease-in-out;
}
.fullscreen_off:hover {
background-image: url("../assets/icons/player/icon24_fullscreen_off_active.svg");
}