1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<div class="columns">
<div class="column is-8 is-offset-2">
<div class="card">
<% if (page.thumbnail) { %>
<div class="card-iamge">
<figure class="image is-16by9">
<% if (theme.lazyload === true) { %>
<img class="lazy" data-src="<%= page.thumbnail %>" />
<% } else { %>
<img src="<%= page.thumbnail %>" />
<% } %>
</figure>
</div>
<% } %>
<div class="card-content post-card">
<h2 class="title has-text-centered">
<%= page.title %>
</h2>
<% if (page.podcast) { %>
<script>let chapters = [];</script>
<div class="post-podcast-player"></div>
<% if (page.podcast.chapters) { %>
<%
let final = page.podcast.duration;
let timestamps = [];
let data = page.podcast.chapters;
let chapters = [];
(data).forEach((chapter) => {
timestamps.push(chapter[1]);
});
timestamps.push(final);
for (let index = 0; index < timestamps.length - 1; index++) {
let start = timestamps[index];
let end = timestamps[index + 1];
chapters.push({
title: data[index][0],
startTime: start, endTime: end
});
};
%>
<script>
chapters = JSON.parse('<%- JSON.stringify(chapters) %>');
</script>
<% } %>
<script>
window.addEventListener("load", () => {
if (chapters !== [])
Shikwasa.use(Chapter);
const player = new Shikwasa({
container: () => document.querySelector('.post-podcast-player'),
audio: {
title: "<%= page.title %>",
artist: "<%= page.podcast.authors %>",
cover: "<%= page.podcast.cover %>",
src: "<%= page.podcast.media.url %>",
chapters: chapters
},
fixed: {
type: "auto",
position: "bottom"
},
themeColor: "red"
});
window.player = player;
}, false);
</script>
<% } %>
<section class="content is-size-6">
<%- page.content %>
</section>
<div class="level">
<div class="level-left">
<div class="level-item">
<% if (page.tags) { %>
<div class="tags">
<span class="tag">
<%- date(page.date, theme.timeformat) %>
</span>
<% (page.tags).forEach(function(item) { %>
<span class="tag"># <%= item.name %></span>
<% }); %>
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
|