Skip to content

Commit 91bc7ad

Browse files
totegammatotegamma
authored
Merge pull request #923 from concrnt/develop
update
2 parents 11fabc2 + c685757 commit 91bc7ad

7 files changed

Lines changed: 655 additions & 62 deletions

File tree

‎app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"jspdf": "^2.5.1",
5151
"mfm-js": "^0.24.0",
5252
"mfm-renderer-react": "^0.0.9",
53+
"music-metadata": "^11.12.1",
5354
"notistack": "^3.0.2",
5455
"protobufjs": "^7.3.2",
5556
"react": "^18.2.0",

‎app/src/App.tsx‎

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { DeckPage } from './pages/Deck'
4545
import { TimelineProvider } from './context/TimelineProvider'
4646
import { InspectorProvider } from './context/Inspector'
4747
import { ProfileProvider } from './context/ProfileContext'
48+
import { AudioPlayerProvider } from './context/AudioPlayer'
4849

4950
const SwitchMasterToSub = lazy(() => import('./components/SwitchMasterToSub'))
5051

@@ -489,46 +490,47 @@ function App(): JSX.Element {
489490
flex: 1
490491
}}
491492
>
492-
<Paper
493-
elevation={isDeckPage ? 0 : 3}
494-
sx={{
495-
flexGrow: '1',
496-
margin: { xs: 0.5, sm: 1 },
497-
mb: { xs: 0, sm: '10px' },
498-
display: 'flex',
499-
flexFlow: 'column',
500-
borderRadius: isDeckPage ? 0 : 2,
501-
overflow: 'hidden',
502-
background: 'none'
503-
}}
504-
>
505-
<Routes>
506-
<Route index element={<ListPage />} />
507-
<Route path="/:id" element={<EntityPage />} />
508-
<Route path="/intent" element={<ListPage />} />
509-
<Route path="/settings/*" element={<Settings />} />
510-
<Route path="/:id/media" element={<EntityPage />} />
511-
<Route path="/:id/activity" element={<EntityPage />} />
512-
<Route path="/:id/profile/:profileid" element={<EntityPage />} />
513-
<Route path="/:id/profile/:profileid/media" element={<EntityPage />} />
514-
<Route path="/:id/profile/:profileid/activity" element={<EntityPage />} />
515-
<Route path="/:authorID/:messageID" element={<MessagePage />} />
516-
<Route path="/timeline/:id" element={<TimelinePage />} />
517-
<Route path="/contacts" element={<ContactsPage />} />
518-
<Route path="/explorer/:tab" element={<ExplorerPlusPage />} />
519-
<Route path="/classicexplorer/:tab" element={<Explorer />} />
520-
<Route
521-
path="/notifications"
522-
element={<Notifications latestNotification={latestNotificationDate} />}
523-
/>
524-
<Route path="/ap/:id" element={<ApUserPage />} />
525-
<Route path="/devtool" element={<Devtool />} />
526-
<Route path="/subscriptions" element={<ManageSubsPage />} />
527-
<Route path="/concord/*" element={<ConcordPage />} />
528-
<Route path="/tutorial" element={<Tutorial />} />
529-
<Route path="/deck" element={<DeckPage />} />
530-
</Routes>
531-
</Paper>
493+
<AudioPlayerProvider>
494+
<Paper
495+
elevation={isDeckPage ? 0 : 3}
496+
sx={{
497+
flexGrow: '1',
498+
margin: { xs: 0.5, sm: 1 },
499+
display: 'flex',
500+
flexFlow: 'column',
501+
borderRadius: isDeckPage ? 0 : 2,
502+
overflow: 'hidden',
503+
background: 'none'
504+
}}
505+
>
506+
<Routes>
507+
<Route index element={<ListPage />} />
508+
<Route path="/:id" element={<EntityPage />} />
509+
<Route path="/intent" element={<ListPage />} />
510+
<Route path="/settings/*" element={<Settings />} />
511+
<Route path="/:id/media" element={<EntityPage />} />
512+
<Route path="/:id/activity" element={<EntityPage />} />
513+
<Route path="/:id/profile/:profileid" element={<EntityPage />} />
514+
<Route path="/:id/profile/:profileid/media" element={<EntityPage />} />
515+
<Route path="/:id/profile/:profileid/activity" element={<EntityPage />} />
516+
<Route path="/:authorID/:messageID" element={<MessagePage />} />
517+
<Route path="/timeline/:id" element={<TimelinePage />} />
518+
<Route path="/contacts" element={<ContactsPage />} />
519+
<Route path="/explorer/:tab" element={<ExplorerPlusPage />} />
520+
<Route path="/classicexplorer/:tab" element={<Explorer />} />
521+
<Route
522+
path="/notifications"
523+
element={<Notifications latestNotification={latestNotificationDate} />}
524+
/>
525+
<Route path="/ap/:id" element={<ApUserPage />} />
526+
<Route path="/devtool" element={<Devtool />} />
527+
<Route path="/subscriptions" element={<ManageSubsPage />} />
528+
<Route path="/concord/*" element={<ConcordPage />} />
529+
<Route path="/tutorial" element={<Tutorial />} />
530+
<Route path="/deck" element={<DeckPage />} />
531+
</Routes>
532+
</Paper>
533+
</AudioPlayerProvider>
532534
<Box
533535
sx={{
534536
display: {

‎app/src/components/ui/EmbeddedGallery.tsx‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,15 @@ import { type WorldMedia } from '../../model'
1010
import { Blurhash } from 'react-blurhash'
1111
import { useGlobalState } from '../../context/GlobalState'
1212
import FullscreenIcon from '@mui/icons-material/Fullscreen'
13+
import PlayCircleIcon from '@mui/icons-material/PlayCircle'
14+
import StopCircleIcon from '@mui/icons-material/StopCircle'
1315

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

1618
import { CCIconButton } from './CCIconButton'
1719
import { useTranslation } from 'react-i18next'
1820
import { ModelViewer } from '../ModelViewer'
21+
import { useAudioPlayer } from '../../context/AudioPlayer'
1922

2023
export interface EmbeddedGalleryProps {
2124
medias: WorldMedia[]
@@ -29,6 +32,7 @@ export const MediaCard = ({ media, onExpand }: { media: WorldMedia; onExpand?: (
2932
const mediaViewer = useMediaViewer()
3033

3134
const { getImageURL } = useGlobalState()
35+
const { play, stop, nowPlaying } = useAudioPlayer()
3236

3337
const setAllowedUrl = (url: string): void => {
3438
const key = 'reveal:' + url
@@ -117,16 +121,38 @@ export const MediaCard = ({ media, onExpand }: { media: WorldMedia; onExpand?: (
117121
height: '100%',
118122
overflow: 'hidden'
119123
}}
124+
onClick={(e) => {
125+
e.stopPropagation()
126+
if (nowPlaying === media.mediaURL) {
127+
stop()
128+
} else {
129+
play(media.mediaURL)
130+
}
131+
}}
120132
>
121-
<audio
122-
controls
123-
src={media.mediaURL}
124-
preload="metadata"
125-
style={{
126-
width: '100%',
127-
height: '100%'
128-
}}
129-
/>
133+
{nowPlaying === media.mediaURL ? (
134+
<StopCircleIcon
135+
sx={{
136+
position: 'absolute',
137+
top: '50%',
138+
left: '50%',
139+
transform: 'translate(-50%, -50%)',
140+
color: 'rgba(255, 255, 255, 0.8)',
141+
fontSize: 48
142+
}}
143+
/>
144+
) : (
145+
<PlayCircleIcon
146+
sx={{
147+
position: 'absolute',
148+
top: '50%',
149+
left: '50%',
150+
transform: 'translate(-50%, -50%)',
151+
color: 'rgba(255, 255, 255, 0.8)',
152+
fontSize: 48
153+
}}
154+
/>
155+
)}
130156
</Box>
131157
)}
132158

0 commit comments

Comments
 (0)