Merge branch 'master' of moshaorui/mtb_album_frontend into stable

app/Http/Controllers/HomeController.php

@@ -10,6 +10,7 @@ namespace App\Http\Controllers;
 use App\Models\SiteAlbum;
 use App\Models\SiteAlbumFolder;
 use App\Models\SiteAlbumLog;
+use App\Models\SitePreviewVideo;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Validator;
@@ -143,9 +144,13 @@ class HomeController extends Controller
             }
         }
        // dd(json_decode($album['parameters'], true));
+
+        $album = $album->toArray();
+        $album['video'] = SitePreviewVideo::changeVideo($album['id'],$album['video']);
+        //dd($album);
         return view('gallery-detail',[
             'foldersTree' => $this->foldersTree,
-            'album' => $album->toArray(),
+            'album' => $album,
             'showTabs' => $showTabs
         ]);
     }
@@ -216,48 +221,24 @@ class HomeController extends Controller
     }
 
 
-
-
+    /*
+     * 下载图片
+     */
     public function downloadImage(Request $request)
     {
         Session::put('downloadAllStatus', '1');
-
-        // Get the URL from the request parameter
         $imageUrl = $request->input('url');
-
-
-        try {
-            // Initialize cURL
-            $ch = curl_init($imageUrl);
-
-            // Set cURL options
-            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
-            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // Allow HTTPS (disable SSL peer verification)
-            curl_setopt($ch, CURLOPT_TIMEOUT, 30); // Set timeout to prevent hanging
-
-            // Execute cURL request
-            $imageContent = curl_exec($ch);
-            $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
-
-            if ($httpCode !== 200) {
-                Session::put('downloadAllStatus', '2');
-                return response()->json(['error' => 'Failed to download image'], 500);
-            }
-
-            curl_close($ch);
-
-            // Generate a random filename
-            $fileName = Str::random(32) . '.jpg';
-
-            Session::put('downloadAllStatus', '2');
-            // Return the image as a download
-            return response($imageContent)
-                ->header('Content-Type', 'image/jpeg')
-                ->header('Content-Disposition', 'attachment; filename="' . $fileName . '"');
-        } catch (\Exception $e) {
-            Session::put('downloadAllStatus', '2');
-            return response()->json(['error' => 'Error downloading image: ' . $e->getMessage()], 500);
-        }
+        $imageUrl = strtok($imageUrl, '?');
+        $urlWithoutQuery = parse_url($imageUrl, PHP_URL_PATH);
+        $fileName = basename($urlWithoutQuery);
+        //下载图片
+        $fileContent = file_get_contents($imageUrl);
+        $headers = [
+            'Content-Type' => 'image/jpeg',
+            'Content-Disposition' => 'attachment; filename='. $fileName,
+        ];
+        Session::put('downloadAllStatus', '2');
+        return response($fileContent, 200, $headers);
     }
 
 

app/Models/SitePreviewVideo.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Models;
+
+
+
+use Illuminate\Database\Eloquent\Model;
+
+class SitePreviewVideo extends Model
+{
+
+    protected $table = 'site_preview_video';
+
+    public static function changeVideo($albumId,$voidData) {
+        if (is_string($voidData)) {
+            $voidData = json_decode($voidData, true);
+        }
+        $result = SitePreviewVideo::where('album_id', $albumId)->get();
+        foreach ($voidData as $key => $value) {
+            $voidData[$key]['preview_url'] = '';
+            foreach ($result as $item) {
+                if ($item->video_url == $value['video_src']) {
+                    $voidData[$key]['preview_url'] = $item->preview_url;
+                }
+            }
+        }
+
+        return json_encode($voidData);
+    }
+
+
+}

app/helpers.php

@@ -6,9 +6,13 @@ if (! function_exists('ossUrl')) {
      * @param string $path 路径
      */
     function ossUrl($path) {
+        if (empty($path)) {
+            return '';
+        }
         if (strpos($path, 'http') === 0 || strpos($path, 'https') === 0) {
             return $path;
         }
+
         return env('OSS_HOST').'/'. $path;
     }
 }

public/static/css/main.css

