require item revealing when user wants it

views/item-partial-legacy.html

@@ -22,7 +22,7 @@
                 </div>
                 @endif
             </div>
-            <div class="media-object">
+            <div class="media-object" data-mode="@if(item.is_nsfl)nsfl@elseif(item.is_nsfw)nsfw@elseif(item.is_sfw)sfw@elseuntagged@endif">
                 @include(snippets/item-media)
             </div>
             <div class="next-post">

views/item-partial-modern.html

@@ -65,7 +65,7 @@
                 </div>
                 @endif
             </div>
-            <div class="media-object">
+            <div class="media-object" data-mode="@if(item.is_nsfl)nsfl@elseif(item.is_nsfw)nsfw@elseif(item.is_sfw)sfw@elseuntagged@endif">
                 @include(snippets/item-media)
             </div>
             <div class="next-post">

views/settings.html

@@ -319,6 +319,13 @@
             </label>
             <small class="text-muted" style="margin-left: 25px;">{{ t('settings.blur_untagged_hint') }}</small>
           </div>
+          <div class="setting-item" style="margin-top: 15px; border-top: 1px dashed var(--nav-border-color); padding-top: 15px;">
+            <label for="blur_detail_toggle" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
+              <input type="checkbox" id="blur_detail_toggle">
+              <span>{{ t('settings.blur_detail') || 'Click to reveal item on detail page' }}</span>
+            </label>
+            <small class="text-muted" style="margin-left: 25px;">{{ t('settings.blur_detail_hint') || 'Require clicking to reveal blurred media on the post detail page instead of showing it immediately.' }}</small>
+          </div>
         </fieldset>
 
         <fieldset

views/snippets/item-media.html

@@ -8,7 +8,7 @@
 </div>
 @elseif(item.mime.startsWith("audio"))
 <div class="embed-responsive embed-responsive-16by9" style="background: url('@if(item.coverart)//w0bm.com{{ item.coverart }}@else/s/img/200.gif@endif') no-repeat center / contain black;">
-    <audio id="my-video" class="embed-responsive-item" autoplay loop src="{{ item.dest }}" data-setup="{}" data-size="{{ item.size }}" poster="@if(item.coverart){{ item.coverart }}@else/s/img/200.gif@endif" type="{{ item.mime }}"></audio>
+    <audio id="my-video" class="embed-responsive-item" loop src="{{ item.dest }}" data-setup="{}" data-size="{{ item.size }}" poster="@if(item.coverart){{ item.coverart }}@else/s/img/200.gif@endif" type="{{ item.mime }}"></audio>
     <img id="f0ck-audio-cover" src="@if(item.coverart){{ item.coverart }}@else/s/img/200.gif@endif" style="display: none;">
 </div>
 @elseif(item.mime.startsWith("image"))