Map Raster Video

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import mapboxgl from "mapbox-gl"
5import { useMap } from "./hooks"
6import type { MapImageCorners } from "./types"
7 
8type MapRasterVideoProps = {
9  id: string
10  urls: string[]
11  coordinates: MapImageCorners
12  opacity?: number
13  autoplay?: boolean
14  loop?: boolean
15  muted?: boolean
16}
17 
18export const MapRasterVideo = ({
19  id,
20  urls,
21  coordinates,
22  opacity = 1,
23  autoplay = false,
24  loop = true,
25  muted = true,
26}: MapRasterVideoProps) => {
27  const { map, isLoaded } = useMap()
28  const initializedRef = useRef(false)
29 
30  useEffect(() => {
31    if (!isLoaded || !map || initializedRef.current) return
32 
33    try {
34      // Add video source
35      map.addSource(id, {
36        type: "video",
37        urls,
38        coordinates,
39      } as mapboxgl.VideoSourceSpecification)
40 
41      // Add raster layer
42      map.addLayer({
43        id,
44        type: "raster",
45        source: id,
46        paint: {
47          "raster-opacity": opacity,
48        },
49      })
50 
51      // Set video properties and control playback
52      const source = map.getSource(id) as mapboxgl.VideoSource
53      if (source && source.getVideo) {
54        const video = source.getVideo()
55        if (video) {
56          video.loop = loop
57          video.muted = muted
58 
59          if (autoplay) {
60            source.play()
61          }
62        }
63      }
64 
65      initializedRef.current = true
66    } catch (error) {
67      console.error("Error adding raster video:", error)
68    }
69 
70    return () => {
71      if (map && map.getStyle()) {
72        try {
73          if (map.getLayer(id)) {
74            map.removeLayer(id)
75          }
76          if (map.getSource(id)) {
77            map.removeSource(id)
78          }
79        } catch (error) {
80          console.error("Error cleaning up raster video:", error)
81        }
82      }
83      initializedRef.current = false
84    }
85  }, [map, isLoaded, id, urls, coordinates, opacity, autoplay, loop, muted])
86 
87  return null
88}
89 
90export const useRasterVideoControl = (layerId: string) => {
91  const { map } = useMap()
92  const [isPlaying, setIsPlaying] = useState(false)
93 
94  const play = () => {
95    if (!map) return
96    const source = map.getSource(layerId) as mapboxgl.VideoSource
97    source?.play?.()
98    setIsPlaying(true)
99  }
100 
101  const pause = () => {
102    if (!map) return
103    const source = map.getSource(layerId) as mapboxgl.VideoSource
104    source?.pause?.()
105    setIsPlaying(false)
106  }
107 
108  const toggle = () => {
109    if (isPlaying) {
110      pause()
111    } else {
112// … truncated