gfsdgsd

public/s/js/f0ckm.js

@@ -2725,14 +2725,526 @@ window.cancelAnimFrame = (function () {
     }, delay);
   };
 
+  const initAlbumGallery = () => {
+    const container = document.querySelector('.album-gallery-container');
+    if (!container) {
+      window._currentActiveAlbumGallery = null;
+      return;
+    }
+    if (container._f0ckAlbumInit) return;
+    container._f0ckAlbumInit = true;
+
+    let albumData = null;
+    const jsonScript = container.querySelector('.album-data-json, #album-data-json');
+    if (jsonScript && jsonScript.textContent) {
+      try {
+        albumData = JSON.parse(jsonScript.textContent);
+      } catch (e) {
+        console.warn('[ALBUM] Could not parse album script tag:', e);
+      }
+    }
+
+    if (!albumData) {
+      try {
+        let raw = container.getAttribute('data-album');
+        if (raw) {
+          if (raw.includes('"') || raw.includes('{') || raw.includes('&')) {
+            const txt = document.createElement('textarea');
+            txt.innerHTML = raw;
+            raw = txt.value;
+            if (raw.includes('"') || raw.includes('{')) {
+              txt.innerHTML = raw;
+              raw = txt.value;
+            }
+          }
+          albumData = JSON.parse(raw);
+        }
+      } catch (e) {
+        // Fallback to DOM elements below
+      }
+    }
+
+    // Fallback: build albumData directly from rendered thumbnail buttons
+    if (!Array.isArray(albumData) || albumData.length === 0) {
+      const thumbs = container.querySelectorAll('.album-thumb-item');
+      if (thumbs.length > 1) {
+        albumData = Array.from(thumbs).map((thumb, i) => {
+          const idx = parseInt(thumb.getAttribute('data-index'), 10);
+          const src = thumb.getAttribute('data-src') || thumb.querySelector('img')?.src || '';
+          const subSlug = thumb.getAttribute('data-subf0ck-slug') || thumb.getAttribute('data-subf0ck-id') || '';
+          return {
+            order_index: isNaN(idx) ? i : idx,
+            display_index: (isNaN(idx) ? i : idx) + 1,
+            src: src,
+            dest: src,
+            slug: subSlug,
+            subf0ck_id: subSlug,
+            id: subSlug
+          };
+        });
+      }
+    }
+
+    if (!Array.isArray(albumData) || albumData.length <= 1) return;
+
+    let currentIndex = 0;
+
+    const getHashSubf0ckId = () => {
+      return (window.location.hash || '').replace(/^#/, '').trim();
+    };
+
+    const initialHash = getHashSubf0ckId() || container.getAttribute('data-requested-subf0ck') || '';
+    if (initialHash) {
+      const foundIdx = albumData.findIndex(item =>
+        String(item.slug || '') === initialHash ||
+        String(item.subf0ck_id || '') === initialHash ||
+        String(item.id) === initialHash ||
+        String(item.order_index + 1) === initialHash
+      );
+      if (foundIdx !== -1) {
+        currentIndex = foundIdx;
+      }
+    }
+
+    const imgEl = container.querySelector('#f0ck-image');
+    const videoEl = container.querySelector('#f0ck-album-video');
+    const videoWrapper = container.querySelector('#f0ck-album-video-wrapper');
+    const audioWrapper = container.querySelector('#f0ck-album-audio-wrapper') || container.querySelector('#f0ck-album-audio-container');
+    const audioEl = container.querySelector('#f0ck-album-audio');
+    const linkEl = container.querySelector('#elfe, .album-stage-link');
+    const prevBtn = container.querySelector('.album-btn-prev');
+    const nextBtn = container.querySelector('.album-btn-next');
+    const currentIdxEl = container.querySelector('.album-current-idx');
+    const totalCountEl = container.querySelector('.album-total-count');
+    const thumbItems = container.querySelectorAll('.album-thumb-item');
+    const stripEl = container.querySelector('.album-thumbnails-strip');
+
+    if (totalCountEl) totalCountEl.textContent = albumData.length;
+
+    let albumVideoV0ck = null;
+    const initAlbumVideoV0ck = () => {
+      if (albumVideoV0ck) return albumVideoV0ck;
+      if (videoEl && typeof v0ck === 'function') {
+        try {
+          albumVideoV0ck = new v0ck(videoEl);
+        } catch (e) {
+          console.warn('[ALBUM] Could not init v0ck for album video:', e);
+        }
+      }
+      return albumVideoV0ck;
+    };
+
+    let albumAudioV0ck = null;
+    const initAlbumAudioV0ck = () => {
+      if (albumAudioV0ck) return albumAudioV0ck;
+      if (audioEl && typeof v0ck === 'function') {
+        try {
+          albumAudioV0ck = new v0ck(audioEl);
+        } catch (e) {
+          console.warn('[ALBUM] Could not init v0ck for album audio:', e);
+        }
+      }
+      return albumAudioV0ck;
+    };
+
+    const preloadedImages = new Set();
+    const preload = (idx) => {
+      if (idx < 0 || idx >= albumData.length) return;
+      const sub = albumData[idx];
+      if (!sub) return;
+      const src = sub.src || sub.dest;
+      const mime = (sub.mime || '').toLowerCase();
+      if (src && !mime.startsWith('video/') && !mime.startsWith('audio/') && !preloadedImages.has(src)) {
+        const i = new Image();
+        i.src = src;
+        preloadedImages.add(src);
+      }
+    };
+
+    preload(1);
+    if (albumData.length > 2) preload(albumData.length - 1);
+
+    const isBlurred = () => {
+      const mediaObj = container.closest('.media-object') || document.querySelector('.media-object');
+      if (mediaObj && localStorage.getItem('blurDetail') !== 'false') {
+        const mode = mediaObj.getAttribute('data-mode');
+        const blurNsfw = localStorage.getItem('blurNsfw') === 'true';
+        const blurNsfl = localStorage.getItem('blurNsfl') === 'true';
+        const blurSfw = localStorage.getItem('blurSfw') === 'true';
+        const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
+        let shouldBlurThis = false;
+        if (mode === 'nsfw') shouldBlurThis = blurNsfw;
+        else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
+        else if (mode === 'sfw') shouldBlurThis = blurSfw;
+        else if (mode === 'untagged') shouldBlurThis = blurUntagged;
+        if (shouldBlurThis && !mediaObj.classList.contains('revealed')) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    const isAutoplayAllowed = () => {
+      return !isBlurred() && window.f0ckSession?.disable_autoplay !== true;
+    };
+
+    const showImage = (index, direction = 'none', updateHash = true) => {
+      if (index < 0) index = albumData.length - 1;
+      if (index >= albumData.length) index = 0;
+      currentIndex = index;
+
+      const item = albumData[currentIndex];
+      if (!item) return;
+
+      const newSrc = item.src || item.dest;
+      const mime = (item.mime || '').toLowerCase();
+
+      // Update URL hash with subf0ck slug (or id fallback) so links are shareable directly to this subf0ck
+      const subKey = item.slug || item.subf0ck_id || item.id;
+      if (updateHash && subKey) {
+        history.replaceState(null, '', window.location.pathname + window.location.search + '#' + subKey);
+      }
+
+      // Pause any playing audio or video
+      if (videoEl && !videoEl.paused) {
+        try { videoEl.pause(); } catch {}
+      }
+      if (audioEl && !audioEl.paused) {
+        try { audioEl.pause(); } catch {}
+      }
+
+      if (mime.startsWith('video/')) {
+        container.classList.add('is-video-active');
+        container.classList.remove('is-audio-active');
+        if (imgEl) imgEl.style.display = 'none';
+        if (linkEl) linkEl.style.display = 'none';
+        if (audioWrapper) audioWrapper.style.display = 'none';
+
+        if (videoWrapper) videoWrapper.style.display = 'block';
+        if (videoEl) {
+          videoEl.style.display = 'block';
+
+          if (videoEl.src !== newSrc && !videoEl.src.endsWith(newSrc)) {
+            videoEl.src = newSrc;
+            videoEl.load();
+          }
+
+          initAlbumVideoV0ck();
+          video = videoEl;
+
+          if (item.size && videoWrapper) {
+            const dlBtn = videoWrapper.querySelector('#v0ck_download');
+            if (dlBtn) dlBtn.textContent = `Download (${item.size})`;
+          }
+
+          const playerWrap = videoWrapper.querySelector('.v0ck') || videoWrapper;
+          if (isAutoplayAllowed()) {
+            const playPromise = videoEl.play();
+            if (playPromise !== undefined) {
+              playPromise.catch(() => {
+                playerWrap.classList.add('v0ck_initial');
+              });
+            }
+          } else {
+            try { videoEl.pause(); } catch {}
+            playerWrap.classList.add('v0ck_initial');
+          }
+        }
+      } else if (mime.startsWith('audio/')) {
+        container.classList.remove('is-video-active');
+        container.classList.add('is-audio-active');
+        if (videoEl) {
+          try { videoEl.pause(); } catch {}
+        }
+        if (videoWrapper) videoWrapper.style.display = 'none';
+        if (imgEl) imgEl.style.display = 'none';
+        if (linkEl) linkEl.style.display = 'none';
+
+        if (audioWrapper) {
+          audioWrapper.style.display = 'block';
+          const coverUrl = item.coverart || item.thumb || '/s/img/audio.webp';
+          audioWrapper.style.backgroundImage = `url('${coverUrl}')`;
+          audioWrapper.style.backgroundRepeat = 'no-repeat';
+          audioWrapper.style.backgroundPosition = 'center';
+          audioWrapper.style.backgroundSize = 'contain';
+          audioWrapper.style.backgroundColor = 'black';
+        }
+
+        if (audioEl) {
+          audioEl.style.display = 'block';
+
+          if (audioEl.src !== newSrc && !audioEl.src.endsWith(newSrc)) {
+            audioEl.src = newSrc;
+            audioEl.load();
+          }
+
+          initAlbumAudioV0ck();
+          video = audioEl;
+
+          if (item.size && audioWrapper) {
+            const dlBtn = audioWrapper.querySelector('#v0ck_download');
+            if (dlBtn) dlBtn.textContent = `Download (${item.size})`;
+          }
+
+          const playerWrap = audioWrapper.querySelector('.v0ck') || audioWrapper;
+          if (isAutoplayAllowed()) {
+            const playPromise = audioEl.play();
+            if (playPromise !== undefined) {
+              playPromise.catch(() => {
+                playerWrap.classList.add('v0ck_initial');
+              });
+            }
+          } else {
+            try { audioEl.pause(); } catch {}
+            playerWrap.classList.add('v0ck_initial');
+          }
+        }
+      } else {
+        // Image
+        container.classList.remove('is-video-active', 'is-audio-active');
+        if (videoEl) {
+          try { videoEl.pause(); } catch {}
+        }
+        if (audioEl) {
+          try { audioEl.pause(); } catch {}
+        }
+        if (videoWrapper) videoWrapper.style.display = 'none';
+        if (audioWrapper) audioWrapper.style.display = 'none';
+        if (linkEl) {
+          linkEl.style.display = '';
+          linkEl.href = newSrc;
+        }
+        if (imgEl) {
+          imgEl.style.display = 'block';
+          imgEl.classList.remove('album-img-fade');
+          void imgEl.offsetWidth; // trigger reflow
+          imgEl.src = newSrc;
+          imgEl.classList.add('album-img-fade');
+        }
+        video = null;
+      }
+
+      if (linkEl && !mime.startsWith('video/')) {
+        linkEl.href = newSrc;
+      }
+
+      if (currentIdxEl) {
+        currentIdxEl.textContent = currentIndex + 1;
+      }
+
+      thumbItems.forEach((btn, idx) => {
+        const isActive = idx === currentIndex;
+        btn.classList.toggle('active', isActive);
+        if (isActive) {
+          btn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+        }
+      });
+
+      updateInfoModal();
+
+      preload(currentIndex + 1);
+      preload(currentIndex - 1);
+    };
+
+    const updateInfoModal = () => {
+      const modal = document.getElementById('info-modal');
+      if (!modal) return;
+      const sub = albumData[currentIndex];
+      if (!sub) return;
+
+      const subHeading = modal.querySelector('#info-modal-subheading');
+      if (subHeading) {
+        const parentId = subHeading.getAttribute('data-item-id') || container.getAttribute('data-album-id') || '';
+        const parentSlug = subHeading.getAttribute('data-item-slug') || '';
+        const subSlug = sub.slug || sub.subf0ck_id || sub.id;
+        const total = albumData.length;
+        const idx = currentIndex + 1;
+        subHeading.innerHTML = `Post ID: <code>${parentId}</code>${parentSlug ? ` <span class="text-muted">(${parentSlug})</span>` : ''} &bull; Subf0ck: <code>${subSlug}</code> <span class="text-muted">(${idx}/${total})</span>`;
+      }
+
+      const specsTitle = modal.querySelector('#info-specs-header-title');
+      if (specsTitle) {
+        specsTitle.textContent = `Technical Specifications (Subf0ck ${currentIndex + 1}/${albumData.length})`;
+      }
+
+      const fileSizeEl = modal.querySelector('#info-file-size');
+      if (fileSizeEl) {
+        fileSizeEl.textContent = sub.size || '';
+      }
+
+      const dimsCard = modal.querySelector('#info-card-dimensions');
+      const dimsEl = modal.querySelector('#info-file-dimensions');
+      if (dimsCard && dimsEl) {
+        if (sub.width && sub.height) {
+          dimsEl.textContent = `${sub.width} × ${sub.height} px`;
+          dimsCard.style.display = '';
+        } else {
+          dimsCard.style.display = 'none';
+        }
+      }
+
+      const mimeEl = modal.querySelector('#info-file-mime');
+      if (mimeEl) {
+        mimeEl.textContent = sub.mime || '';
+      }
+
+      const directLink = modal.querySelector('#info-file-direct-link');
+      if (directLink) {
+        directLink.href = sub.dest || sub.src || '#';
+      }
+
+      const sourceCard = modal.querySelector('#info-card-source');
+      if (sourceCard) {
+        sourceCard.style.display = 'none';
+      }
+
+      const hashCard = modal.querySelector('#info-card-hash');
+      const hashEl = modal.querySelector('#info-file-hash');
+      const copyHashBtn = modal.querySelector('#info-copy-hash-btn');
+      if (hashCard) {
+        const cleanHash = sub.checksum ? String(sub.checksum).split('_bypass_')[0] : '';
+        if (cleanHash) {
+          if (hashEl) hashEl.textContent = cleanHash;
+          if (copyHashBtn) copyHashBtn.setAttribute('data-hash', cleanHash);
+          hashCard.style.display = '';
+        } else {
+          hashCard.style.display = 'none';
+        }
+      }
+    };
+
+    if (imgEl) {
+      imgEl.addEventListener('load', () => {
+        const sub = albumData[currentIndex];
+        if (sub && (!sub.width || !sub.height) && imgEl.naturalWidth) {
+          sub.width = imgEl.naturalWidth;
+          sub.height = imgEl.naturalHeight;
+          updateInfoModal();
+        }
+      });
+    }
+    if (videoEl) {
+      videoEl.addEventListener('loadedmetadata', () => {
+        const sub = albumData[currentIndex];
+        if (sub && (!sub.width || !sub.height) && videoEl.videoWidth) {
+          sub.width = videoEl.videoWidth;
+          sub.height = videoEl.videoHeight;
+          updateInfoModal();
+        }
+      });
+    }
+
+    // Ensure proper initial media display (especially if initial item is video or subf0ck hash was requested)
+    showImage(currentIndex, 'none', !!initialHash);
+
+    if (prevBtn) {
+      prevBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        showImage(currentIndex - 1, 'prev');
+      });
+    }
+
+    if (nextBtn) {
+      nextBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        showImage(currentIndex + 1, 'next');
+      });
+    }
+
+    thumbItems.forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const targetIdx = parseInt(btn.getAttribute('data-index'), 10);
+        if (!isNaN(targetIdx)) {
+          showImage(targetIdx);
+        }
+      });
+    });
+
+    // Touch tap on container reveals thumbnail strip briefly on touch devices
+    let stripTimeout = null;
+    container.addEventListener('click', (e) => {
+      if (stripEl && !e.target.closest('.album-thumbnails-strip, .v0ck_player_controls, .v0ck_settings_menu, .v0ck_hud, .album-btn')) {
+        stripEl.classList.add('is-visible');
+        clearTimeout(stripTimeout);
+        stripTimeout = setTimeout(() => {
+          stripEl.classList.remove('is-visible');
+        }, 3500);
+      }
+    });
+
+    // Hashchange listener for forward/backward browser navigation
+    const hashChangeHandler = () => {
+      const newHash = getHashSubf0ckId();
+      if (!newHash) return;
+      const targetIdx = albumData.findIndex(item =>
+        String(item.slug || '') === newHash ||
+        String(item.subf0ck_id || '') === newHash ||
+        String(item.id) === newHash ||
+        String(item.order_index + 1) === newHash
+      );
+      if (targetIdx !== -1 && targetIdx !== currentIndex) {
+        showImage(targetIdx, 'none', false);
+      }
+    };
+    window.addEventListener('hashchange', hashChangeHandler);
+
+    // Touch swipe support on album container
+    let touchStartX = 0;
+    let touchStartY = 0;
+    container.addEventListener('touchstart', (e) => {
+      if (e.target.closest('.v0ck_player_controls, .v0ck_settings_menu, input[type="range"]')) return;
+      if (e.touches && e.touches.length === 1) {
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+      }
+    }, { passive: true });
+
+    container.addEventListener('touchend', (e) => {
+      if (e.target.closest('.v0ck_player_controls, .v0ck_settings_menu, input[type="range"]')) return;
+      if (e.changedTouches && e.changedTouches.length === 1) {
+        const diffX = e.changedTouches[0].clientX - touchStartX;
+        const diffY = e.changedTouches[0].clientY - touchStartY;
+        if (Math.abs(diffX) > 40 && Math.abs(diffX) > Math.abs(diffY) * 1.5) {
+          if (diffX > 0) {
+            showImage(currentIndex - 1, 'prev');
+          } else {
+            showImage(currentIndex + 1, 'next');
+          }
+        }
+      }
+    }, { passive: true });
+
+    window._currentActiveAlbumGallery = {
+      prev: () => showImage(currentIndex - 1, 'prev'),
+      next: () => showImage(currentIndex + 1, 'next'),
+      updateInfoModal: updateInfoModal,
+      getCurrentSubf0ck: () => albumData[currentIndex],
+      isHovered: false
+    };
+
+    container.addEventListener('mouseenter', () => {
+      if (window._currentActiveAlbumGallery) window._currentActiveAlbumGallery.isHovered = true;
+    });
+    container.addEventListener('mouseleave', () => {
+      if (window._currentActiveAlbumGallery) window._currentActiveAlbumGallery.isHovered = false;
+    });
+  };
+
   const setupMedia = () => {
+    window._currentActiveAlbumGallery = null;
     const elem = document.querySelector("#my-video") || document.querySelector("audio#my-video");
     if (elem) {
       video = new v0ck(elem);
     } else {
       video = null;
     }
+    initAlbumGallery();
   };
