Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,468 Bytes
c5b101c ac7030c c5b101c ac7030c c5b101c ac7030c f42b4a1 ac7030c c5b101c ac7030c c5b101c ac7030c c5b101c ac7030c c5b101c d5b583f c5b101c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
"use client"
import { useEffect, useRef } from "react"
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
import { Viewer } from "@photo-sphere-viewer/core"
import { EquirectangularVideoAdapter } from "@photo-sphere-viewer/equirectangular-video-adapter"
import { SettingsPlugin } from "@photo-sphere-viewer/settings-plugin"
import { ResolutionPlugin } from "@photo-sphere-viewer/resolution-plugin"
import { VideoPlugin } from "@photo-sphere-viewer/video-plugin"
import "@photo-sphere-viewer/settings-plugin/index.css"
import "@photo-sphere-viewer/video-plugin/index.css"
import { cn } from "@/lib/utils/cn"
import { MediaInfo } from "@/types/general"
export function VideoSphereViewer({
video,
className = "",
width,
height,
muted = false,
}: {
video: MediaInfo
className?: string
width: number
height: number
muted?: boolean
}) {
const rootContainerRef = useRef<HTMLDivElement>(null)
const viewerContainerRef = useRef<HTMLElement>()
const viewerRef = useRef<Viewer>()
useEffect(() => {
if (!viewerRef.current) { return }
viewerRef.current.setOptions({
size: {
width: `${width}px`,
height: `${height}px`
}
})
}, [width, height])
if (!video.assetUrl) { return null }
return (
<div
// will be used later, if we need overlays and stuff
ref={rootContainerRef}
>
<ReactPhotoSphereViewer
container=""
containerClass={cn(
"rounded-xl overflow-hidden",
className
)}
width={`${width}px`}
height={`${height}px`}
onReady={(instance) => {
viewerRef.current = instance
viewerContainerRef.current = instance.container
}}
// to access a plugin we must use viewer.getPlugin()
// plugins={[[LensflarePlugin, { lensflares: [] }]]}
adapter={[EquirectangularVideoAdapter, { muted }]}
navbar="video"
src=""
plugins={[
[SettingsPlugin, {}],
[VideoPlugin, {
muted,
// progressbar: true,
bigbutton: false
}],
[ResolutionPlugin, {
defaultResolution: 'HD',
resolutions: [
{
id: 'HD',
label: 'Standard',
panorama: { source: video.assetUrlHd || video.assetUrl },
},
],
}],
]}
/>
</div>
)
}
|