mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 18:00:47 +00:00
replace media chrome with vidstack
This commit is contained in:
reya
parent
8795923443
commit
7efc35f622
@ -60,13 +60,13 @@
|
||||
"@tiptap/react": "^2.1.13",
|
||||
"@tiptap/starter-kit": "^2.1.13",
|
||||
"@tiptap/suggestion": "^2.1.13",
|
||||
"@vidstack/react": "^1.8.3",
|
||||
"dayjs": "^1.11.10",
|
||||
"framer-motion": "^10.16.12",
|
||||
"html-to-text": "^9.0.5",
|
||||
"light-bolt11-decoder": "^3.0.0",
|
||||
"lru-cache": "^10.1.0",
|
||||
"markdown-to-jsx": "^7.3.2",
|
||||
"media-chrome": "^1.5.4",
|
||||
"minidenticons": "^4.2.0",
|
||||
"nanoid": "^5.0.4",
|
||||
"nostr-fetch": "^0.13.1",
|
||||
|
||||
@ -131,6 +131,9 @@ dependencies:
|
||||
'@tiptap/suggestion':
|
||||
specifier: ^2.1.13
|
||||
version: 2.1.13(@tiptap/core@2.1.13)(@tiptap/pm@2.1.13)
|
||||
'@vidstack/react':
|
||||
specifier: ^1.8.3
|
||||
version: 1.8.3(@types/react@18.2.41)(react@18.2.0)
|
||||
dayjs:
|
||||
specifier: ^1.11.10
|
||||
version: 1.11.10
|
||||
@ -149,9 +152,6 @@ dependencies:
|
||||
markdown-to-jsx:
|
||||
specifier: ^7.3.2
|
||||
version: 7.3.2(react@18.2.0)
|
||||
media-chrome:
|
||||
specifier: ^1.5.4
|
||||
version: 1.5.4
|
||||
minidenticons:
|
||||
specifier: ^4.2.0
|
||||
version: 4.2.0
|
||||
@ -2979,6 +2979,18 @@ packages:
|
||||
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
|
||||
dev: true
|
||||
|
||||
/@vidstack/react@1.8.3(@types/react@18.2.41)(react@18.2.0):
|
||||
resolution: {integrity: sha512-QCyHy6e3LpzfajtjrhJPXzGYbBrBCUE5qYAatKXX+nxWqRvspa0fJPlnGeWb+tg6DlDsgwDLFjGNWj8qUeUVXQ==}
|
||||
engines: {node: '>=18'}
|
||||
peerDependencies:
|
||||
'@types/react': ^18.0.0
|
||||
react: ^18.0.0
|
||||
dependencies:
|
||||
'@types/react': 18.2.41
|
||||
media-captions: 1.0.2
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@vitejs/plugin-react-swc@3.5.0(vite@4.5.0):
|
||||
resolution: {integrity: sha512-1PrOvAaDpqlCV+Up8RkAh9qaiUjoDUcjtttyhXDKw53XA6Ve16SOp6cCOpRs8Dj8DqUQs6eTW5YkLcLJjrXAig==}
|
||||
peerDependencies:
|
||||
@ -4780,8 +4792,9 @@ packages:
|
||||
resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
|
||||
dev: false
|
||||
|
||||
/media-chrome@1.5.4:
|
||||
resolution: {integrity: sha512-BKWxw21Y6WZX4WX5WfwtmyMlnCKf4IrVbG7n5dWbQQew1ZFtKEUjR0xYqKDqOi1fkZkP3T2j2+MCRNuRB5YT+A==}
|
||||
/media-captions@1.0.2:
|
||||
resolution: {integrity: sha512-QxAFc+XTGZeMx+ZvLtMxEDgAjd0kr1LJ2NekLr1cw/UKENOxK7B9g6HwtuTQzCXxmb4Dknd4T8M7FOqqCK9buA==}
|
||||
engines: {node: '>=16'}
|
||||
dev: false
|
||||
|
||||
/merge-stream@2.0.0:
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
/* @import 'reactflow/dist/style.css'; */
|
||||
|
||||
/* Vidstack */
|
||||
@import '@vidstack/react/player/styles/default/theme.css';
|
||||
@import '@vidstack/react/player/styles/default/layouts/video.css';
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { downloadDir } from '@tauri-apps/api/path';
|
||||
import { download } from '@tauri-apps/plugin-upload';
|
||||
import { MediaPlayer, MediaProvider } from '@vidstack/react';
|
||||
import {
|
||||
MediaControlBar,
|
||||
MediaController,
|
||||
MediaFullscreenButton,
|
||||
MediaMuteButton,
|
||||
MediaPlayButton,
|
||||
MediaTimeRange,
|
||||
} from 'media-chrome/dist/react';
|
||||
DefaultVideoLayout,
|
||||
defaultLayoutIcons,
|
||||
} from '@vidstack/react/player/layouts/default';
|
||||
import { memo } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
@ -32,7 +29,7 @@ export function FileNote({ event }: { event: NDKEvent }) {
|
||||
switch (type) {
|
||||
case 'image':
|
||||
return (
|
||||
<div key={url} className="group relative">
|
||||
<div className="group relative">
|
||||
<img
|
||||
src={url}
|
||||
alt={url}
|
||||
@ -52,18 +49,15 @@ export function FileNote({ event }: { event: NDKEvent }) {
|
||||
);
|
||||
case 'video':
|
||||
return (
|
||||
<MediaController
|
||||
key={url}
|
||||
className="aspect-video w-full overflow-hidden rounded-lg"
|
||||
<MediaPlayer
|
||||
src={url}
|
||||
className="w-full overflow-hidden rounded-lg"
|
||||
aspectRatio="16/9"
|
||||
load="visible"
|
||||
>
|
||||
<video slot="media" src={url} preload="metadata" muted />
|
||||
<MediaControlBar>
|
||||
<MediaPlayButton></MediaPlayButton>
|
||||
<MediaTimeRange></MediaTimeRange>
|
||||
<MediaMuteButton></MediaMuteButton>
|
||||
<MediaFullscreenButton></MediaFullscreenButton>
|
||||
</MediaControlBar>
|
||||
</MediaController>
|
||||
<MediaProvider />
|
||||
<DefaultVideoLayout icons={defaultLayoutIcons} />
|
||||
</MediaPlayer>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
import { NDKTag } from '@nostr-dev-kit/ndk';
|
||||
import { downloadDir } from '@tauri-apps/api/path';
|
||||
import { download } from '@tauri-apps/plugin-upload';
|
||||
import { MediaPlayer, MediaProvider } from '@vidstack/react';
|
||||
import {
|
||||
MediaControlBar,
|
||||
MediaController,
|
||||
MediaFullscreenButton,
|
||||
MediaMuteButton,
|
||||
MediaPlayButton,
|
||||
MediaTimeRange,
|
||||
} from 'media-chrome/dist/react';
|
||||
DefaultVideoLayout,
|
||||
defaultLayoutIcons,
|
||||
} from '@vidstack/react/player/layouts/default';
|
||||
import { memo } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
@ -50,18 +47,15 @@ export function FileKind({ tags }: { tags: NDKTag[] }) {
|
||||
|
||||
if (type === 'video') {
|
||||
return (
|
||||
<MediaController
|
||||
key={url}
|
||||
className="aspect-video w-full overflow-hidden rounded-lg"
|
||||
<MediaPlayer
|
||||
src={url}
|
||||
className="w-full overflow-hidden rounded-lg"
|
||||
aspectRatio="16/9"
|
||||
load="visible"
|
||||
>
|
||||
<video slot="media" src={url} preload="metadata" muted />
|
||||
<MediaControlBar>
|
||||
<MediaPlayButton></MediaPlayButton>
|
||||
<MediaTimeRange></MediaTimeRange>
|
||||
<MediaMuteButton></MediaMuteButton>
|
||||
<MediaFullscreenButton></MediaFullscreenButton>
|
||||
</MediaControlBar>
|
||||
</MediaController>
|
||||
<MediaProvider />
|
||||
<DefaultVideoLayout icons={defaultLayoutIcons} />
|
||||
</MediaPlayer>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,27 +1,19 @@
|
||||
import { MediaPlayer, MediaProvider } from '@vidstack/react';
|
||||
import {
|
||||
MediaControlBar,
|
||||
MediaController,
|
||||
MediaFullscreenButton,
|
||||
MediaLoadingIndicator,
|
||||
MediaMuteButton,
|
||||
MediaPlayButton,
|
||||
MediaTimeRange,
|
||||
} from 'media-chrome/dist/react';
|
||||
DefaultVideoLayout,
|
||||
defaultLayoutIcons,
|
||||
} from '@vidstack/react/player/layouts/default';
|
||||
|
||||
export function VideoPreview({ url }: { url: string }) {
|
||||
return (
|
||||
<MediaController
|
||||
key={url}
|
||||
className="my-2 aspect-video w-full overflow-hidden rounded-lg"
|
||||
<MediaPlayer
|
||||
src={url}
|
||||
className="my-2 w-full overflow-hidden rounded-lg"
|
||||
aspectRatio="16/9"
|
||||
load="visible"
|
||||
>
|
||||
<video slot="media" src={url} preload="metadata" muted />
|
||||
<MediaLoadingIndicator slot="centered-chrome"></MediaLoadingIndicator>
|
||||
<MediaControlBar>
|
||||
<MediaPlayButton></MediaPlayButton>
|
||||
<MediaTimeRange></MediaTimeRange>
|
||||
<MediaMuteButton></MediaMuteButton>
|
||||
<MediaFullscreenButton></MediaFullscreenButton>
|
||||
</MediaControlBar>
|
||||
</MediaController>
|
||||
<MediaProvider />
|
||||
<DefaultVideoLayout icons={defaultLayoutIcons} />
|
||||
</MediaPlayer>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user