FileOpenerProps

src/components/AudioOpener.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { useEffect } from "react"
+import genDownloadLink from "../functions/genDownloadLink"
+import { FileOpenerProps } from "../types/FileOpenerProps"
+
+const AudioOpener: React.FC<FileOpenerProps> = (props) => {
+
+	let audio: HTMLAudioElement
+
+	useEffect(()=>{
+		if (audio){
+			audio.pause()
+			audio.remove()
+		}
+
+		audio = new Audio(genDownloadLink(props.file.id))
+		audio.volume = 0.1
+	},[props.file])
+
+	useEffect(()=>{
+		if(!props.active){
+			audio.pause
+			console.debug("Pause")
+		}
+		console.debug("active",props.active)
+	},[props.active])
+
+	return (
+		<div>
+			<button onClick={()=>{
+				if (audio){
+					(audio.paused && audio.play()) || audio.pause()
+				}
+			}}>
+				Play/Pause
+			</button>
+		</div>
+	)
+}
+
+export default AudioOpener

src/components/FileOpen.tsx

@@ -4,6 +4,7 @@ import { useGetFileQuery } from "../generated/graphql"
 import ImageOpener from "./ImageOpener"
 import TextOpener from "./TextOpener"
 import Modal from "./Modal"
+import AudioOpener from "./AudioOpener"
 
 interface Props {
     id: string
@@ -28,9 +29,9 @@ const FileOpen: React.FC<Props> = (props) => {
 	if(data?.file != null){
 		// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 		if (data.file.contentType?.startsWith("image/")){
-			opener = <ImageOpener file={data?.file} />
+			opener = <ImageOpener file={data?.file} active={props.show} />
 		}else if (data.file.contentType?.startsWith("text/")){
-			opener = <TextOpener file={data.file} />
+			opener = <TextOpener file={data.file} active={props.show} />
 		}else{
 			// Get Opener bases on file extension
 			const ext = data.file.name?.split(".").pop()
@@ -40,14 +41,17 @@ const FileOpen: React.FC<Props> = (props) => {
 			case "jpeg":
 			case "gif":
 				// TODO: more ext
-				opener = <ImageOpener file={data.file} />
+				opener = <ImageOpener file={data.file} active={props.show} />
 				break
 			case "txt":
 			case "md":
-				opener = <TextOpener file={data.file} />
+				opener = <TextOpener file={data.file} active={props.show} />
+				break
+			case "mp3":
+				opener = <AudioOpener file={data.file} active={props.show} />
 				break
 			default:
-				opener = <ImageOpener file={data?.file} />
+				opener = <ImageOpener file={data?.file} active={props.show} />
 				break
 			}
 		}

src/components/ImageOpener.tsx

@@ -1,18 +1,12 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { File } from "../generated/graphql"
 import genDownloadLink from "../functions/genDownloadLink"
 import style from "./../App.module.scss"
+import { FileOpenerProps } from "../types/FileOpenerProps"
 
-interface Props {
+const ImageOpener: React.FC<FileOpenerProps> = (props) => {
-    file: File
-}
-
-const ImageOpener: React.FC<Props> = (props) => {
 	return (
-		<div className={style.imageOpener}>
+		<img className={`img-responsive img-fit-cover ${style.imageOpenerImage}`} src={genDownloadLink(props.file.id)}/>
-			<img className={`img-responsive img-fit-contain ${style.imageOpenerImage}`} src={genDownloadLink(props.file.id)}/>
-		</div>
 	)
 }
 

src/components/TextOpener.tsx

@@ -1,12 +1,8 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { File } from "../generated/graphql"
+import { FileOpenerProps } from "../types/FileOpenerProps"
 
-interface Props {
+const TextOpener: React.FC<FileOpenerProps> = (props) => {
-    file: File
-}
-
-const TextOpener: React.FC<Props> = (props) => {
 	return (
 		<div>
 			<textarea>

src/types/FileOpenerProps.ts

@@ -0,0 +1,6 @@
+import { File } from "../generated/graphql"
+
+export interface FileOpenerProps{
+    file: File
+    active: boolean
+}