added chapters on player using aniskip api

desktop/src/scripts/anime/player.js

@@ -8,7 +8,10 @@ let plyrInstance;
 let hlsInstance;
 let totalEpisodes = 0;
 let animeTitle = "";
+let aniSkipData = null;
 
+let isAnilist = false;
+let malId = null;
 
 const params = new URLSearchParams(window.location.search);
 const firstKey = params.keys().next().value;
@@ -21,6 +24,17 @@ const href = extName
 
 document.getElementById('back-link').href = href;
 document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
+async function loadAniSkip(malId, episode, duration) {
+    try {
+        const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
+        if (!res.ok) return null;
+        const data = await res.json();
+        return data.results || [];
+    } catch (error) {
+        console.error('Error loading AniSkip data:', error);
+        return null;
+    }
+}
 
 async function loadMetadata() {
     try {
@@ -61,6 +75,14 @@ async function loadMetadata() {
             seasonYear = data.year || '';
         }
 
+        if (isAnilistFormat && data.idMal) {
+            isAnilist = true;
+            malId = data.idMal;
+        } else {
+            isAnilist = false;
+            malId = null;
+        }
+
         document.getElementById('anime-title-details').innerText = title;
         document.getElementById('anime-title-details2').innerText = title;
         animeTitle = title;
@@ -106,6 +128,102 @@ async function loadMetadata() {
     }
 }
 
+async function applyAniSkip(video) {
+    if (!isAnilist || !malId) {
+        console.log('AniSkip disabled: isAnilist=' + isAnilist + ', malId=' + malId);
+        return;
+    }
+
+    console.log('Loading AniSkip for MAL ID:', malId, 'Episode:', currentEpisode);
+
+    aniSkipData = await loadAniSkip(
+        malId,
+        currentEpisode,
+        Math.floor(video.duration)
+    );
+
+    console.log('AniSkip data received:', aniSkipData);
+
+    if (!aniSkipData || aniSkipData.length === 0) {
+        console.log('No AniSkip data available');
+        return;
+    }
+
+    let op, ed;
+    const markers = [];
+
+    aniSkipData.forEach(item => {
+        const { startTime, endTime } = item.interval;
+
+        if (item.skipType === 'op') {
+            op = { start: startTime, end: endTime };
+            markers.push({
+                start: startTime,
+                end: endTime,
+                label: 'Opening'
+            });
+
+            console.log('Opening found:', startTime, '-', endTime);
+        }
+
+        if (item.skipType === 'ed') {
+            ed = { start: startTime, end: endTime };
+            markers.push({
+                start: startTime,
+                end: endTime,
+                label: 'Ending'
+            });
+
+            console.log('Ending found:', startTime, '-', endTime);
+        }
+    });
+
+    // Crear markers visuales en el DOM
+    if (plyrInstance && markers.length > 0) {
+        console.log('Creating visual markers:', markers);
+
+        // Esperar a que el player esté completamente cargado
+        setTimeout(() => {
+            const progressContainer = document.querySelector('.plyr__progress');
+            if (!progressContainer) {
+                console.error('Progress container not found');
+                return;
+            }
+
+            // Eliminar markers anteriores si existen
+            const oldMarkers = progressContainer.querySelector('.plyr__markers');
+            if (oldMarkers) oldMarkers.remove();
+
+            // Crear contenedor de markers
+            const markersContainer = document.createElement('div');
+            markersContainer.className = 'plyr__markers';
+
+            markers.forEach(marker => {
+                const markerElement = document.createElement('div');
+                markerElement.className = 'plyr__marker';
+                markerElement.dataset.label = marker.label;
+
+                const startPercent = (marker.start / video.duration) * 100;
+                const widthPercent = ((marker.end - marker.start) / video.duration) * 100;
+
+                markerElement.style.left = `${startPercent}%`;
+                markerElement.style.width = `${widthPercent}%`;
+
+                markerElement.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    video.currentTime = marker.start;
+                });
+
+                markersContainer.appendChild(markerElement);
+            });
+
+
+            progressContainer.appendChild(markersContainer);
+            console.log('Visual markers created successfully');
+        }, 500);
+    }
+}
+
 async function loadExtensionEpisodes() {
     try {
         const extQuery = extName ? `?source=${extName}` : "?source=anilist";
@@ -337,7 +455,15 @@ function playVideo(url, subtitles = []) {
     plyrInstance = new Plyr(video, {
         captions: { active: true, update: true, language: 'en' },
         controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
-        settings: ['captions', 'quality', 'speed']
+        settings: ['captions', 'quality', 'speed'],
+        markers: {
+            enabled: true,
+            points: []
+        }
+    });
+
+    video.addEventListener('loadedmetadata', () => {
+        applyAniSkip(video);
     });
 
     let rpcActive = false;