From 0cbe63bc31add7a41cdfe8c108db07f4f300db96 Mon Sep 17 00:00:00 2001
From: "Specht, David" <DavidSpecht@protonmail.com>
Date: Fri, 15 Apr 2022 19:38:15 +0200
Subject: [PATCH] feat: Default Presentation

added Frontend
---
 ts/Common/Api.ts                       |  3 +-
 ts/Manager/App.scss                    | 38 +++++++++++++++++++-
 ts/Manager/EditRoom.tsx                |  5 +--
 ts/Manager/EditRoomDialog.tsx          | 10 +++++-
 ts/Manager/RoomRow.tsx                 |  2 +-
 ts/Manager/SharedPresentationInput.tsx | 48 ++++++++++++++++++++++++++
 6 files changed, 100 insertions(+), 6 deletions(-)
 create mode 100644 ts/Manager/SharedPresentationInput.tsx

diff --git a/ts/Common/Api.ts b/ts/Common/Api.ts
index 6a2c278..0cac44e 100644
--- a/ts/Common/Api.ts
+++ b/ts/Common/Api.ts
@@ -45,6 +45,8 @@ export interface Room {
 	cleanLayout: boolean,
 	joinMuted: boolean,
 	running: boolean,
+	presentationUserId: string,
+	presentationPath: string | string[]
 }
 
 export interface RoomShare {
@@ -178,7 +180,6 @@ class Api {
 
 	public async updateRoom(room: Room) {
 		const response = await axios.put(this.getUrl(`rooms/${room.id}`), room);
-
 		return response.data;
 	}
 
diff --git a/ts/Manager/App.scss b/ts/Manager/App.scss
index 7b1f295..9b38895 100644
--- a/ts/Manager/App.scss
+++ b/ts/Manager/App.scss
@@ -67,6 +67,42 @@ pre {
   }
 }
 
+.bbb-presentation-input {
+  display: flex;
+  flex-direction: column;
+  height: min-content;
+  width: fit-content;
+  margin-top: 10px;
+  align-content: flex-start;
+
+  .hidden {
+    display: none;
+  }
+
+  p {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    button {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      margin: 5px;
+      border-radius: 50%;
+      line-height: 0;
+      display: inline-block;
+      justify-self: flex-end;
+    }
+  }
+
+  img {
+    margin: 5px;
+    height: 32px;
+    width: auto;
+  }
+}
+
 #bbb-settings {
   #bbb-warning,
   #bbb-success {
@@ -306,4 +342,4 @@ pre {
       border: 5px solid #fff;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ts/Manager/EditRoom.tsx b/ts/Manager/EditRoom.tsx
index 3012a80..736a280 100644
--- a/ts/Manager/EditRoom.tsx
+++ b/ts/Manager/EditRoom.tsx
@@ -6,9 +6,10 @@ type Props = {
 	room: Room;
 	restriction?: Restriction;
 	updateProperty: (key: string, value: string | boolean | number | null) => Promise<void>;
+	updateRoom: (Room) => Promise<void>;
 }
 
-const EditRoom: React.FC<Props> = ({ room, restriction, updateProperty }) => {
+const EditRoom: React.FC<Props> = ({ room, restriction, updateProperty, updateRoom }) => {
 	const [open, setOpen] = useState<boolean>(false);
 
 	return (
@@ -18,7 +19,7 @@ const EditRoom: React.FC<Props> = ({ room, restriction, updateProperty }) => {
 				<span className="icon icon-settings-dark icon-visible"></span>
 			</button>
 
-			<EditRoomDialog room={room} restriction={restriction} updateProperty={updateProperty} open={open} setOpen={setOpen} />
+			<EditRoomDialog room={room} restriction={restriction} updateProperty={updateProperty} updateRoom={updateRoom} open={open} setOpen={setOpen} />
 		</>
 	);
 };
diff --git a/ts/Manager/EditRoomDialog.tsx b/ts/Manager/EditRoomDialog.tsx
index ba0ff44..6b6d3d2 100644
--- a/ts/Manager/EditRoomDialog.tsx
+++ b/ts/Manager/EditRoomDialog.tsx
@@ -6,6 +6,7 @@ import Dialog from './Dialog';
 import ShareWith from './ShareWith';
 import { SubmitInput } from './SubmitInput';
 import { AccessOptions } from '../Common/Translation';
+import SharedPresentationInput from './SharedPresentationInput';
 
 const descriptions: { [key: string]: string } = {
 	name: t('bbb', 'Descriptive name of this room.'),
@@ -29,11 +30,12 @@ type Props = {
 	room: Room;
 	restriction?: Restriction;
 	updateProperty: (key: string, value: string | boolean | number | null) => Promise<void>;
+	updateRoom: (Room) => Promise<void>;
 	open: boolean;
 	setOpen: (open: boolean) => void;
 }
 
-const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, open, setOpen }) => {
+const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, open, setOpen, updateRoom }) => {
 	const [shares, setShares] = useState<RoomShare[]>();
 
 	const maxParticipantsLimit = (restriction?.maxParticipants || 0) < 0 ? undefined : restriction?.maxParticipants;
@@ -226,6 +228,12 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
 					</div>
 					<p><em>{descriptions.joinMuted}</em></p>
 				</div>
+				<div>
+					<div>
+						<label htmlFor={`bbb-presentation-${room.id}`}>{t('bbb', 'Default Presentation')}</label>
+						<SharedPresentationInput id={`bbb-presentation-${room.id}`} room={room} updateRoom={updateRoom}/>
+					</div>
+				</div>
 			</div>
 		</Dialog>
 	);
diff --git a/ts/Manager/RoomRow.tsx b/ts/Manager/RoomRow.tsx
index 40de45b..20b0140 100644
--- a/ts/Manager/RoomRow.tsx
+++ b/ts/Manager/RoomRow.tsx
@@ -223,7 +223,7 @@ const RoomRow: React.FC<Props> = (props) => {
 				</td>
 				<td className="bbb-shrink"><RecordingsNumber recordings={recordings} showRecordings={showRecordings} setShowRecordings={setShowRecordings} /></td>
 				<td className="edit icon-col">
-					<EditRoom room={props.room} restriction={props.restriction} updateProperty={updateRoom} />
+					<EditRoom room={props.room} restriction={props.restriction} updateRoom={props.updateRoom} updateProperty={updateRoom} />
 				</td>
 				<td className="remove icon-col">
 					<button className="action-item" onClick={deleteRow as any} title={t('bbb', 'Delete')}>
diff --git a/ts/Manager/SharedPresentationInput.tsx b/ts/Manager/SharedPresentationInput.tsx
new file mode 100644
index 0000000..3faeb51
--- /dev/null
+++ b/ts/Manager/SharedPresentationInput.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { useState } from "react";
+import { Room } from "../Common/Api";
+
+type Props = {
+    id: string
+    room: Room
+    updateRoom: (Room) => Promise<void>
+}
+
+const SharedPresentationInput: React.FC<Props> = ({ room, updateRoom, id }) => {
+
+	function filepicker() {
+        OC.dialogs.filepicker(t('bbb', 'Default Presentation'), file => {
+            updateRoom({...room, presentationUserId: '', presentationPath: file});
+        },
+        );
+    }
+
+    function removeFile() {
+        updateRoom({...room, presentationUserId: '', presentationPath: ''});
+    }
+
+    function getAvatarUrl(userId) {
+        if (room.presentationUserId === null || room.presentationUserId === undefined) {
+            return ;
+        }
+
+        return (OC.generateUrl('/avatar/' + encodeURIComponent(room.presentationUserId) + '/' + 24, {
+            user: room.presentationUserId,
+            size: 24,
+            requesttoken: OC.requestToken,
+        }))
+    }
+
+    return(
+        <div className="bbb-presentation-input">
+            <input id={id} type="button" value={t('bbb', 'Choose a File')} onClick={filepicker} />
+            <p className={ room.presentationPath === '' ? 'hidden' : ''}>
+                <img src={getAvatarUrl(room.presentationUserId)} alt={room.presentationUserId} className="bbb-avatar" height="100%" />
+                <em>{room.presentationPath}</em>
+                <button onClick={removeFile}><span className="icon icon-close icon-visible"></span></button>
+            </p>
+        </div>
+    );
+};
+
+export default SharedPresentationInput;