docs: update readme todos

README.md

@@ -1,7 +1,7 @@
 # RpgMaestro
 ## TODO
 - Youtube to mp3
-  - make a script that do conversion on my server and put it in correct directory
+  - make a script that do conversion on my server and put it in correct directory ✅
   - upload on fourgate.cloud.private by default
   - for now, add them to default session via API
   - auto create the track in RPG maestro shared db <- this is not possible yet, might want to think about that.. like a catalogue ?

apps/rpg-maestro-ui/src/app/app.tsx

@@ -17,9 +17,6 @@ export function App() {
       {/* START: routes */}
       {/* These routes and navigation have been generated for you */}
       {/* Feel free to move and update them to fit your needs */}
-      <br />
-      <hr />
-      <br />
       <Routes>
         <Route path="/" element={<ClientsUi />} />
         <Route path="/admin" element={<MaestroSoundboard />} />

apps/rpg-maestro-ui/src/app/clients/audio-player-readonly.css

@@ -0,0 +1,33 @@
+.rhap_controls-section {
+    display: flex;
+    justify-content: space-evenly;
+    align-content: center;
+    align-items: center;
+    width: 80%;
+}
+
+.rhap_main-controls {
+}
+
+.rhap_volume-controls {
+    flex: none;
+
+}
+
+.rhap_volume-container {
+    flex: none;
+    min-width: 100px;
+    width: 10vw;
+}
+
+.rhap_additional-controls {
+    display: none;
+}
+
+.rhap_progress-section{
+    cursor: not-allowed;
+}
+.rhap_progress-section .rhap_progress-bar,
+.rhap_progress-section .rhap_progress-container {
+    pointer-events: none;
+}

apps/rpg-maestro-ui/src/app/clients/clients-ui.tsx

@@ -6,6 +6,8 @@ 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';
+import './audio-player-readonly.css';
+import MusicNoteIcon from '@mui/icons-material/MusicNote';
 
 export function ClientsUi() {
   const [currentTrack, setCurrentTrack] = useState<PlayingTrack | null>(null);
@@ -64,15 +66,43 @@ export function ClientsUi() {
 
   return (
     <>
-      <div>
-        <div style={{ display: 'flex', flexDirection: 'column', textAlign: 'center', rowGap: '10vh' }}>
-          <h1>RPG-Maestro player UI</h1>
-          <div>
-            <h3>{currentTrack?.name}</h3>
-            <AudioPlayer src={currentTrack?.url} ref={audioPlayer} loop={true} />
-          </div>
-          <GithubSourceCodeLink />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          rowGap: '10vh',
+        }}
+      >
+        <h1>RPG-Maestro player UI</h1>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-around',
+            alignItems: 'center',
+            height: '20vh',
+          }}
+        >
+          <AudioPlayer
+            src={currentTrack?.url}
+            ref={audioPlayer}
+            loop={true}
+            showJumpControls={false}
+            showSkipControls={false}
+            customAdditionalControls={undefined}
+            style={{
+              width: '50vw',
+              minWidth: '300px',
+            }}
+            header={<h3 style={{ textAlign: 'center' }}>{currentTrack?.name}</h3>}
+            customIcons={{
+              pause: <MusicNoteIcon style={{cursor:'not-allowed'}}/>
+            }}
+          />
         </div>
+        <GithubSourceCodeLink />
         <ToastContainer limit={5} />
       </div>
     </>