+  document.addEventListener('f0ck:contentLoaded', initAlbumGallery);
 
   const initOnaraInitialState = () => {
     if (!isOnaraActive()) return;
@@ -6219,6 +6731,15 @@ window.cancelAnimFrame = (function () {
   // <keybindings>
   const clickOnElementBinding = selector => () => (elem = document.querySelector(selector)) ? elem.click() : null;
   const clickOnNavBinding = (directionOrSelector) => () => {
+    if (window._currentActiveAlbumGallery && window._currentActiveAlbumGallery.isHovered) {
+      if (directionOrSelector === 'prev' || directionOrSelector === '#prev') {
+        window._currentActiveAlbumGallery.prev();
+        return;
+      } else if (directionOrSelector === 'next' || directionOrSelector === '#next') {
+        window._currentActiveAlbumGallery.next();
+        return;
+      }
+    }
     let el;
     if (directionOrSelector === 'prev' || directionOrSelector === '#prev') {
       el = document.querySelector(".steuerung .nav-prev:not([href='#']), .nav-prev:not([href='#']), #prev:not([href='#'])") || document.querySelector('.nav-prev') || document.getElementById('prev');
@@ -6252,6 +6773,8 @@ window.cancelAnimFrame = (function () {
     "7": () => seekToPercentage(0.7),
     "8": () => seekToPercentage(0.8),
     "9": () => seekToPercentage(0.9),
+    "[": () => window._currentActiveAlbumGallery?.prev(),
+    "]": () => window._currentActiveAlbumGallery?.next(),
     "ArrowLeft": clickOnNavBinding("prev"),
     "a": clickOnNavBinding("prev"),
     "ArrowRight": clickOnNavBinding("next"),
@@ -14018,6 +14541,9 @@ document.addEventListener('click', (e) => {
     const infoBtn = e.target.closest('#a_info');
     if (infoBtn) {
       e.preventDefault();
+      if (window._currentActiveAlbumGallery && typeof window._currentActiveAlbumGallery.updateInfoModal === 'function') {
+        window._currentActiveAlbumGallery.updateInfoModal();
+      }
       const modal = document.getElementById('info-modal');
       if (modal) {
         modal.style.display = 'flex';