fix: rts link on streaimg videos preview

alxarno · Nov 18, 2024 · 74be9b3 · 74be9b3
1 parent 1130b9f
commit 74be9b3
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
diff --git a/e2e/dir.fixture b/e2e/dir.fixture
@@ -109,7 +109,7 @@
         <div class="container-xxl wrapper" id="content">
 
             <ul class="dir-list row row-cols-auto" hx-boost="true">
-           <li class="col"><a href="/origin/005f6b0265" type="video" class="image-lightbox" hx-boost="false" data-extension="video/flv" data-width="960" data-height="400"><figure class="figure dir-list-item">
+           <li class="col"><a href="/origin/005f6b0265" type="video" data-stream=""class="image-lightbox" hx-boost="false" data-extension="video/flv" data-width="960" data-height="400"><figure class="figure dir-list-item">
 
             <div class="wrap" style="--origin-width: 960;--origin-height: 400;">
                 <div class="spacer"></div>
@@ -126,7 +126,7 @@
 
             <figcaption class="figure-caption">sample_960x400_ocean_with_audio.flv</figcaption>
         </figure></a></li>
-           <li class="col"><a href="/origin/65ad315541" type="video" class="image-lightbox" hx-boost="false" data-extension="video/mp4" data-width="720" data-height="1280"><figure class="figure dir-list-item">
+           <li class="col"><a href="/origin/65ad315541" type="video" data-stream=""class="image-lightbox" hx-boost="false" data-extension="video/mp4" data-width="720" data-height="1280"><figure class="figure dir-list-item">
 
             <div class="wrap" style="--origin-width: 720;--origin-height: 1280;">
                 <div class="spacer"></div>

diff --git a/e2e/index.fixture b/e2e/index.fixture
@@ -196,7 +196,7 @@
 
             <figcaption class="figure-caption">Anh_nude_cover.webp</figcaption>
         </figure></a></li>
-           <li class="col"><a href="/origin/39508f59cd" type="video" class="image-lightbox" hx-boost="false" data-extension="video/mp4" data-width="1280" data-height="720"><figure class="figure dir-list-item">
+           <li class="col"><a href="/origin/39508f59cd" type="video" data-stream=""class="image-lightbox" hx-boost="false" data-extension="video/mp4" data-width="1280" data-height="720"><figure class="figure dir-list-item">
 
             <div class="wrap" style="--origin-width: 1280;--origin-height: 720;">
                 <div class="spacer"></div>

diff --git a/e2e/search.fixture b/e2e/search.fixture
@@ -109,7 +109,7 @@
         <div class="container-xxl wrapper" id="content">
              <h4 id="found" class="mt-5">Found <span class="text-primary">1</span> elements</h4> 
             <ul class="dir-list row row-cols-auto" hx-boost="true">
-           <li class="col"><a href="/origin/005f6b0265" type="video" class="image-lightbox" hx-boost="false" data-extension="video/flv" data-width="960" data-height="400"><figure class="figure dir-list-item">
+           <li class="col"><a href="/origin/005f6b0265" type="video" data-stream=""class="image-lightbox" hx-boost="false" data-extension="video/flv" data-width="960" data-height="400"><figure class="figure dir-list-item">
 
             <div class="wrap" style="--origin-width: 960;--origin-height: 400;">
                 <div class="spacer"></div>

diff --git a/web/js/index.js b/web/js/index.js
@@ -29,8 +29,8 @@ const initLightBox = () => {
     fsLightbox = new FsLightbox();
     const previews = Array.from(document.getElementsByClassName("image-lightbox"))
     previews.forEach((v, i) => v.setAttribute("index", i))
-    previews.forEach((v, i) => v.onclick = (e) => {e.preventDefault(); originOpen(i)});
-    fsLightbox.props.sources = previews.map(v => v.getAttribute("href"))
+    previews.forEach((v, i) => v.onclick = (e) => { e.preventDefault();originOpen(i)});
+    fsLightbox.props.sources = previews.map(v => !v.getAttribute("data-stream") ? v.getAttribute("href") : v.getAttribute("href").replace("origin", "rts"))
     fsLightbox.props.types = previews.map(v => v.getAttribute("type"));
     fsLightbox.props.loadOnlyCurrentSource = true;
     fsLightbox.props.onOpen = () => {

diff --git a/web/js/video.js b/web/js/video.js
@@ -8,7 +8,7 @@ export const videoInit = (element) => {
     let src = element.getAttribute("src");
     if(initializedVideos.includes(src)) return;
     initializedVideos.push(src);
-    const origin = document.querySelector(`a[href="${src}"]`)
+    const origin = document.querySelector(`a[href="${src.includes("rts") ? src.replace("rts", "origin") : src}"]`)
     const wrapper = document.createElement("div")
     element.parentElement.appendChild(wrapper)
 

diff --git a/web/templates/item-video.html b/web/templates/item-video.html
@@ -1,4 +1,4 @@
-{{define "video-item"}}<a href="{{ if streaming .Path }}#/rts/{{.ID}}{{ else }}/origin/{{ .ID }}{{end}}" type="video" class="image-lightbox" hx-boost="false" data-extension="{{ if streaming .Path }}application/x-mpegURL{{else}}video/{{ ext .Name }}{{end}}" data-width="{{ .Resolution.Width }}" data-height="{{ .Resolution.Height }}"><figure class="figure dir-list-item">
+{{define "video-item"}}<a href="/origin/{{ .ID }}" type="video" data-stream="{{ if streaming .Path }}/rts/{{.ID}}{{ else }}{{ end }}"class="image-lightbox" hx-boost="false" data-extension="{{ if streaming .Path }}application/x-mpegURL{{else}}video/{{ ext .Name }}{{end}}" data-width="{{ .Resolution.Width }}" data-height="{{ .Resolution.Height }}"><figure class="figure dir-list-item">
             {{ if eq .Preview.Length 0 }}
             {{ template "icon-video" .}}
             {{ else }}