From 04ecc3472802ec02f943a63683d3e311bfc19613 Mon Sep 17 00:00:00 2001
From: Doge <guiqiqi187@gmail.com>
Date: Sat, 8 May 2021 01:21:15 +0800
Subject: Add podcast player support

Thanks to Shikwasa :+1:
---
 layout/_partial/scripts.ejs |  2 +-
 layout/index.ejs            | 13 +++++++------
 layout/post.ejs             | 23 ++++++++++++++++++++++-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 1b20314..a60011f 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -19,7 +19,7 @@
 
 <!-- Highlight.js support -->
 <% if (theme.highlight.enable === true) { %> 
-    <script src="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
     <link id="highlight-light-theme" rel="stylesheet" 
         href="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/<%= theme.highlight.lightmode %>.min.css">
     <link id="highlight-dark-theme" rel="stylesheet"
diff --git a/layout/index.ejs b/layout/index.ejs
index ae1db98..42f1a4f 100644
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -24,14 +24,15 @@
 
             <!-- Post meta -->
             <div class="post-meta">
-                <% if (post.podcast && theme.podcast && post.duration) { %>
+                <% if (post.podcast && theme.podcast) { %>
                     <%
-                        const hour = Math.floor(post.duration / 3600);
-                        const minute = Math.floor((post.duration / 60) % 60);
-                        const second = Math.floor(post.duration % 60);
-                        const duration = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
+                        const duration = post.podcast.duration;
+                        const hour = Math.floor(duration / 3600);
+                        const minute = Math.floor((duration / 60) % 60);
+                        const second = Math.floor(duration % 60);
+                        const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
                     %>
-                    <div class="post-duration"><%- duration %></div>
+                    <div class="post-duration"><%- viewstr %></div>
                 <% } %>
                 <div class="post-time">
                     <%- date(post.date, "MMM, D YYYY") %> 
diff --git a/layout/post.ejs b/layout/post.ejs
index 0de6e5a..d83d694 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -2,10 +2,31 @@
     <!-- Post thumbnail with lazayload support -->
     <div class="post-thumbnail" style="background-image: url('<%= page.thumbnail %>');"></div>
 
+    <!-- Podcast Player using Shikwasa -->
+    <% if (page.podcast) { %> 
+        <div class="post-podcast-player"></div>
+        <script>
+            window.addEventListener("load", () => {
+                const player = new Shikwasa({
+                    container: () => document.querySelector('.post-podcast-player'),
+                    audio: {
+                        title: "<%= page.title %>",
+                        artist: "<%= page.podcast.author %>",
+                        cover: "<%= page.podcast.thumbnail %>",
+                        src: "<%= page.podcast.media %>"
+                    },
+                    fixed: {
+                        type: "static"
+                    }
+                });
+            }, false);
+        </script>
+    <% } %> 
+
     <!-- Post title and content -->
     <div class="post-meta">
         <div class="post-time">
-            <%- date(page.date, "MMM, D YYYY" ) %>
+            <%- date(page.date, "MMM, D YYYY") %>
         </div>
     </div>
     <h1 class="post-title"><%= page.title %></h1>
-- 
cgit v1.2.3