From 5a31062b21cf6f16fb5c55d985717acfdf43b5e9 Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Sun, 1 Aug 2021 12:59:54 +0200
Subject: [PATCH] FileOpenerProps

---
 src/components/AudioOpener.tsx | 41 ++++++++++++++++++++++++++++++++++
 src/components/FileOpen.tsx    | 14 +++++++-----
 src/components/ImageOpener.tsx | 12 +++-------
 src/components/TextOpener.tsx  |  8 ++-----
 src/types/FileOpenerProps.ts   |  6 +++++
 5 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 src/components/AudioOpener.tsx
 create mode 100644 src/types/FileOpenerProps.ts

diff --git a/src/components/AudioOpener.tsx b/src/components/AudioOpener.tsx
new file mode 100644
index 0000000..d6fc436
--- /dev/null
+++ b/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
diff --git a/src/components/FileOpen.tsx b/src/components/FileOpen.tsx
index 60b6a84..0f9c420 100644
--- a/src/components/FileOpen.tsx
+++ b/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
 			}
 		}
diff --git a/src/components/ImageOpener.tsx b/src/components/ImageOpener.tsx
index d22dcf1..38bdb4d 100644
--- a/src/components/ImageOpener.tsx
+++ b/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 {
-    file: File
-}
-
-const ImageOpener: React.FC<Props> = (props) => {
+const ImageOpener: React.FC<FileOpenerProps> = (props) => {
 	return (
-		<div className={style.imageOpener}>
-			<img className={`img-responsive img-fit-contain ${style.imageOpenerImage}`} src={genDownloadLink(props.file.id)}/>
-		</div>
+		<img className={`img-responsive img-fit-cover ${style.imageOpenerImage}`} src={genDownloadLink(props.file.id)}/>
 	)
 }
 
diff --git a/src/components/TextOpener.tsx b/src/components/TextOpener.tsx
index 7a5f76a..cd73130 100644
--- a/src/components/TextOpener.tsx
+++ b/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 {
-    file: File
-}
-
-const TextOpener: React.FC<Props> = (props) => {
+const TextOpener: React.FC<FileOpenerProps> = (props) => {
 	return (
 		<div>
 			<textarea>
diff --git a/src/types/FileOpenerProps.ts b/src/types/FileOpenerProps.ts
new file mode 100644
index 0000000..1cf6e33
--- /dev/null
+++ b/src/types/FileOpenerProps.ts
@@ -0,0 +1,6 @@
+import { File } from "../generated/graphql"
+
+export interface FileOpenerProps{
+    file: File
+    active: boolean
+}
\ No newline at end of file