Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update #783

Merged
merged 3 commits into from
Jan 16, 2025
Merged

update #783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da7c05c
accept glb
totegamma Jan 16, 2025
9bc14e2
update themecard
totegamma Jan 16, 2025
90f5aec
update media viewer
totegamma Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Editor/EditorActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export const EditorActions = (props: EditorActionsProps): JSX.Element => {
onChange={(e) => {
onFileInputChange(e)
}}
accept={'image/*, video/*'}
accept={'image/*, video/*, .glb'}
/>
</CCIconButton>
</span>
Expand Down
5 changes: 4 additions & 1 deletion src/components/ThemeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ export const ThemeCard = (props: ThemeCardProps): JSX.Element => {
justifyContent: 'flex-start'
}}
color="info"
onClick={props.onClick}
onClick={(e) => {
props.onClick?.()
e.stopPropagation()
}}
variant="outlined"
>
<Box
Expand Down
21 changes: 20 additions & 1 deletion src/components/ui/EmbeddedGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
import { type WorldMedia } from '../../model'
import { Blurhash } from 'react-blurhash'
import { useGlobalState } from '../../context/GlobalState'
import FullscreenIcon from '@mui/icons-material/Fullscreen'

import poster from '../../resources/view-3dmodel.png'

import '@google/model-viewer'
import { CCIconButton } from './CCIconButton'

