moshaorui
/
mtb_album_frontend


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
							

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>相册</title>

    <link rel="shortcut icon" href="/static//static/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/static//static/images/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/magnific-popup.min.css">
    <link rel="stylesheet" href="/static/css/animate.min.css">
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <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>


<main class="main">

    <section class="gallery">

{{--        @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])--}}

        <div class="update-content">
            <div class="update-log" >
                <a href="/update-log" class="update-log-link">
                    <div class="timestamp"><i class="fa fa-volume-up"></i> <span class="update-time">&nbsp;</span> <span class="user_name">&nbsp;</span> <span class="action">&nbsp;</span> <span class="model">&nbsp;</span>  <span class="highlight log-content">&nbsp;</span></div>
                </a>
{{--                <a href="javascript:void(0)" onclick="logout()" class="login-out-link">--}}
{{--                    退出登录--}}
{{--                </a>--}}
                <div class="clear"></div>
            </div>
        </div>


        <div class="content-page gallery-content gallery-wrap">
            <div class="content-inner">
                <div class="title-wrapper" style="margin-left: 0">
                    <h2 class="title">{{$album['model']}}</h2>
                    <div class="subtitle">
                        <p></p>
                    </div>
                </div>

                <div class="album-tab">
                    @foreach($showTabs as $tab)
                        <a href="#album-{{$tab['column']}}" @if($loop->first)class="is-active"@endif column={{$tab['column']}}>{{$tab['title']}}</a>
                    @endforeach
                </div>

                <!-- Album Animals START -->
                <div class="gallery-album-line">
                    <a href="javascript:history.back();" class="gallery-album-prev"><i class="fa fa-angle-double-left"></i> 返回 </a>
                    <a href="javascript:void(0);" class="download-all">下载全部 <i class="fa fa-download"></i></a>
                </div>

                @foreach($showTabs as $tab)
                <div class="grid-album @if($loop->first)gallery-album is-active @endif" id="album-{{$tab['column']}}">
                    @php
                        $content = json_decode($album[$tab['column']], true);
                    @endphp
                    @if (empty($content))
                        数据为空
                    @endif

                    @if ($tab['column'] == 'video' || $tab['column'] == 'pdf')
                        @if ($tab['column'] == 'video' && empty($content) == false)
                            <?php
                                //$content倒序
                                $content = array_reverse($content);
                            ?>
                            <table class="album_table">
                                <thead>
                                <tr>
                                    <th>图片</th>
                                    <th>中文标题</th>
                                    <th>英文标题</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($content as $item)
                                <tr>
                                    <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" 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>
                                        {{@$item['video_title']}}
                                    </td>
                                    <td>
                                        {{@$item['video_en_title']}}
                                    </td>
                                    <td>
                                        <button data-src="{{ossUrl($item['video_src'])}}" class="video-btn">播放</button>
                                        <a href="/download?url={{urlencode(ossUrl($item['video_src']))}}" download class="download-btn" target="_blank"><button>下载</button></a>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <br/>
                        @endif

                        @if ($tab['column'] == 'pdf' && empty($content) == false)
                                <table class="album_table">
                                    <thead>
                                    <tr>
                                        <th>PDF标题</th>
                                        <th>PDF标题(英文)</th>
                                        <th width="15%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($content as $item)
                                        <tr>
                                            <td>{{$item['pdf_title']}}</td>
                                            <td>{{@$item['pdf_title_en']}}</td>
                                            <td>
                                                <a href="/download?url={{urlencode(ossUrl($item['pdf_src']))}}" download class="download-btn" target="_blank"><button>下载</button></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            <br/>
                        @endif
                    @elseif ($tab['column'] == 'parameters' && empty($content) == false)
                        <table class="album_table">
                            <thead>
                            <tr>
                                <th>属性名</th>
                                <th>属性值</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($content as $item)
                                <tr>
                                    <td>{{$item['key']}}</td>
                                    <td>
                                        {{$item['value']}}
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    @else
                        <div class="grid-sizer"></div>
                        @foreach($content as $item)
                        <div class="grid-item album-item">
                            <div class="album-thumb album-thumb-detail">
                                <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="javascript:void(0)" data-src="{{ossUrl($item)}}" download class="download-icon">
                                        <i class="fa fa-cloud-download"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>
                @endforeach
                <!-- Album Animals END -->
            </div><!-- end container-inner -->
        </div>

        <!-- 视频遮罩层 -->
        <div id="overlay" class="overlay">
            <div class="video-container">
                <video id="videoPlayer" controls>
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>

    </section> <!-- end gallery -->
</main>

{{--<footer class="site-footer">--}}
{{--    <div class="footer-copyright">--}}
{{--        © 2025 <strong>mietub</strong>. All rights reserved.--}}
{{--    </div>--}}
{{--</footer>--}}


<script src="/static/js/jquery-3.7.0.min.js"></script>
<script src="/static/js/swiper-bundle.min.js"></script>
<script src="/static/js/wow.min.js"></script>
<script src="/static/js/masonry.pkgd.min.js"></script>
<script src="/static/js/imagesloaded.pkgd.min.js"></script>
<script src="/static/js/magnific-popup.min.js"></script>
<script src="/static/js/blazy.min.js"></script>
<script src="/static/js/parazoom.min.js"></script>
<script src="/static/js/layui/layui.js"></script>
<script src="/static/js/script.js"></script>


<script>
    $(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>