From 0f209ef95c319a1ec6641f0cb85836a763271698 Mon Sep 17 00:00:00 2001
From: wangliang <wangliang_workjob@163.com>
Date: Wed, 9 Oct 2024 21:00:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=94=BB=E9=9D=A2=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/all-streams/index.tsx | 38 ++++++++++++++++------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/containers/all-streams/index.tsx b/src/containers/all-streams/index.tsx
index e064fbb3f..90f270597 100644
--- a/src/containers/all-streams/index.tsx
+++ b/src/containers/all-streams/index.tsx
@@ -66,7 +66,7 @@ export const AllStream = observer((
 
 
 //所有的视频流的显示逻辑
-const ALlStreamPlayer = observer(({ stream,haveBoard }: { stream: EduStreamUI,haveBoard:boolean }) => {
+const ALlStreamPlayer = observer(({ stream,haveBoard,visible }: { stream: EduStreamUI,haveBoard:boolean,visible?: boolean; }) => {
     const {
         getters: { isBoardWidgetActive, teacherCameraStream, calibratedTime },
         shareUIStore: { isLandscape },
@@ -186,7 +186,7 @@ const ALlStreamPlayer = observer(({ stream,haveBoard }: { stream: EduStreamUI,ha
             <div className={classNames('placeholder-text',
                 { 'placeholder-text-small': 100 >= (ref.current?.clientHeight ? ref.current?.clientHeight : 100) },
                 { 'placeholder-text-students': !isTeacher }, { 'placeholder-text-teacher': isTeacher })}>{`${first}${last}`}</div>
-            {<TrackPlayer stream={stream} />}
+            {<TrackPlayer stream={stream} visible={visible} />}
             {isLiftHand && <SvgImg
                 className='all-streams-portrait-stream-lift-hand-container'
                 type={SvgIconEnum.HANDS_UP_NEW}
@@ -247,23 +247,29 @@ const GridListShow = observer(({ streamList, columnRowCount = 2, orientationUpTo
         setCurrentPageShowStreamList([...streamList.slice(startIndex, endIndex)])
         //隐藏其他的
         streamList.forEach((item,index)=>{
-            if(index < startIndex || index >= endIndex){
-                visibleStreams.delete(item.stream.streamUuid);
-            }else{
-                visibleStreams.set(item.stream.streamUuid, item.stream);
-            }
+            visibleStreams.set(item.stream.streamUuid, item.stream);
+            // if(index < startIndex || index >= endIndex){
+            //     visibleStreams.delete(item.stream.streamUuid);
+            // }else{
+            //     visibleStreams.set(item.stream.streamUuid, item.stream);
+            // }
         })
         subscribeMass(visibleStreams);
     }
     useEffect(resetShowList, [currentPage, streamList, isLandscape, orientationUpToDown])
     useEffect(() => { resetShowList() }, [])
+    //检测是否显示item
+    const checkShowItem = (stream: EduStreamUI) => {
+        return !!currentPageShowStreamList.find((item) => item.stream.streamUuid === stream.stream.streamUuid)
+    }
+
     return (<div className={isLandscape ? 'all-streams-portrait-container all-streams-portrait-container-landscape' : 'all-streams-portrait-container'} style={{ height: isLandscape ? 'unset' : '100%' }}>
         {
             isLandscape && <>
                 <div className='show-stream' style={{ gridTemplateColumns: `repeat(1, 1fr)`, gridTemplateRows: `repeat(${currentPageShowStreamList?.length},50%)` }}> {
-                    currentPageShowStreamList.map((stream, index) => {
-                        return <div key={index} className="grid-item" style={{ gridColumn: 'span 1' }}>
-                            <ALlStreamPlayer stream={stream} haveBoard={haveBoard}></ALlStreamPlayer>
+                    streamList.map((stream, index) => {
+                        return <div key={index} className="grid-item" style={{ gridColumn: 'span 1',display:checkShowItem(stream) ? 'unset':'none' }}>
+                            <ALlStreamPlayer stream={stream} haveBoard={haveBoard}  visible={checkShowItem(stream)}></ALlStreamPlayer>
                         </div>;
                     })}
                 </div>
@@ -281,9 +287,9 @@ const GridListShow = observer(({ streamList, columnRowCount = 2, orientationUpTo
         {
             !isLandscape && !orientationUpToDown && <>
                 <div className='show-stream' style={{ gridTemplateColumns: `repeat(${columnRowCount}, 1fr)` }}> {
-                    currentPageShowStreamList.map((stream, index) => {
-                        return <div key={index} className="grid-item" style={{ gridRow: 1, gridColumn: `span 1` }}>
-                            <ALlStreamPlayer stream={stream} haveBoard={haveBoard}></ALlStreamPlayer>
+                    streamList.map((stream, index) => {
+                        return <div key={index} className="grid-item" style={{ gridRow: 1, gridColumn: `span 1`,display:checkShowItem(stream) ? 'unset':'none' }}>
+                            <ALlStreamPlayer stream={stream} haveBoard={haveBoard}  visible={checkShowItem(stream)}></ALlStreamPlayer>
                         </div>;
                     })}
                 </div>
@@ -301,10 +307,10 @@ const GridListShow = observer(({ streamList, columnRowCount = 2, orientationUpTo
         {
             !isLandscape && orientationUpToDown && <>
                 <div className='show-stream' style={{ gridTemplateColumns: `repeat(${columnRowCount}, 1fr)` }}> {
-                    currentPageShowStreamList.map((stream, index) => {
+                    streamList.map((stream, index) => {
                         const length = currentPageShowStreamList.length;
-                        return <div key={index} className="grid-item" style={{ gridColumn: (length % columnRowCount !== 0 && index === 0 || length <= columnRowCount) ? `span ${columnRowCount}` : 'span 1' }}>
-                            <ALlStreamPlayer stream={stream} haveBoard={haveBoard}></ALlStreamPlayer>
+                        return <div key={index} className="grid-item" style={{ gridColumn: (length % columnRowCount !== 0 && index === 0 || length <= columnRowCount) ? `span ${columnRowCount}` : 'span 1',display:checkShowItem(stream) ? 'unset':'none' }}>
+                            <ALlStreamPlayer stream={stream} haveBoard={haveBoard}  visible={checkShowItem(stream)}></ALlStreamPlayer>
                         </div>;
                     })}
                 </div>

From 3ade759b102fc4861ee62f59948b68c97c7f707c Mon Sep 17 00:00:00 2001
From: wanglijuan <13139869837@163.com>
Date: Thu, 10 Oct 2024 18:49:26 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E5=A5=96=E5=8A=B1=E5=8A=A8=E7=94=BB=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=80=92=E8=AE=A1=E6=97=B6=E5=8F=AF=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=8F=B3=E8=BE=B9=E7=95=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/all-streams/index.tsx | 20 +++++++++++---------
 src/containers/stream/player.tsx     |  8 ++++----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/containers/all-streams/index.tsx b/src/containers/all-streams/index.tsx
index e064fbb3f..756d6d2e7 100644
--- a/src/containers/all-streams/index.tsx
+++ b/src/containers/all-streams/index.tsx
@@ -10,6 +10,7 @@ import { TrackPlayer } from '../stream/track-player';
 import { SvgIconEnum, SvgImg } from '@classroom/ui-kit';
 import { transI18n } from 'agora-common-libs';
 import { splitName } from '../stream';
+import Award from '../award';
 
 export const AllStream = observer((
     { }: {
@@ -29,7 +30,7 @@ export const AllStream = observer((
             subscribeMass,
             sortStreamList
         },
-        widgetUIStore: { currentWidget,z0Widgets }
+        widgetUIStore: { currentWidget, z0Widgets }
     } = useStore();
     //是否有白板、屏幕共享等widget
     const [haveWidget, setHaveWidget] = useState(false);
@@ -37,7 +38,7 @@ export const AllStream = observer((
     //监听教师流变更
     useEffect(() => {
         setHaveWidget(!!currentWidget && 'easemobIM' !== currentWidget.widgetName)
-        const board = z0Widgets.find((item: { widgetName: string; })=>item.widgetName === 'netlessBoard')
+        const board = z0Widgets.find((item: { widgetName: string; }) => item.widgetName === 'netlessBoard')
         setHaveBoard(board)
     }, [currentWidget]);
 
@@ -66,7 +67,7 @@ export const AllStream = observer((
 
 
 //所有的视频流的显示逻辑
-const ALlStreamPlayer = observer(({ stream,haveBoard }: { stream: EduStreamUI,haveBoard:boolean }) => {
+const ALlStreamPlayer = observer(({ stream, haveBoard }: { stream: EduStreamUI, haveBoard: boolean }) => {
     const {
         getters: { isBoardWidgetActive, teacherCameraStream, calibratedTime },
         shareUIStore: { isLandscape },
@@ -187,6 +188,7 @@ const ALlStreamPlayer = observer(({ stream,haveBoard }: { stream: EduStreamUI,ha
                 { 'placeholder-text-small': 100 >= (ref.current?.clientHeight ? ref.current?.clientHeight : 100) },
                 { 'placeholder-text-students': !isTeacher }, { 'placeholder-text-teacher': isTeacher })}>{`${first}${last}`}</div>
             {<TrackPlayer stream={stream} />}
+            {/* <Award stream={stream} /> */}
             {isLiftHand && <SvgImg
                 className='all-streams-portrait-stream-lift-hand-container'
                 type={SvgIconEnum.HANDS_UP_NEW}
@@ -226,7 +228,7 @@ const GridListShow = observer(({ streamList, columnRowCount = 2, orientationUpTo
     //store参数配置信息
     const {
         shareUIStore: { isLandscape },
-        streamUIStore: {visibleStreams,subscribeMass },
+        streamUIStore: { visibleStreams, subscribeMass },
     } = useStore();
     //当前页码
     const [currentPage, setCurrentPage] = useState<number>(0);
@@ -243,13 +245,13 @@ const GridListShow = observer(({ streamList, columnRowCount = 2, orientationUpTo
         //当前页面显示的流列表
         const startIndex = currentPage ? currentPage * currentPageSize : 0
         const endIndex = Math.min(streamList.length, startIndex + currentPageSize)
-        
+
         setCurrentPageShowStreamList([...streamList.slice(startIndex, endIndex)])
         //隐藏其他的
-        streamList.forEach((item,index)=>{
-            if(index < startIndex || index >= endIndex){
+        streamList.forEach((item, index) => {
+            if (index < startIndex || index >= endIndex) {
                 visibleStreams.delete(item.stream.streamUuid);
-            }else{
+            } else {
                 visibleStreams.set(item.stream.streamUuid, item.stream);
             }
         })
@@ -310,7 +312,7 @@ const GridListShow = observer(({ streamList, columnRowCount = 2, orientationUpTo
                 </div>
 
                 <div className="pagination" style={{ display: 'flex' }}>
-                    {<div className="page-btn left-btn" style={{ display: currentPage > 0 ? 'inline-block' : 'none'}} onClick={() => { setCurrentPage(Math.max(currentPage - 1, 0)) }}>
+                    {<div className="page-btn left-btn" style={{ display: currentPage > 0 ? 'inline-block' : 'none' }} onClick={() => { setCurrentPage(Math.max(currentPage - 1, 0)) }}>
                         <SvgImg colors={{ iconPrimary: '#fff' }} type={SvgIconEnum.ARROW_BACK} size={24} style={{ margin: 'auto', height: '100%', transform: 'rotate(180deg)' }}></SvgImg>
                     </div>}
                     {<div className="page-btn right-btn" style={{ display: currentPage < lastPageIndex - 1 ? 'inline-block' : 'none' }} onClick={() => { setCurrentPage(Math.min(currentPage + 1, lastPageIndex - 1)) }}>
diff --git a/src/containers/stream/player.tsx b/src/containers/stream/player.tsx
index de5a86710..6273b8866 100644
--- a/src/containers/stream/player.tsx
+++ b/src/containers/stream/player.tsx
@@ -88,7 +88,7 @@ export const useMobileStreamDrag = ({
   bounds?: string;
   isPiP: boolean;
   triggerRef: MutableRefObject<HTMLDivElement>;
-  type:string;
+  type: string;
 }) => {
   const [pos, setPos] = useState({ x: 0, y: 0 });
   const touchPosRef = useRef({ x: 0, y: 0 });
@@ -112,7 +112,7 @@ export const useMobileStreamDrag = ({
     boundsRef.current.top = -rect.top;
     boundsRef.current.bottom = (boundsContainer?.clientHeight || 0) - rect.bottom;
     boundsRef.current.left = -rect.left;
-    boundsRef.current.right = (boundsContainer?.clientWidth || 0) - rect.right;
+    boundsRef.current.right = (boundsContainer?.clientWidth || 0) - rect.right - (window.orientation == 0 ? 0 : 75 + 16);
   };
 
   const handleTouchMove = (e: TouchEvent) => {
@@ -193,7 +193,7 @@ export const TeacherStreamContainer = observer(({ stream }: { stream: EduStreamU
   const { pos } = useMobileStreamDrag({
     isPiP,
     triggerRef: ref as MutableRefObject<HTMLDivElement>,
-    type:"teacherView"
+    type: "teacherView"
   });
   const onLandspce = () => {
     setForceLandscape(true);
@@ -296,7 +296,7 @@ export const RoomPlaceholder = observer(() => {
     !isWebViewWidgetActive &&
     !screenShareStream ? (
     !isInGroup ? (
-      <div className="fcr-mobile-room-placeholder" style={{ height: '190px'}}>
+      <div className="fcr-mobile-room-placeholder" style={{ height: '190px' }}>
         <p>
           {transI18n('fcr_copy_room_id')} {EduClassroomConfig.shared.sessionInfo.roomUuid}
         </p>