export interface EmbeddedGalleryProps {
medias: WorldMedia[]
Expand All @@ -23,6 +25,8 @@ export const MediaCard = ({ media, onExpand }: { media: WorldMedia; onExpand?: (
const imageRef = useRef<HTMLImageElement>(null)
const videoRef = useRef<HTMLVideoElement>(null)

const mediaViewer = useMediaViewer()

const { getImageURL } = useGlobalState()

const setAllowedUrl = (url: string): void => {
Expand Down Expand Up @@ -127,7 +131,8 @@ export const MediaCard = ({ media, onExpand }: { media: WorldMedia; onExpand?: (
}}
sx={{
backgroundCorlor: '#eee',
height: '100%'
height: '100%',
position: 'relative'
}}
>
{showModel ? (
Expand Down Expand Up @@ -155,6 +160,20 @@ export const MediaCard = ({ media, onExpand }: { media: WorldMedia; onExpand?: (
}}
/>
)}

<CCIconButton
sx={{
position: 'absolute',
bottom: 5,
right: 5,
backgroundColor: 'rgba(255, 255, 255, 0.5)'
}}
onClick={(e) => {
mediaViewer.openModel(media.mediaURL)
}}
>
<FullscreenIcon />
</CCIconButton>
</Box>
)}

Expand Down
258 changes: 144 additions & 114 deletions src/context/MediaViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,20 @@ import AppsIcon from '@mui/icons-material/Apps'
import { type WorldMedia } from '../model'
import { useGlobalState } from './GlobalState'

import '@google/model-viewer'

const zoomFactor = 8

export interface MediaViewerState {
openSingle: (src?: string) => void
openMedias: (medias: WorldMedia[], startIndex?: number) => void
openModel: (src?: string) => void
}

const MediaViewerContext = createContext<MediaViewerState>({
openSingle: () => {},
openMedias: () => {}
openMedias: () => {},
openModel: () => {}
})

interface MediaViewerProviderProps {
Expand All @@ -28,6 +32,7 @@ export const MediaViewerProvider = (props: MediaViewerProviderProps): JSX.Elemen
const [previewImage, setPreviewImage] = useState<string | undefined>()
const [previewIndex, setPreviewIndex] = useState<number>(0)
const [medias, setMedias] = useState<WorldMedia[]>([])
const [previewModel, setPreviewModel] = useState<string | undefined>()

const [mode, setMode] = useState<'single' | 'gallery'>('single')

Expand All @@ -45,6 +50,11 @@ export const MediaViewerProvider = (props: MediaViewerProviderProps): JSX.Elemen
setPreviewImage(medias[startIndex ?? 0].mediaURL)
}

const openModel = (src?: string): void => {
setMode('single')
setPreviewModel(src)
}

const padding = isMobileSize ? 20 : 100

const [container, setContainer] = useState<HTMLDivElement | null>(null)
Expand Down Expand Up @@ -114,13 +124,14 @@ export const MediaViewerProvider = (props: MediaViewerProviderProps): JSX.Elemen
const close = (): void => {
setPreviewImage(undefined)
setMedias([])
setPreviewModel(undefined)
}

return (
<MediaViewerContext.Provider value={{ openSingle, openMedias }}>
<MediaViewerContext.Provider value={{ openSingle, openMedias, openModel }}>
{props.children}
<Modal
open={!!previewImage}
open={!!previewImage || !!previewModel}
onClose={close}
sx={{
display: 'flex',
Expand All @@ -132,124 +143,143 @@ export const MediaViewerProvider = (props: MediaViewerProviderProps): JSX.Elemen
>
{mode === 'single' ? (
<>
<Box
flex={1}
position="absolute"
width="100vw"
height="100dvh"
top={0}
left={0}
ref={(el: HTMLDivElement | null) => {
setContainer(el)
}}
onClick={(e) => {
if (e.target !== imageRef.current) {
close()
}
}}
display="flex"
justifyContent="center"
alignItems="center"
>
{imageScale > 0 ? (
<TransformWrapper
initialScale={imageScale}
initialPositionX={centerPosition.x}
initialPositionY={centerPosition.y}
minScale={imageScale}
maxScale={imageScale * zoomFactor}
ref={transformComponentRef}
{previewImage && (
<>
<Box
flex={1}
position="absolute"
width="100vw"
height="100dvh"
top={0}
left={0}
ref={(el: HTMLDivElement | null) => {
setContainer(el)
}}
onClick={(e) => {
if (e.target !== imageRef.current) {
close()
}
}}
display="flex"
justifyContent="center"
alignItems="center"
>
<TransformComponent
wrapperStyle={{
width: '100%',
height: '100%'
}}
>
<img
src={getImageURL(previewImage)}
style={{
pointerEvents: 'auto'
}}
alt="preview"
ref={(el: HTMLImageElement | null) => {
imageRef.current = el
{imageScale > 0 ? (
<TransformWrapper
initialScale={imageScale}
initialPositionX={centerPosition.x}
initialPositionY={centerPosition.y}
minScale={imageScale}
maxScale={imageScale * zoomFactor}
ref={transformComponentRef}
>
<TransformComponent
wrapperStyle={{
width: '100%',
height: '100%'
}}
>
<img
src={getImageURL(previewImage)}
style={{
pointerEvents: 'auto'
}}
alt="preview"
ref={(el: HTMLImageElement | null) => {
imageRef.current = el
}}
/>
</TransformComponent>
</TransformWrapper>
) : (
<CircularProgress
sx={{
color: 'white'
}}
/>
</TransformComponent>
</TransformWrapper>
) : (
<CircularProgress
sx={{
color: 'white'
}}
/>
)}
</Box>
)}
</Box>

{medias.length > 1 && (
<IconButton
disabled={previewIndex === 0}
onClick={() => {
setPreviewIndex(previewIndex - 1)
setPreviewImage(medias[previewIndex - 1].mediaURL)
}}
sx={{
position: 'absolute',
top: '50%',
left: '4px',
transform: 'translateY(-50%)',
zIndex: 1,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.5)'
}
}}
>
<KeyboardArrowLeftIcon />
</IconButton>
)}
{medias.length > 1 && (
<IconButton
disabled={previewIndex === 0}
onClick={() => {
setPreviewIndex(previewIndex - 1)
setPreviewImage(medias[previewIndex - 1].mediaURL)
}}
sx={{
position: 'absolute',
top: '50%',
left: '4px',
transform: 'translateY(-50%)',
zIndex: 1,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.5)'
}
}}
>
<KeyboardArrowLeftIcon />
</IconButton>
)}

{medias.length > 1 && (
<IconButton
disabled={previewIndex === medias.length - 1}
onClick={() => {
setPreviewIndex(previewIndex + 1)
setPreviewImage(medias[previewIndex + 1].mediaURL)
}}
sx={{
position: 'absolute',
top: '50%',
right: '4px',
transform: 'translateY(-50%)',
zIndex: 1,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.5)'
}
}}
>
<KeyboardArrowRightIcon />
</IconButton>
{medias.length > 1 && (
<IconButton
disabled={previewIndex === medias.length - 1}
onClick={() => {
setPreviewIndex(previewIndex + 1)
setPreviewImage(medias[previewIndex + 1].mediaURL)
}}
sx={{
position: 'absolute',
top: '50%',
right: '4px',
transform: 'translateY(-50%)',
zIndex: 1,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.5)'
}
}}
>
<KeyboardArrowRightIcon />
</IconButton>
)}
{medias.length > 1 && (
<IconButton
onClick={() => {
setMode('gallery')
}}
sx={{
position: 'absolute',
top: '3%',
right: '3%',
backgroundColor: 'rgba(255, 255, 255, 0.3)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 5)'
}
}}
>
<AppsIcon />
</IconButton>
)}
</>
)}
{medias.length > 1 && (
<IconButton
onClick={() => {
setMode('gallery')
}}
sx={{
position: 'absolute',
top: '3%',
right: '3%',
backgroundColor: 'rgba(255, 255, 255, 0.3)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 5)'
}
}}
>
<AppsIcon />
</IconButton>

{previewModel && (
<>
<model-viewer
src={previewModel}
camera-controls
style={{
backgroundColor: '#3f3f3f',
width: '90vw',
height: '90vh'
}}
/>
</>
)}

<Box
width="100%"
display="flex"
Expand Down
Loading