fix: update media item handling for seamless looping

Author: 514sid

src/assets/playlist_data.json

@@ -115,7 +115,7 @@
 				]
 			},
 			{
-				"id": "right",
+				"id": "right_bottom",
 				"position": {
 					"x": 640,
 					"y": 360,

src/hooks/useSectionMediaItems.ts

@@ -6,7 +6,7 @@ export const useSectionMediaItems = (sectionItems: Item[]) => {
     const totalDurationRef = useRef<number>(0)
 
     useEffect(() => {
-        const items = sectionItems.map(item => ({
+        let items = sectionItems.map(item => ({
             id: item.id,
             src: item.content_path,
             type: item.content_type,
@@ -15,6 +15,13 @@ export const useSectionMediaItems = (sectionItems: Item[]) => {
             preload: false,
         }))
 
+        // If the section contains only one item, duplicate it to enable seamless looping of the media
+        if (items.length === 1) {
+            const duplicate = { ...items[0], id: `${items[0].id}-copy` }
+
+            items = [...items, duplicate]
+        }
+
         totalDurationRef.current = items.reduce((sum, item) => sum + item.duration, 0)
 
         setMediaItems(items)