removed unused css

src/App.module.scss

@@ -1,7 +1,3 @@
-.imageOpener{
-
-}
-
 .imageOpenerImage{
     display: block;
     margin-left: auto;

src/components/AudioOpener.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { useEffect } from "react"
+import genDownloadLink from "../functions/genDownloadLink"
+import { FileOpenerProps } from "../types/FileOpenerProps"
+
+const AudioOpener: React.FC<FileOpenerProps> = (props) => {
+
+	const audio = React.createRef<HTMLAudioElement>()
+
+	useEffect(()=>{
+		if(audio.current){
+			audio.current.volume = 0.1
+		}
+	},[audio])
+
+	useEffect(()=>{
+		if (!props.active && audio.current){
+			audio.current.pause()
+		}
+	},[props.active])
+
+	return (
+		<div>
+			<audio src={genDownloadLink(props.file.id)} controls ref={audio}></audio>
+		</div>
+	)
+}
+
+export default AudioOpener

src/components/FileOpen.tsx

@@ -4,7 +4,7 @@ import { useGetFileQuery } from "../generated/graphql"
 import ImageOpener from "./ImageOpener"
 import TextOpener from "./TextOpener"
 import Modal from "./Modal"
-import { useState } from "react"
+import AudioOpener from "./AudioOpener"
 
 interface Props {
     id: string
@@ -14,6 +14,10 @@ interface Props {
 
 const FileOpen: React.FC<Props> = (props) => {
 
+	if (!props.id) {
+		return <></>
+	}
+
 	const { data } = useGetFileQuery({
 		variables:{
 			id: props.id
@@ -25,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()
@@ -37,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/style/Modal.module.scss

@@ -18,6 +18,8 @@
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
+    max-height: 99%;
+    overflow: hidden;
 }
 
 .hidden{

src/types/FileOpenerProps.ts

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