f0ckm/views/snippets/item-media.html

@if(item.is_album && item.album && item.album.length > 1)
<div class="embed-responsive embed-responsive-16by9 album-gallery-container" data-album-id="{{ item.id }}" data-requested-subf0ck="{{ item.requested_subf0ck_slug || '' }}">
    <script type="application/json" class="album-data-json">{{ item.album_json }}</script>
    <div class="embed-responsive-image album-media-stage" id="image-scroll">
        <a href="{{ item.dest }}" id="elfe" target="_blank" class="album-stage-link">
            <img id="f0ck-image" class="img-fluid album-active-image" src="{{ item.dest }}" loading="lazy" decoding="async" />
        </a>
        <div id="f0ck-album-video-wrapper" class="album-video-wrapper embed-responsive embed-responsive-16by9" style="display: none; position: absolute; inset: 0; width: 100%; height: 100%;">
            <video id="f0ck-album-video" class="embed-responsive-item" preload="auto" loop playsinline></video>
        </div>
        <div id="f0ck-album-audio-wrapper" class="album-audio-wrapper embed-responsive embed-responsive-16by9" style="display: none; position: absolute; inset: 0; width: 100%; height: 100%; background: #000;">
            <div class="sidebar-media-placeholder audio">
                <div class="audio-track-info-badge">
                    <div class="audio-track-info-details">
                        <span class="audio-track-artist"></span>
                        <span class="audio-track-title"></span>
                    </div>
                </div>
                <div class="audio-cover-circle">
                    <i class="fa-solid fa-music"></i>
                </div>
            </div>
            <audio id="f0ck-album-audio" class="embed-responsive-item" preload="auto" loop crossorigin="anonymous"></audio>
        </div>
    </div>
    <!-- Album Gallery Controls Inside View -->
    <div class="album-controls-overlay">
        <button type="button" class="album-btn album-btn-prev" title="{{ t('album.prev') || 'Previous' }}" aria-label="Previous">
            <i class="fa-solid fa-chevron-left"></i>
        </button>
        <div class="album-counter-pill" title="Subf0cks">
            <i class="fa-solid fa-layer-group"></i>
            <span class="album-current-idx">1</span> / <span class="album-total-count">{{ item.album.length }}</span>
        </div>
        <button type="button" class="album-btn album-btn-next" title="{{ t('album.next') || 'Next' }}" aria-label="Next">
            <i class="fa-solid fa-chevron-right"></i>
        </button>
    </div>
    <!-- Album Thumbnail Strip (reveals on hover) -->
    <div class="album-thumbnails-strip">
        @each(item.album as img)
        <button type="button" class="album-thumb-item {{ img.is_first ? 'active' : '' }}" data-index="{{ img.order_index }}" data-subf0ck-id="{{ img.slug || img.id }}" data-subf0ck-slug="{{ img.slug || img.id }}" data-src="{{ img.src }}" data-mime="{{ img.mime }}" title="Subf0ck {{ img.slug || img.id }} ({{ img.display_index }}/{{ item.album.length }})">
            @if(img.is_audio && !img.has_coverart)
            <div class="sidebar-media-placeholder audio">
                <i class="fa-solid fa-music"></i>
            </div>
            @else
            <img src="{{ img.thumb || img.src }}" loading="lazy" alt="Subf0ck {{ img.slug || img.id }}" />
            @endif
            @if(img.is_video)
            <span class="album-thumb-mime-badge"><i class="fa-solid fa-play"></i></span>
            @elseif(img.is_audio)
            <span class="album-thumb-mime-badge"><i class="fa-solid fa-music"></i></span>
            @endif
        </button>
        @endeach
    </div>
    <button class="image-modal-btn" title="Open in modal"><i class="fa-solid fa-plus"></i></button>
</div>
@elseif(item.mime === 'video/youtube')
<div class="embed-responsive embed-responsive-16by9">
    <iframe id="yt-embed" class="embed-responsive-item" width="640" height="360" src="https://www.youtube.com/embed/{!! item.dest.replace('yt:', '') !!}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
@elseif(item.mime.startsWith("video"))
<div class="embed-responsive embed-responsive-16by9">
    <video id="my-video" class="embed-responsive-item" width="640" height="360" src="{{ item.dest }}" preload="auto" data-size="{{ item.size }}" loop playsinline></video>
</div>
@elseif(item.mime.startsWith("audio"))
<div class="embed-responsive embed-responsive-16by9" style="background: #000;">
    <div class="sidebar-media-placeholder audio @if(item.coverart)has-cover@endif">
        <div class="audio-reactive-bg"></div>
        <div class="audio-track-info-badge">
            <div class="audio-track-info-details">
                <span class="audio-track-artist"></span>
                <span class="audio-track-title"></span>
            </div>
        </div>
        <div class="audio-cover-circle" @if(item.coverart)style="background-image: url('{{ item.coverart }}');"@endif>
            <i class="fa-solid fa-music"></i>
        </div>
    </div>
    <audio id="my-video" class="embed-responsive-item" preload="auto" loop src="{{ item.dest }}" data-setup="{}" data-size="{{ item.size }}" @if(item.coverart)poster="{{ item.coverart }}"@endif type="{{ item.mime }}"></audio>
    <img id="f0ck-audio-cover" @if(item.coverart)src="{{ item.coverart }}"@endif style="display: none;">
</div>
@elseif(item.mime.startsWith("image"))
<div class="embed-responsive embed-responsive-16by9">
    <div class="embed-responsive-image" id="image-scroll">
        <a href="{{ item.dest }}" id="elfe" target="_blank"><img id="f0ck-image" class="img-fluid" src="{{ item.dest }}" loading="lazy" decoding="async" /></a>
    </div>
    <button class="image-modal-btn" title="Open in modal"><i class="fa-solid fa-plus"></i></button>
</div>
@elseif(item.mime === 'application/x-shockwave-flash' && enable_swf)
<div class="embed-responsive embed-responsive-16by9">
    <div id="ruffle-container" class="embed-responsive-item" data-swf="{{ item.dest }}"></div>
</div>
@elseif(item.mime === 'application/vnd.adobe.flash.movie' && enable_swf)
<div class="embed-responsive embed-responsive-16by9">
    <div id="ruffle-container" class="embed-responsive-item" data-swf="{{ item.dest }}"></div>
</div>
@elseif(item.mime === 'application/pdf' && enable_pdf)
<div class="embed-responsive embed-responsive-16by9" style="background: #fff;border: 1px solid #444; overflow: hidden;">
    <iframe class="embed-responsive-item" src="{{ item.dest }}#toolbar=0" sandbox="allow-scripts allow-same-origin" loading="lazy" style="border: none; overscroll-behavior: contain !important;"></iframe>
</div>
@elseif(is_archive_item)
<div class="embed-responsive embed-responsive-16by9 archive-download-view">
    <div class="archive-download-inner">
        <i class="fa-solid fa-file-zipper archive-download-icon"></i>
        <div class="archive-download-filename">{{ item.original_filename || item.dest.split('/').pop() }}</div>
        <div class="archive-download-size">{{ item.size }}</div>
        <a class="archive-download-btn" href="{{ item.dest }}" download>
            <i class="fa-solid fa-download"></i> Download
        </a>
    </div>
</div>
@else
<h1>404 - Not f0cked</h1>
@endif