fix: gifs support

Makefile

@@ -36,7 +36,7 @@ clean: ## clean
 
 .PHONY: test
 test: ## run server tests
-	go test -v -timeout 2m -race ./... 
+	go test -timeout 2m -race -failfast ./...
 
 .PHONY: ubuntu
 ubuntu: ## Install deps for ubuntu (libvips, ffmpeg)

README.md

@@ -35,7 +35,7 @@ The latest version of the TinyTune can be found on the GitHub [releases page](ht
 # check that you have ffmpeg installed
 ffmpeg -v
 
-wget https://github.com/alxarno/tinytune/releases/download/v1.1.0/tinytune_linux_amd64
+wget https://github.com/alxarno/tinytune/releases/download/v1.2.0/tinytune_linux_amd64
 
 mv tinytune_linux_amd64 /usr/local/bin/tinytune
 
@@ -54,7 +54,7 @@ USAGE:
    tinytune [data folder path] [global options]
 
 VERSION:
-   1.1.0
+   1.2.0
 
 AUTHOR:
    alxarno <alexarnowork@gmail.com>

e2e/index.fixture

@@ -178,11 +178,20 @@
 </svg>
             <figcaption class="figure-caption">2.ts</figcaption>
         </figure></li>
+           <li class="col"><a href="/origin/0adb3697c8" data-loading="lazy" class="image-lightbox" hx-boost="false" data-fslightbox="gallery" type="image"><figure class="figure dir-list-item">
+
+            <div class="wrap">
+                <div class="spacer"></div>
+                <img src="/preview/0adb3697c8" loading="lazy" id="img-0adb3697c8" class="figure-img img-fluid rounded" alt="sample_minions.gif" data-animated="/origin/0adb3697c8" hx-preserve>
+            </div>
+
+            <figcaption class="figure-caption">sample_minions.gif</figcaption>
+        </figure></a></li>
            <li class="col"><a href="/origin/024eb2ebdb" data-loading="lazy" class="image-lightbox" hx-boost="false" data-fslightbox="gallery" type="image"><figure class="figure dir-list-item">
 
             <div class="wrap">
                 <div class="spacer"></div>
-                <img src="/preview/024eb2ebdb" id="img-024eb2ebdb" class="figure-img img-fluid rounded" alt="image.jpg" hx-preserve>
+                <img src="/preview/024eb2ebdb" loading="lazy" id="img-024eb2ebdb" class="figure-img img-fluid rounded" alt="image.jpg"  hx-preserve>
             </div>
 
             <figcaption class="figure-caption">image.jpg</figcaption>
@@ -191,10 +200,27 @@
 
             <div class="wrap">
                 <div class="spacer"></div>
-                <img src="/preview/ff8609b730" id="img-ff8609b730" class="figure-img img-fluid rounded" alt="Anh_nude_cover.webp" hx-preserve>
+                <img src="/preview/ff8609b730" loading="lazy" id="img-ff8609b730" class="figure-img img-fluid rounded" alt="Anh_nude_cover.webp"  hx-preserve>
             </div>
 
             <figcaption class="figure-caption">Anh_nude_cover.webp</figcaption>
+        </figure></a></li>
+           <li class="col"><a href="/origin/4475bab9a5" 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>
+                <img
+                    id="video-4475bab9a5"
+                    loading="lazy"
+                    alt="short.mp4"
+                    src="/preview/4475bab9a5" 
+                    class="figure-img img-fluid rounded preview" 
+                    hx-preserve
+                >
+                <span class="duration rounded" id="duration-4475bab9a5">00:03</span>
+            </div>
+
+            <figcaption class="figure-caption">short.mp4</figcaption>
         </figure></a></li>
            <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">
 

internal/crawler_os_test.go

@@ -12,5 +12,5 @@ func TestCrawlerOS(t *testing.T) {
 
 	files, err := NewCrawlerOS("../test").Scan("../test/index.tinytune")
 	require.NoError(err)
-	require.Len(files, 16)
+	require.Len(files, 17)
 }

pkg/index/builder_test.go

@@ -16,15 +16,15 @@ func TestIndexBuilder(t *testing.T) {
 	require.NoError(err)
 	index, err := NewIndex(context.Background(), indexFile)
 	require.NoError(err)
-	require.Len(index.meta, 15)
+	require.Len(index.meta, 17)
 	sample, ok := index.meta["005f6b0265"]
 	require.True(ok)
 	require.True(sample.IsVideo())
 	require.Equal("sample_960x400_ocean_with_audio.flv", sample.Name)
 	require.Equal(960, sample.Resolution.Width)
 	require.Equal(400, sample.Resolution.Height)
-	require.EqualValues(37618, sample.Preview.Length)
-	require.EqualValues(72046, sample.Preview.Offset)
+	require.EqualValues(37038, sample.Preview.Length)
+	require.EqualValues(87368, sample.Preview.Offset)
 	require.EqualValues(7222114, sample.OriginSize)
 	require.LessOrEqual(sample.Preview.Offset+sample.Preview.Length, uint32(len(index.data)))
 }

pkg/index/meta.go

@@ -33,6 +33,7 @@ type Meta struct {
 	Preview      PreviewLocation `json:"preview"`
 	Duration     time.Duration   `json:"duration"`
 	Resolution   Resolution      `json:"resolution"`
+	Extension    string          `json:"extension"`
 	Type         int             `json:"type"`
 }
 
@@ -58,6 +59,10 @@ func (m *Meta) IsVideo() bool {
 	return m.Type == ContentTypeVideo
 }
 
+func (m *Meta) IsAnimatedImage() bool {
+	return m.Extension == "gif"
+}
+
 func (m *Meta) IsOtherFile() bool {
 	return m.Type == ContentTypeOther
 }
@@ -81,10 +86,11 @@ func (m *Meta) setContentType() {
 
 	m.Type = ContentTypeOther
 	//nolint:lll
-	videoFormats := []string{"3gp", "avi", "f4v", "flv", "gif", "hevc", "m4v", "mlv", "mov", "mp4", "m4a", "3g2", "mj2", "mpeg", "ogv", "webm"}
-	imageFormats := []string{"jpeg", "png", "jpg", "webp", "bmp"}
+	videoFormats := []string{"3gp", "avi", "f4v", "flv", "hevc", "m4v", "mlv", "mov", "mp4", "m4a", "3g2", "mj2", "mpeg", "ogv", "webm"}
+	imageFormats := []string{"jpeg", "png", "jpg", "webp", "bmp", "gif"}
 
 	ext := strings.ToLower(filepath.Ext(string(m.AbsolutePath)))[1:]
+	m.Extension = ext
 
 	switch {
 	case slices.Contains(imageFormats, ext):

pkg/preview/image_test.go

@@ -11,15 +11,47 @@ import (
 
 func TestPreviewImage(t *testing.T) {
 	t.Parallel()
-	assert := assert.New(t)
 
-	preview, err := imagePreview("../../test/image.jpg")
-	require.NoError(t, err)
-	assert.Len(preview.Data(), 8620)
-	width, height := preview.Resolution()
-	assert.Equal(1527, width)
-	assert.Equal(898, height)
+	cases := []struct {
+		Name       string
+		SourcePath string
+		DataLength int
+		Width      int
+		Height     int
+		Hash       string
+	}{
+		{
+			Name:       ".jpg",
+			SourcePath: "../../test/image.jpg",
+			DataLength: 8620,
+			Width:      1527,
+			Height:     898,
+			Hash:       "64de9c944a91c93e750d097577c8fc5992100a7bb186d376534e78705aefbbbd",
+		},
+		{
+			Name:       ".gif",
+			SourcePath: "../../test/sample_minions.gif",
+			DataLength: 15322,
+			Width:      400,
+			Height:     200,
+			Hash:       "3639b076b0df5d917bd6f439aa8f11a3fc2cdcc638105a5a52e670d2c3105e3a",
+		},
+	}
 
-	hash := sha256.Sum256(preview.Data())
-	assert.Equal("64de9c944a91c93e750d097577c8fc5992100a7bb186d376534e78705aefbbbd", hex.EncodeToString(hash[:]))
+	for _, testCase := range cases {
+		t.Run(testCase.Name, func(t *testing.T) {
+			t.Parallel()
+
+			assert := assert.New(t)
+			preview, err := imagePreview(testCase.SourcePath)
+			require.NoError(t, err)
+			assert.Len(preview.Data(), testCase.DataLength)
+			width, height := preview.Resolution()
+			assert.Equal(testCase.Width, width)
+			assert.Equal(testCase.Height, height)
+
+			hash := sha256.Sum256(preview.Data())
+			assert.Equal(testCase.Hash, hex.EncodeToString(hash[:]))
+		})
+	}
 }

pkg/preview/preview.go

@@ -16,6 +16,7 @@ var (
 type Source interface {
 	IsImage() bool
 	IsVideo() bool
+	IsAnimatedImage() bool
 	Path() string
 	Size() int64
 }

pkg/preview/preview_test.go

@@ -11,10 +11,11 @@ import (
 )
 
 type mockSource struct {
-	video bool
-	image bool
-	path  string
-	size  int64
+	video     bool
+	image     bool
+	path      string
+	extension string
+	size      int64
 }
 
 func (s mockSource) IsImage() bool {
@@ -33,6 +34,10 @@ func (s mockSource) Size() int64 {
 	return s.size
 }
 
+func (s mockSource) IsAnimatedImage() bool {
+	return s.extension == "gif"
+}
+
 func TestPreview(t *testing.T) {
 	t.Parallel()
 	require := require.New(t)

pkg/preview/video_test.go

@@ -10,7 +10,7 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
-func TestPreviewVideo2(t *testing.T) {
+func TestPreviewVideo(t *testing.T) {
 	t.Parallel()
 
 	cases := []struct {

web/js/gif.js

@@ -0,0 +1,11 @@
+const gifInit = () => {
+    const previews = document.querySelectorAll("img[data-animated]")
+    previews.forEach(v => v.onmouseover = (event) => {
+        v.setAttribute("src", v.getAttribute("src").replace("preview", "origin"))
+    })
+    previews.forEach(v => v.onmouseout = (event) => {
+        v.setAttribute("src", v.getAttribute("src").replace("origin", "preview"))
+    })
+}
+
+export {gifInit}

web/js/index.js

@@ -5,6 +5,7 @@ import { zoom } from "./zoom"
 import { observeDOM } from "./dom";
 import { onSearch, highlightSearchResults } from "./search"
 import { onButtonUpClick, buttonUpInit } from "./button-up"
+import { gifInit } from "./gif"
 import Cookies from "js-cookie"
 import htmx from "htmx.org"
 
@@ -46,10 +47,13 @@ const initLightBox = () => {
 window.onload = () => {
     document.addEventListener('htmx:afterSettle', () => {
         initLightBox();
+        gifInit();
+        buttonUpInit();
     })
     initLightBox();
     highlightSearchResults();
     buttonUpInit();
+    gifInit();
     observeDOM()(document.body, (m) => {
         let addedNodes = []
         m.forEach(record => record.addedNodes.length & addedNodes.push(...record.addedNodes));

web/templates/item-image.html

@@ -4,7 +4,7 @@
             {{ else }}
             <div class="wrap">
                 <div class="spacer"></div>
-                <img src="/preview/{{ .ID }}" id="img-{{.ID}}" class="figure-img img-fluid rounded" alt="{{ .Name }}" hx-preserve>
+                <img src="/preview/{{ .ID }}" loading="lazy" id="img-{{.ID}}" class="figure-img img-fluid rounded" alt="{{ .Name }}" {{ if .IsAnimatedImage }}data-animated="/origin/{{ .ID }}"{{ end }} hx-preserve>
             </div>
             {{ end }}
             <figcaption class="figure-caption">{{ .Name }}</figcaption>

web/templates/item-video.html

@@ -1,4 +1,4 @@
-{{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">
+{{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/{{ .Extension }}{{end}}" data-width="{{ .Resolution.Width }}" data-height="{{ .Resolution.Height }}"><figure class="figure dir-list-item">
             {{ if eq .Preview.Length 0 }}
             {{ template "icon-video" .}}
             {{ else }}