From 2d393f9f70d5b69aced18804c2790055a2bf8e0d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sat, 1 Feb 2025 15:05:55 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20controls=20for=20fu?=
 =?UTF-8?q?ll=20screen=20screenshare?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Requested by several users.
Inspired by Jitsi.

Yet imperfect implementation. Controls on video element of
a screenshare should be disabled.
---
 .../components/ParticipantTileFocus.tsx       | 46 +++++++++++++++++--
 src/frontend/src/locales/de/rooms.json        |  3 +-
 src/frontend/src/locales/en/rooms.json        |  3 +-
 src/frontend/src/locales/fr/rooms.json        |  3 +-
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
index ca9fafd9..9132e5a9 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
@@ -2,6 +2,7 @@ import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import {
+  RiFullscreenLine,
   RiImageCircleAiFill,
   RiMicLine,
   RiMicOffLine,
@@ -15,11 +16,39 @@ import {
 import { useTranslation } from 'react-i18next'
 import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { useEffect, useState } from 'react'
-import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { useSidePanel } from '../hooks/useSidePanel'
+import { useFullScreen } from '../hooks/useFullScreen'
 import { Participant, Track } from 'livekit-client'
 import { MuteAlertDialog } from './MuteAlertDialog'
 import { useMuteParticipant } from '../api/muteParticipant'
 
+const ZoomButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
+    trackRef,
+  })
+
+  if (!isFullscreenAvailable) {
+    return
+  }
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={t('fullScreen')}
+      onPress={() => toggleFullScreen()}
+    >
+      <RiFullscreenLine />
+    </Button>
+  )
+}
+
 const FocusButton = ({
   trackRef,
 }: {
@@ -118,6 +147,9 @@ export const ParticipantTileFocus = ({
 
   const participant = trackRef.participant
 
+  const isScreenShare = trackRef.source == Track.Source.ScreenShare
+  const isLocal = trackRef.participant.isLocal
+
   return (
     <div
       className={css({
@@ -157,10 +189,16 @@ export const ParticipantTileFocus = ({
             })}
           >
             <FocusButton trackRef={trackRef} />
-            {participant.isLocal ? (
-              <EffectsButton />
+            {!isScreenShare ? (
+              <>
+                {participant.isLocal ? (
+                  <EffectsButton />
+                ) : (
+                  <MuteButton participant={participant} />
+                )}
+              </>
             ) : (
-              <MuteButton participant={participant} />
+              !isLocal && <ZoomButton trackRef={trackRef} />
             )}
           </HStack>
         </div>
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 426f160b..675e7959 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -197,6 +197,7 @@
       "disable": ""
     },
     "effects": "",
-    "muteParticipant": ""
+    "muteParticipant": "",
+    "fullScreen": ""
   }
 }
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index a7b19713..e250336a 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -196,6 +196,7 @@
       "disable": "Unpin"
     },
     "effects": "Apply visual effects",
-    "muteParticipant": "Mute {{name}}"
+    "muteParticipant": "Mute {{name}}",
+    "fullScreen": "Full screen"
   }
 }
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 577e2a51..80434bf2 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -196,6 +196,7 @@
       "disable": "Annuler l'épinglage"
     },
     "effects": "Appliquer des effets",
-    "muteParticipant": "Couper le micro de {{name}}"
+    "muteParticipant": "Couper le micro de {{name}}",
+    "fullScreen": "Plein écran"
   }
 }