media-viewer: Updated audio player

Author: Prozilla

demo/public/assets/audio/Andrew-Applepie_Im-So.ogg

@@ -11,38 +11,9 @@
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
-}  
-
-.AudioViewer {
-	width: 70%;
-	margin: 0.5rem auto 0;
-}
-
-.AudioViewer .AudioControls {
-	margin-top: 20px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.AudioControls button {
-	margin: 1rem;
-	padding: 0.5rem 0;
-	width: 20%;
-	border-radius: var(--border-radius-1);
-}
-
-.AudioControls > .Playing {
-	background-color: var(--purple-0);
-	color: var(--white-0);
-}
-
-.AudioControls > :not(.Playing) {
-	background-color: var(--red-0);
-	color: var(--white-0);
 }
 
-.VideoViewer {
+.VideoViewer, .AudioViewer {
 	display: flex;
 	flex-direction: column;
 	align-items: center;

demo/public/assets/audio/Andrew-Applepie_Run-Part-2.ogg

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef } from "react";
 import styles from "./MediaViewer.module.css";
 import { AppsConfig, IMAGE_EXTENSIONS, VIDEO_EXTENSIONS, AUDIO_EXTENSIONS, useSystemManager, useWindowsManager, VirtualFile, WindowProps, MEDIA_EXTENSIONS } from "@prozilla-os/core";
 
@@ -9,7 +9,6 @@ export interface MediaViewerProps extends WindowProps {
 export function MediaViewer({ file, close, setTitle }: MediaViewerProps) {
 	const { appsConfig } = useSystemManager();
 	const windowsManager = useWindowsManager();
-	const [isPlaying, setIsPlaying] = useState(false);
 	const audioRef = useRef<HTMLAudioElement | null>(null);
 	const videoRef = useRef<HTMLVideoElement | null>(null);
 
@@ -26,15 +25,13 @@ export function MediaViewer({ file, close, setTitle }: MediaViewerProps) {
 			if (audioRef.current) {
 				audioRef.current.src = file.source;
 				void audioRef.current.play();
-				setIsPlaying(true);
 			}
 		}
 
 		if (file.extension && VIDEO_EXTENSIONS.includes(file.extension)) {
 			if (videoRef.current) {
 				videoRef.current.src = file.source;
 				void videoRef.current.play();
-				setIsPlaying(true);
 			}
 		}
 
@@ -50,38 +47,6 @@ export function MediaViewer({ file, close, setTitle }: MediaViewerProps) {
 		};
 	}, [file]);
 
-	const handlePlay = () => {
-		if (audioRef.current) {
-			void audioRef.current.play();
-		}
-		if (videoRef.current) {
-			void videoRef.current.play();
-		}
-		setIsPlaying(true);
-	};
-
-	const handlePause = () => {
-		if (audioRef.current) {
-			audioRef.current.pause();
-		}
-		if (videoRef.current) {
-			videoRef.current.pause();
-		}
-		setIsPlaying(false);
-	};
-
-	const handleStop = () => {
-		if (audioRef.current) {
-			audioRef.current.pause();
-			audioRef.current.currentTime = 0;
-		}
-		if (videoRef.current) {
-			videoRef.current.pause();
-			videoRef.current.currentTime = 0;
-		}
-		setIsPlaying(false);
-	};
-
 	if (file == null) {
 		const fileExplorerApp = appsConfig.getAppByRole(AppsConfig.APP_ROLES.fileExplorer);
 
@@ -106,19 +71,10 @@ export function MediaViewer({ file, close, setTitle }: MediaViewerProps) {
 		</div>;
 	} else if (AUDIO_EXTENSIONS.includes(file.extension)) {
 		return <div className={styles.AudioViewer}>
-			<h3>Playing audio: {file.id}</h3>
-			<audio ref={audioRef} controls/>
-			<div className={styles.AudioControls}>
-				<button className={isPlaying ? styles.Playing : ""} onClick={handlePlay} disabled={isPlaying}>
-					Play
-				</button>
-				<button className={isPlaying ? styles.Playing : ""} onClick={handlePause} disabled={!isPlaying}>
-					Pause	
-				</button>
-				<button className={isPlaying ? styles.Playing : ""} onClick={handleStop}>
-					Stop
-				</button>
-			</div>
+			<audio ref={audioRef} controls>
+				<source src={file.source} type={`video/${file.extension}`}/>
+				Your browser does not support audio.
+			</audio> 
 		</div>;
 	} else if (VIDEO_EXTENSIONS.includes(file.extension)) {
 		if (file.extension === "yt") {

packages/apps/media-viewer/src/components/MediaViewer.module.css

@@ -121,11 +121,11 @@ export function loadDefaultData(systemManager: SystemManager, virtualRoot: Virtu
 
 			userFolder.createFolder("Audio", (folder) => {
 				folder.setIconUrl(skin.folderIcons.audio ?? skin.folderIcons.generic)
-					.createFile("Assasins Creed Rogue Theme", "mp3", (file) => {
-						file.setSource("https://vgmsite.com/soundtracks/assassin-s-creed-rogue-original-game-soundtrack/rgvmdtdtyv/01.%20Assassin%27s%20Creed%20Rogue%20Main%20Theme.mp3");
+					.createFile("Andrew-Applepie_Im-So", "ogg", (file) => {
+						file.setSource("/assets/audio/Andrew-Applepie_Im-So.ogg");
 					})
-					.createFile("Mortal Kombat theme", "mp3", (file) => {
-						file.setSource("https://kappa.vgmsite.com/soundtracks/mortal-kombat-vscdt-1487-1993/posqvhcduj/01.%20TECHNO-SYNDROME%207%27%27%20MIX.mp3");
+					.createFile("Andrew-Applepie_Run-Part-2", "ogg", (file) => {
+						file.setSource("/assets/audio/Andrew-Applepie_Run-Part-2.ogg");
 					});
 			});