diff --git a/apps/rpg-maestro-ui/src/app/clients/clients-ui.tsx b/apps/rpg-maestro-ui/src/app/clients/clients-ui.tsx index 8a47694..efcb0be 100644 --- a/apps/rpg-maestro-ui/src/app/clients/clients-ui.tsx +++ b/apps/rpg-maestro-ui/src/app/clients/clients-ui.tsx @@ -1,21 +1,25 @@ import AudioPlayer from 'react-h5-audio-player'; +import H5AudioPlayer from 'react-h5-audio-player'; import { ToastContainer } from 'react-toastify'; import { useEffect, useRef, useState } from 'react'; -import H5AudioPlayer from 'react-h5-audio-player'; import { resyncCurrentTrackIfNeeded } from '../track-sync/track-sync'; import { displayError } from '../error-utils'; import { PlayingTrack } from '@rpg-maestro/rpg-maestro-api-contract'; +import GithubSourceCodeLink from '../ui-components/github-source-code-link/github-source-code-link'; -export function ClientsUi(){ +export function ClientsUi() { const [currentTrack, setCurrentTrack] = useState(null); const [intervalId, setIntervalId] = useState(null); const audioPlayer = useRef(); useEffect(() => { async function resyncCurrentTrackOnUi() { - const newerServerTrack = await resyncCurrentTrackIfNeeded(audioPlayer.current?.audio?.current?.currentTime ?? null, currentTrack); - if(newerServerTrack){ - console.log("synchronizing track") + const newerServerTrack = await resyncCurrentTrackIfNeeded( + audioPlayer.current?.audio?.current?.currentTime ?? null, + currentTrack + ); + if (newerServerTrack) { + console.log('synchronizing track'); setCurrentTrack(newerServerTrack); if (!newerServerTrack) { throw new Error('Current track is not defined'); @@ -31,16 +35,17 @@ export function ClientsUi(){ audioPlayer.current.audio.current.pause(); } else { // playing - try{ + try { await audioPlayer.current.audio.current.play(); - }catch (error){ - if (error instanceof DOMException && error.name === "NotAllowedError") { - console.error(`Play failed: User interaction with the document is required first. Original error: ${error}`); + } catch (error) { + if (error instanceof DOMException && error.name === 'NotAllowedError') { + console.error( + `Play failed: User interaction with the document is required first. Original error: ${error}` + ); displayError('This is your first time using the app, please accept autoplay by hitting play :)'); } else { - console.error("An unexpected error occurred:", error); + console.error('An unexpected error occurred:', error); } - } } } else { @@ -57,22 +62,19 @@ export function ClientsUi(){ return () => clearInterval(id); }, [currentTrack]); - return <> -
-

RPG-Maestro player UI

- + return ( + <>
-

{currentTrack?.name}

- +
+

RPG-Maestro player UI

+
+

{currentTrack?.name}

+ +
+ +
+
- - -
- -} \ No newline at end of file + + ); +} diff --git a/apps/rpg-maestro-ui/src/app/ui-components/github-source-code-link/github-source-code-link.css b/apps/rpg-maestro-ui/src/app/ui-components/github-source-code-link/github-source-code-link.css new file mode 100644 index 0000000..aae83c5 --- /dev/null +++ b/apps/rpg-maestro-ui/src/app/ui-components/github-source-code-link/github-source-code-link.css @@ -0,0 +1,28 @@ +.github-link-container { + display: flex; + align-items: center; + justify-content: center; + margin: 1rem; +} + +.github-link { + display: flex; + align-items: center; + text-decoration: none; + color: #000; + font-weight: 500; + transition: color 0.2s ease-in-out; +} + +.github-link:hover { + color: #0366d6; /* GitHub blue */ +} + +.github-logo { + width: 24px; + height: 24px; +} + +.github-link-text { + margin-left: 8px; +} diff --git a/apps/rpg-maestro-ui/src/app/ui-components/github-source-code-link/github-source-code-link.tsx b/apps/rpg-maestro-ui/src/app/ui-components/github-source-code-link/github-source-code-link.tsx new file mode 100644 index 0000000..b2c9ac1 --- /dev/null +++ b/apps/rpg-maestro-ui/src/app/ui-components/github-source-code-link/github-source-code-link.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import "./github-source-code-link.css"; // Import the CSS file + +const GitHubLink = () => { + return ( +
+ + {/* Inline SVG for GitHub Logo */} + + + + View source code + +
+ ); +}; + +export default GitHubLink; \ No newline at end of file