modified recordings/recordings-plain.html

1 files changed, 73 insertions, 10 deletions

diff --git a/layouts/recordings/recordings-plain.html b/layouts/recordings/recordings-plain.html
index 27209dd..7a5f752 100644
--- a/layouts/recordings/recordings-plain.html
+++ b/layouts/recordings/recordings-plain.html
@@ -39,6 +39,11 @@
         height: auto;
         margin: 12px 0;
       }
+      img.preview {
+        width: 100%;
+        height: auto;
+        margin: 12px 0;
+      }
       .badge {
         font-size: 0.8rem;
         border: 1px solid #ccc;
@@ -57,13 +62,14 @@
     <!-- 인라인 플레이어 -->
     <div id="player" style="display: none">
       <video id="video" controls preload="metadata"></video>
+      <img id="image" class="preview" alt="" style="display:none" />
       <div id="meta" class="meta"></div>
     </div>
 
     <ul id="list">
       <!-- 1) 섹션 폴더 바로 아래 mp4/mov (섹션 리소스) -->
-      {{ $secVids := .Resources.Match "*.{mp4,mov}" }} {{ range $v := $secVids
-      }}
+      {{ $secVids := .Resources.Match "*.{mp4,mov}" }}
+      {{ range $v := $secVids }}
       <li>
         <a href="{{ $v.RelPermalink }}" data-name="{{ $v.Name }}" class="vid"
           >{{ $v.Name }}</a
@@ -72,9 +78,33 @@
       </li>
       {{ end }}
 
+      <!-- 1-3) 섹션 폴더 바로 아래 HEIC (다운로드/새 탭 열기 전용) -->
+      {{ $secHeic := .Resources.Match "*.{heic,HEIC}" }}
+      {{ range $h := $secHeic }}
+      <li>
+        <a href="{{ $h.RelPermalink }}" data-name="{{ $h.Name }}" class="heic"
+          >{{ $h.Name }}</a
+        >
+        <span class="badge">heic</span>
+      </li>
+      {{ end }}
+
+      <!-- 1-2) 섹션 폴더 바로 아래 이미지/GIF (섹션 리소스) -->
+      {{ $secImgs := .Resources.Match "*.{jpg,jpeg,png,gif,webp,svg}" }}
+      {{ range $i := $secImgs }}
+      <li>
+        <a href="{{ $i.RelPermalink }}" data-name="{{ $i.Name }}" class="img"
+          >{{ $i.Name }}</a
+        >
+        <span class="badge">image</span>
+      </li>
+      {{ end }}
+
       <!-- 2) 자식 페이지들 (노트/동영상 페이지) -->
-      {{ range $p := .Pages.ByDate.Reverse }} {{ $vid := $p.Resources.GetMatch
-      "*.{mp4,mov}" }}
+      {{ range $p := .Pages.ByDate.Reverse }}
+      {{ $vid := $p.Resources.GetMatch "*.{mp4,mov}" }}
+      {{ $img := $p.Resources.GetMatch "*.{jpg,jpeg,png,gif,webp,svg}" }}
+      {{ $heic := $p.Resources.GetMatch "*.{heic,HEIC}" }}
       <li>
         {{ if $vid }}
         <a
@@ -86,6 +116,26 @@
         </a>
         <span class="badge">video</span>
         <div class="meta">{{ $p.Date.Format "2006-01-02" }}</div>
+        {{ else if $img }}
+        <a
+          href="{{ $img.RelPermalink }}"
+          data-name="{{ or $p.Title $img.Name }}"
+          class="img"
+        >
+          {{ with $p.Title }}{{ . }}{{ else }}{{ $img.Name }}{{ end }}
+        </a>
+        <span class="badge">image</span>
+        <div class="meta">{{ $p.Date.Format "2006-01-02" }}</div>
+        {{ else if $heic }}
+        <a
+          href="{{ $heic.RelPermalink }}"
+          data-name="{{ or $p.Title $heic.Name }}"
+          class="heic"
+        >
+          {{ with $p.Title }}{{ . }}{{ else }}{{ $heic.Name }}{{ end }}
+        </a>
+        <span class="badge">heic</span>
+        <div class="meta">{{ $p.Date.Format "2006-01-02" }}</div>
         {{ else }}
         <a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a>
         <span class="badge">note</span>
@@ -102,15 +152,28 @@
         const list = document.getElementById("list");
         const wrap = document.getElementById("player");
         const video = document.getElementById("video");
+        const image = document.getElementById("image");
         const meta = document.getElementById("meta");
         list.addEventListener("click", (e) => {
-          const a = e.target.closest("a.vid");
-          if (!a) return; // note는 링크로 이동
-          e.preventDefault(); // video는 인라인 재생
-          video.src = a.getAttribute("href");
-          video.play().catch(() => {});
+          const vid = e.target.closest("a.vid");
+          const img = e.target.closest("a.img");
+          if (!vid && !img) return; // note는 링크로 이동
+          e.preventDefault(); // 미디어는 인라인 표시
           wrap.style.display = "";
-          meta.textContent = a.dataset.name || a.textContent.trim();
+          meta.textContent = (vid || img).dataset.name || (vid || img).textContent.trim();
+          if (vid) {
+            image.style.display = "none";
+            image.removeAttribute("src");
+            video.style.display = "";
+            video.src = vid.getAttribute("href");
+            video.play().catch(() => {});
+          } else if (img) {
+            video.pause();
+            video.removeAttribute("src");
+            video.style.display = "none";
+            image.style.display = "";
+            image.src = img.getAttribute("href");
+          }
           wrap.scrollIntoView({ behavior: "smooth", block: "nearest" });
         });
       });