thumbnails

src/components/navigator/views/search-result/NavigatorSearchResultItemView.tsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent } from 'react';
 import { CreateRoomSession, GetSessionDataManager, TryVisitRoom } from '../../../../api';
-import { Flex, LayoutGridItemProps, Text } from '../../../../common';
+import { Flex, LayoutBadgeImageView, LayoutGridItemProps, LayoutRoomThumbnailView, Text } from '../../../../common';
 import { UpdateDoorStateEvent } from '../../../../events';
 import { DispatchUiEvent } from '../../../../hooks';
 import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemInfoView';
@@ -10,11 +10,12 @@ import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemIn
 export interface NavigatorSearchResultItemViewProps extends LayoutGridItemProps
 {
     roomData: RoomDataParser
+    thumbnail?: boolean
 }
 
 export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props =>
 {
-    const { roomData = null, children = null, ...rest } = props;
+    const { roomData = null, children = null, thumbnail = false, ...rest } = props;
 
     function getUserCounterColor(): string
     {
@@ -69,6 +70,29 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
         CreateRoomSession(roomData.roomId);
     }
 
+    if(thumbnail) return (
+        <Flex pointer overflow="hidden" column={ true } alignItems="center" onClick={visitRoom} gap={2} className="navigator-item p-2 bg-muted rounded-3 small mx-1 mb-1 flex-column" {...rest}>
+            <LayoutRoomThumbnailView roomId={roomData.roomId} customUrl={roomData.officialRoomPicRef} className="d-flex flex-column align-items-center justify-content-end w-100">
+                <LayoutBadgeImageView badgeCode={roomData.groupBadgeCode} isGroup={true} className={ 'position-absolute top-0 start-0 m-1' } />
+                <Flex center className={ 'badge p-1 position-absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
+                    <FontAwesomeIcon icon="user" />
+                    { roomData.userCount }
+                </Flex>
+                { (roomData.doorMode !== RoomDataParser.OPEN_STATE) && 
+                        <i className={ ('position-absolute end-0 mb-1 me-1 icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
+            </LayoutRoomThumbnailView>
+            <Flex className='w-100'>
+                <Text truncate className="flex-grow-1">{roomData.roomName}</Text>
+                <Flex reverse alignItems="center" gap={ 1 }>
+                    <NavigatorSearchResultItemInfoView roomData={ roomData } />
+                    { roomData.habboGroupId > 0 && <i className="icon icon-navigator-room-group" /> }
+                </Flex>
+                { children } 
+            </Flex>
+
+        </Flex>
+    );
+
     return (
         <Flex pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 2 } className="navigator-item px-2 py-1 small" { ...rest }>
             <Flex center className={ 'badge p-1 ' + getUserCounterColor() } gap={ 1 }>

src/components/navigator/views/search-result/NavigatorSearchResultView.tsx

@@ -2,22 +2,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavigatorSearchResultList } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { AutoGrid, AutoGridProps } from '../../../../common';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
-import { Grid } from '../../../../common/Grid';
 import { Text } from '../../../../common/Text';
 import { BatchUpdates } from '../../../../hooks';
 import { NavigatorSearchResultViewDisplayMode } from '../../common/NavigatorSearchResultViewDisplayMode';
 import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView';
 
-export interface NavigatorSearchResultViewProps
+export interface NavigatorSearchResultViewProps extends AutoGridProps
 {
     searchResult: NavigatorSearchResultList;
 }
 
 export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = props =>
 {
-    const { searchResult = null } = props;
+    const { searchResult = null, ...rest } = props;
 
     const [ isExtended, setIsExtended ] = useState(true);
     const [ displayMode, setDisplayMode ] = useState<number>(0);
@@ -52,7 +52,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
             //setIsExtended(searchResult.closed);
             setDisplayMode(searchResult.mode);
         });
-    }, [ searchResult ]);
+    }, [ searchResult,props ]);
 
     const gridHasTwoColumns = (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS);
     
@@ -64,11 +64,16 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
                     <Text>{ LocalizeText(getResultTitle()) }</Text>
                 </Flex>
                 <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'th' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'bars' : null) } className="text-secondary" onClick={ toggleDisplayMode } />
-            </Flex>
+            </Flex> {isExtended && 
-            { isExtended &&
+                <>
-                <Grid columnCount={ (gridHasTwoColumns ? 2 : 1) } className={ 'navigator-grid' + (gridHasTwoColumns ? ' two-columns' : '') } gap={ 0 }>
+                {
+                    gridHasTwoColumns ? <AutoGrid columnCount={3} {...rest} columnMinWidth={110} columnMinHeight={130}>
+                        {searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={index} roomData={room} thumbnail={ true } />) }
+                        </AutoGrid> : <>
                     { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={index} roomData={room} />) }
-            </Grid> }
+            </> }
+                </>
+            }
         </Column>
         // <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
         //     <div className="d-flex flex-column">