@@ -1734,6 +1734,7 @@ table.album_table td {
   color: #555;
 }
 table.album_table img {
+    max-height: 200px;
   border-radius: 5px;
 }
 table.album_table button {

public/static/js/script.js

@@ -284,7 +284,7 @@ $(document).ready(function() {
 
     var checkDownloadStatus = function() {
         var intervalId = setInterval(function() {
-            console.log('checkDownloadStatus ....');
+            //console.log('checkDownloadStatus ....');
             $.ajax({
                 url: '/download-status',
                 method: 'GET',
@@ -382,9 +382,11 @@ $(document).ready(function() {
                     const currentImageSrc = imageSrcArray[currentImageIndex];
                     // 下载图片 js urlencode
                     href_url = '/download-image?url='+encodeURIComponent(currentImageSrc);
-
                     window.location.href = href_url;
-
+                    //延迟执行，等待下载完成
+                    // setTimeout(function() {
+                    //     layer.close(loadIndex); // 关闭加载层
+                    // }, 2000);
                     checkDownloadStatus();
                 }
             });
@@ -512,6 +514,22 @@ $(document).ready(function() {
     }
 
 
+    $(".download-icon").on('click', function() {
+        loadIndex = layer.load(2, {shade: [0.8, '#000']});
+        const currentImageSrc = $(this).attr('data-src');
+        $.ajax({
+            url: '/download-status',
+            method: 'GET',
+            dataType: 'json',
+            data: {reset: 1},
+            success: function (response) {
+                // 下载图片 js urlencode
+                href_url = '/download-image?url=' + encodeURIComponent(currentImageSrc);
+                window.location.href = href_url;
+                checkDownloadStatus();
+            }
+        });
+    });
 });
 
 function changeIframeSrc(url) {

resources/views/gallery-detail.blade.php

@@ -20,6 +20,39 @@
     <link rel="stylesheet" href="/static/css/main.css">
 
 </head>
+<style>
+    .video-hover-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .video-hover-container img,
+    .video-hover-container video {
+        display: block;
+        object-fit: cover;
+    }
+
+    .video-hover-container a {
+        display: block;
+        position: relative;
+    }
+
+    /* Spinner styles */
+    .spinner {
+        width: 40px;
+        height: 40px;
+        border: 4px solid #fff;
+        border-top: 4px solid transparent;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>
+
 <body class="main-body">
 
 <div class="menu-overlay"></div>
@@ -92,9 +125,9 @@
                                 <tbody>
                                 @foreach($content as $item)
                                 <tr>
-                                    <td>
+                                    <td class="video-hover-container">
                                         <a href="{{ossUrl($item['cover'])}}" target="_blank">
-                                            <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260" class="void-img">
+                                            <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260" class="void-img" data-index="{{$loop->index}}" data-preview="{{ossUrl($item['preview_url'])}}" data-poster="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260">
                                         </a>
                                     </td>
                                     <td>
@@ -164,7 +197,7 @@
                                 <img  data-src="{{ossUrl($item)}}" src="{{ossUrl($item)}}?x-oss-process=image/resize,w_380"  loading="lazy" alt="1">
                                 <div class="album-mask">
                                     <!-- 下载图标 -->
-                                    <a href="{{ossUrl($item)}}" download class="download-icon" target="_blank">
+                                    <a href="javascript:void(0)" data-src="{{ossUrl($item)}}" download class="download-icon">
                                         <i class="fa fa-cloud-download"></i>
                                     </a>
                                 </div>
@@ -214,6 +247,103 @@
     $(document).ready(function() {
         $('.grid-album:first').addClass('');
     });
+
+    $(document).ready(function() {
+        $('.video-hover-container').each(function() {
+            var $container = $(this);
+            var $img = $container.find('img');
+            $img.data('original-src', $img.attr('src'));
+        });
+
+        // Object to track load status using data-index as key
+        var loadIndexes = {};
+        var loadingVar = {};
+
+        $('.video-hover-container').on('mouseenter', function(e) {
+            e.preventDefault(); // Prevent link default behavior during hover
+            var $container = $(this);
+            var $img = $container.find('img');
+            var $link = $container.find('a');
+            var videoUrl = $img.data('preview');
+            var posterUrl = $img.data('poster');
+            var index = $img.data('index'); // Get the data-index value
+
+            // Initialize loadIndexes[index] if not set
+            if (!loadIndexes.hasOwnProperty(index)) {
+                loadIndexes[index] = 0;
+            }
+
+            // Create loading overlay
+            loadingVar[index] = $('<div>', {
+                class: 'loading-overlay',
+                css: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    background: 'rgba(0,0,0,0.5)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 10
+                }
+            }).append('<div class="spinner"></div>');
+
+            // Create video element
+            var $video = $('<video>', {
+                src: videoUrl,
+                poster: posterUrl,
+                autoplay: true,
+                muted: true,
+                loop: true,
+                css: {
+                    width: $img.width(),
+                    height: $img.height(),
+                    display: 'none' // Initially hidden until loaded
+                }
+            });
+
+            if (loadIndexes[index] === 0 && videoUrl != "") {
+                loadIndexes[index] = 1;
+                $container.css('position', 'relative');
+                $link.append(loadingVar[index]);
+            }
+
+            // When video can play
+            $video.on('canplay', function() {
+                if (loadIndexes[index] === 1) {
+                    loadIndexes[index] = 2;
+                    loadingVar[index].remove();
+                    $img.hide();
+                    $video.show();
+                    $link.append($video);
+                }
+            });
+
+            // Maintain link functionality
+            $link.on('click', function(e) {
+                if ($video.is(':visible')) {
+                    e.preventDefault(); // Prevent click when video is showing
+                }
+            });
+        });
+
+        $('.video-hover-container').on('mouseleave', function() {
+            var $container = $(this);
+            var $img = $container.find('img');
+            var index = $img.data('index'); // Get the data-index value
+
+            if (loadIndexes[index] === 2 || loadIndexes[index] === 1) {
+                loadIndexes[index] = 0;
+                var $video = $container.find('video');
+                var $loading = $container.find('.loading-overlay');
+                $video.remove();
+                $loading.remove();
+                $img.show();
+            }
+        });
+    });
 </script>
 </body>
 </html>