fix(jable): improve like sorting and preview thumb position

sortbylikecount.js

@@ -32,16 +32,25 @@
   // Function to sort the videos within each parent div
   function sortVideosInParent(parent) {
       console.log('Sorting videos in parent:', parent);
-      const videoContainers = parent.querySelectorAll('.video-img-box');
-      const videos = Array.from(videoContainers).map(v => {
-          const subTitle = v.querySelector('.sub-title');
+      if (parent.classList.contains('owl-stage')) {
+          sortCarouselVideos(parent);
+          return;
+      }
+
+      const videos = Array.from(parent.children).map(item => {
+          const v = item.matches('.video-img-box') ? item : item.querySelector('.video-img-box');
+          if (!v) {
+              return null;
+          }
+
+          const subTitle = item.querySelector('.sub-title');
           if (!subTitle) {
               return null;
           }
-          const vParent = v.parentElement; // 获取 v 的上一级 div
+
           const likeCount = getLikeCount(subTitle);
-          console.log('Video element:', vParent, 'Like count:', likeCount);
-          return { element: vParent, likeCount: likeCount };
+          console.log('Video element:', item, 'Like count:', likeCount);
+          return { element: item, likeCount: likeCount };
       }).filter(video => video !== null);
 
       videos.sort((a, b) => b.likeCount - a.likeCount);
@@ -51,13 +60,82 @@
       });
   }
 
+  function sortCarouselVideos(stage) {
+      const groups = Array.from(stage.children).map(group => {
+          const itemContainer = group.querySelector(':scope > .item');
+          if (!itemContainer) {
+              return null;
+          }
+
+          const cards = Array.from(itemContainer.querySelectorAll(':scope > .video-img-box'));
+          if (cards.length === 0) {
+              return null;
+          }
+
+          return { group, itemContainer, slotCount: cards.length, cards };
+      }).filter(group => group !== null);
+
+      const sortedCards = groups.flatMap(group => group.cards.map(card => {
+          const subTitle = card.querySelector('.sub-title');
+          if (!subTitle) {
+              return null;
+          }
+
+          return { element: card, likeCount: getLikeCount(subTitle) };
+      }).filter(card => card !== null)).sort((a, b) => b.likeCount - a.likeCount);
+
+      if (sortedCards.length < 2) {
+          return;
+      }
+
+      let index = 0;
+      groups.forEach(group => {
+          group.itemContainer.replaceChildren();
+          for (let i = 0; i < group.slotCount && index < sortedCards.length; i += 1) {
+              group.itemContainer.appendChild(sortedCards[index].element);
+              index += 1;
+          }
+      });
+  }
+
+  function getSortableParent(videoBox) {
+      const carouselStage = videoBox.closest('.owl-stage');
+      if (carouselStage) {
+          const sortableCards = carouselStage.querySelectorAll('.video-img-box .sub-title');
+          if (sortableCards.length >= 2) {
+              return carouselStage;
+          }
+
+          return null;
+      }
+
+      let current = videoBox;
+
+      while (current && current.parentElement) {
+          const parent = current.parentElement;
+          const sortableChildren = Array.from(parent.children).filter(child => child.matches('.video-img-box') || child.querySelector('.video-img-box'));
+
+          if (sortableChildren.length >= 2 && (current.matches('.video-img-box') || current.querySelector('.video-img-box'))) {
+              return parent;
+          }
+
+          current = parent;
+      }
+
+      return null;
+  }
+
   // Function to find all parent divs and sort their child videos
   function sortAllVideos() {
       const videoContainers = document.querySelectorAll('.video-img-box');
       const parents = new Set();
 
       videoContainers.forEach(v => {
-          const parent = v.parentElement.parentElement;
+          const parent = getSortableParent(v);
+          if (!parent) {
+              return;
+          }
+
           console.log('Found parent:', parent);
           parents.add(parent);
       });
@@ -90,12 +168,26 @@
 
   // Add CSS to override the preview thumb image container dimensions
   function addCustomStyles() {
+      if (document.getElementById('tm-preview-thumb-style')) {
+          return;
+      }
+
       const style = document.createElement('style');
+      style.id = 'tm-preview-thumb-style';
       style.textContent = `
-          .plyr__preview-thumb__image-container {
-              width: 88px !important;
-              height: 50px !important;
-              overflow: hidden;
+          :root {
+              --tm-preview-scale: 0.5;
+          }
+
+          .plyr__preview-thumb {
+              position: absolute !important;
+              left: 0px !important;
+              bottom: 15px !important;
+              top: auto !important;
+              right: auto !important;
+              transform: scale(var(--tm-preview-scale)) !important;
+              transform-origin: bottom left !important;
+              z-index: 99999 !important;
           }
       `;
       document.head.appendChild(style);