-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
273 lines (232 loc) · 15.7 KB
/
index.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<!--
_________________ ______ _ _
|_ _| ___ \ ___ \ | ___ \ | | | |
| | | |_/ / |_/ / | |_/ /__ __| | ___ __ _ ___| |_
| | | /| ___ \ | __/ _ \ / _` |/ __/ _` / __| __|
| | | |\ \| |_/ / | | | (_) | (_| | (_| (_| \__ \ |_
\_/ \_| \_\____/ \_| \___/ \__,_|\___\__,_|___/\__|
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRB podcast</title>
<meta name="description"
content="Weekly Thoughts by TRB (teeaarbee) A weekly podcast where TRB talks on a new topic every week ">
<meta name="keywords"
content="TRB, TEEAARBEE, tearbear, teerbee, teearrbee, trb podcast, podcast by trb, podcast, weekly podcast by trb, thoughts by trb, weekly thoughts trb">
<meta name="robots" content="index, follow">
<meta name="copyright" content="TRB">
<meta name="language" content="EN">
<meta name="author" content="teeaarbee">
<meta property="og:image" content="https://podcast.teeaarbee.com/cover.png">
<meta property="og:url" content="https://podcast.teeaarbee.com">
<meta name="language" content="EN">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@teeaarbee">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="TRB'S Weekly Podcast">
<meta itemprop="description"
content="Weekly Thoughts by TRB (teeaarbee) A weekly podcast where TRB talks on a new topic every week ">
<meta itemprop="image" content="">
<link rel="stylesheet" href="https://bootswatch.com/5/solar/bootstrap.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.0/css/all.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<style>
body {
min-height: 100vh;
color: white;
}
.pfp {
max-width: 100%;
height: auto;
}
.title {
font-family: 'Staatliches', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a {
color: #85e0d8;
text-decoration: none;
}
.speedcontrolcontainer {
max-width: 30em;
display: block;
padding: 10px;
font-family: Sans-serif;
}
.speedcontrolcontainer audio {
width: 100%;
display: block;
}
.speedcontrolcontainer div {
display: flex;
padding: .5em 0;
gap: 5px;
}
.speedcontrolcontainer label {
flex: 1
}
.speedcontrolcontainer input[type="range"] {
flex: 5
}
.speedcontrolcontainer span {
flex: 1;
text-align: center;
}
</style>
<!--testing-->
<body class="">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-8 col-md-12 mx-auto mt-4">
<div class="showPodcasts">
<div class="about d-flex justify-content-evenly align-items-center flex-column flex-sm-row">
<img src="" alt="" class="pfp rounded col-md-4 col-lg-4">
<div class="m-3 ">
<h1 class="title text-light"></h1>
<p class="intro "></p>
<p class="description"></p>
<div>
<p><b>Available on</b></p>
<a class="" href="https://open.spotify.com/show/4trdW2XGrcBnqxBBhgInC7?ref=podcast.teeaarbee.com
" target="_blank" rel="noopener noreferrer"><i
class="fab fa-spotify fa-2x "></i></a>
<a class="mx-2"
href="https://podcasts.apple.com/podcast/id1576174284?mt=2&app=podcast&ls=1?ref=podcast.teeaarbee.com"
target="_blank" rel="noopener noreferrer"><i
class="far fa-podcast fa-2x "></i></a>
<a class="mx-2"
href="https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy82Mjk5MjI3OC9wb2RjYXN0L3Jzcw?ref=podcast.teeaarbee.com"
target="_blank" rel="noopener noreferrer"><i class="fab fa-google fa-2x"
aria-hidden="true"></i></a>
<a class="mx-2"
href="https://music.amazon.in/podcasts/07eb76f7-7256-4cb8-b831-12c7675b7d48/TRBS-WEEKLY-THOUGHTS"
target="_blank" rel="noopener noreferrer"><i class="fab fa-amazon fa-2x"
aria-hidden="true"></i></a>
</div>
<p>Or Search <b>teeaarbee</b> On Your Favourite Podcast App</p>
</div>
</div>
<hr>
<div class="podcastContainer">
</div>
</div>
</div>
</div>
</div>
<footer class="text-center">
<p class="p-2">
Copyright © 2021. TEEAARBEE.
</p>
<div class="d-flex justify-content-center align-items-center mb-5">
</a>
<a href="https://www.instagram.com/teeaarbee/?ref=blog.teeaarbee.com" target="_blank" rel="noreferrer"
title="instagram" aria-label="instagram" class="mx-3">
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="25" height="25">
<path fill="currentColor"
d="M 11.46875 5 C 7.917969 5 5 7.914063 5 11.46875 L 5 20.53125 C 5 24.082031 7.914063 27 11.46875 27 L 20.53125 27 C 24.082031 27 27 24.085938 27 20.53125 L 27 11.46875 C 27 7.917969 24.085938 5 20.53125 5 Z M 11.46875 7 L 20.53125 7 C 23.003906 7 25 8.996094 25 11.46875 L 25 20.53125 C 25 23.003906 23.003906 25 20.53125 25 L 11.46875 25 C 8.996094 25 7 23.003906 7 20.53125 L 7 11.46875 C 7 8.996094 8.996094 7 11.46875 7 Z M 21.90625 9.1875 C 21.402344 9.1875 21 9.589844 21 10.09375 C 21 10.597656 21.402344 11 21.90625 11 C 22.410156 11 22.8125 10.597656 22.8125 10.09375 C 22.8125 9.589844 22.410156 9.1875 21.90625 9.1875 Z M 16 10 C 12.699219 10 10 12.699219 10 16 C 10 19.300781 12.699219 22 16 22 C 19.300781 22 22 19.300781 22 16 C 22 12.699219 19.300781 10 16 10 Z M 16 12 C 18.222656 12 20 13.777344 20 16 C 20 18.222656 18.222656 20 16 20 C 13.777344 20 12 18.222656 12 16 C 12 13.777344 13.777344 12 16 12 Z">
</path>
</svg>
</a>
<a href="https://blog.teeaarbee.com" target="_blank" rel="noreferrer" title="goodreads"
aria-label="goodreads" class="mx-3">
<i class="fa fa-globe" aria-hidden="true"></i>
<a href="https://t.me/teeaarbee" target="_blank" rel="noreferrer" title="telegram" aria-label="telegram"
class="mx-3">
<svg data-name="telegram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="25"
height="25">
<path fill="currentColor"
d="M 26.070313 3.996094 C 25.734375 4.011719 25.417969 4.109375 25.136719 4.21875 L 25.132813 4.21875 C 24.847656 4.332031 23.492188 4.902344 21.433594 5.765625 C 19.375 6.632813 16.703125 7.757813 14.050781 8.875 C 8.753906 11.105469 3.546875 13.300781 3.546875 13.300781 L 3.609375 13.277344 C 3.609375 13.277344 3.25 13.394531 2.875 13.652344 C 2.683594 13.777344 2.472656 13.949219 2.289063 14.21875 C 2.105469 14.488281 1.957031 14.902344 2.011719 15.328125 C 2.101563 16.050781 2.570313 16.484375 2.90625 16.722656 C 3.246094 16.964844 3.570313 17.078125 3.570313 17.078125 L 3.578125 17.078125 L 8.460938 18.722656 C 8.679688 19.425781 9.949219 23.597656 10.253906 24.558594 C 10.433594 25.132813 10.609375 25.492188 10.828125 25.765625 C 10.933594 25.90625 11.058594 26.023438 11.207031 26.117188 C 11.265625 26.152344 11.328125 26.179688 11.390625 26.203125 C 11.410156 26.214844 11.429688 26.21875 11.453125 26.222656 L 11.402344 26.210938 C 11.417969 26.214844 11.429688 26.226563 11.441406 26.230469 C 11.480469 26.242188 11.507813 26.246094 11.558594 26.253906 C 12.332031 26.488281 12.953125 26.007813 12.953125 26.007813 L 12.988281 25.980469 L 15.871094 23.355469 L 20.703125 27.0625 L 20.8125 27.109375 C 21.820313 27.550781 22.839844 27.304688 23.378906 26.871094 C 23.921875 26.433594 24.132813 25.875 24.132813 25.875 L 24.167969 25.785156 L 27.902344 6.65625 C 28.007813 6.183594 28.035156 5.742188 27.917969 5.3125 C 27.800781 4.882813 27.5 4.480469 27.136719 4.265625 C 26.769531 4.046875 26.40625 3.980469 26.070313 3.996094 Z M 25.96875 6.046875 C 25.964844 6.109375 25.976563 6.101563 25.949219 6.222656 L 25.949219 6.234375 L 22.25 25.164063 C 22.234375 25.191406 22.207031 25.25 22.132813 25.308594 C 22.054688 25.371094 21.992188 25.410156 21.667969 25.28125 L 15.757813 20.75 L 12.1875 24.003906 L 12.9375 19.214844 C 12.9375 19.214844 22.195313 10.585938 22.59375 10.214844 C 22.992188 9.84375 22.859375 9.765625 22.859375 9.765625 C 22.886719 9.3125 22.257813 9.632813 22.257813 9.632813 L 10.082031 17.175781 L 10.078125 17.15625 L 4.242188 15.191406 L 4.242188 15.1875 C 4.238281 15.1875 4.230469 15.183594 4.226563 15.183594 C 4.230469 15.183594 4.257813 15.171875 4.257813 15.171875 L 4.289063 15.15625 L 4.320313 15.144531 C 4.320313 15.144531 9.53125 12.949219 14.828125 10.71875 C 17.480469 9.601563 20.152344 8.476563 22.207031 7.609375 C 24.261719 6.746094 25.78125 6.113281 25.867188 6.078125 C 25.949219 6.046875 25.910156 6.046875 25.96875 6.046875 Z">
</path>
</svg>
</a>
<a href="https://www.twitter.com/teeaarbee?ref=blog.teeaarbee.com" target="_blank" rel="noreferrer"
title="twitter" aria-label="twitter" class="mx-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25"
height="25" viewBox="0 0 32 32" version="1.1">
<g id="surface676">
<path fill="currentColor"
d="M 28 8.558594 C 27.117188 8.949219 26.167969 9.214844 25.171875 9.332031 C 26.1875 8.722656 26.96875 7.757812 27.335938 6.609375 C 26.386719 7.171875 25.332031 7.582031 24.210938 7.804688 C 23.3125 6.847656 22.03125 6.246094 20.617188 6.246094 C 17.898438 6.246094 15.691406 8.453125 15.691406 11.171875 C 15.691406 11.558594 15.734375 11.933594 15.820312 12.292969 C 11.726562 12.089844 8.097656 10.128906 5.671875 7.148438 C 5.246094 7.875 5.003906 8.722656 5.003906 9.625 C 5.003906 11.332031 5.871094 12.839844 7.195312 13.722656 C 6.386719 13.695312 5.628906 13.476562 4.964844 13.105469 C 4.964844 13.128906 4.964844 13.148438 4.964844 13.167969 C 4.964844 15.554688 6.660156 17.546875 8.914062 17.996094 C 8.5 18.109375 8.066406 18.171875 7.617188 18.171875 C 7.300781 18.171875 6.988281 18.140625 6.691406 18.082031 C 7.316406 20.039062 9.136719 21.460938 11.289062 21.503906 C 9.605469 22.824219 7.480469 23.609375 5.175781 23.609375 C 4.777344 23.609375 4.386719 23.585938 4 23.539062 C 6.179688 24.9375 8.765625 25.753906 11.546875 25.753906 C 20.605469 25.753906 25.558594 18.25 25.558594 11.742188 C 25.558594 11.53125 25.550781 11.316406 25.542969 11.105469 C 26.503906 10.410156 27.339844 9.542969 28 8.558594 Z M 28 8.558594 ">
</path>
</g>
</svg>
</a>
</div>
</footer>
<script>
/* https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fanchor.fm%2Fs%2F62992278%2Fpodcast%2Frss */
// we are assigning the api url to a varibale called apiLink
let apiLink = 'https://api.rss2json.com/v1/api.json?rss_url=https://anchor.fm/s/62992278/podcast/rss';
let eachPocastData = '';
// we are defining a empty variable podDate in which we will l
// console.log(apiLink);
let getInfo = async () => {
const response = await fetch(apiLink);
const data = response.json();
// console.log(data);
return data;
};
getInfo().then(podData => {
// console.log('podData');
// console.log(podData);
document.querySelector('.title').innerHTML = `${podData.feed.title}`;
document.querySelector('.intro').innerHTML = `By: ${podData.feed.author}`;
document.querySelector('.description').innerHTML = `${podData.feed.description}`;
document.querySelector('.pfp').src = `${podData.feed.image}`;
// looping items of podcast
// let podcastContainer = document.querySelector('.podcastContainer').innerHTML;
function getAllPodcastDate() {
podData.items.forEach(eachPodcast => {
// console.log(eachPodcast);
eachPocastData += ` <div class="card my-3" style="border-radius: 15px">
<div class="card-body">
<h4 class="card-title eachPodcastTitle ">${eachPodcast.title}</h4>
<p class="eachPodcastPubDate card-text ">Published on: ${eachPodcast.pubDate}</p>
<div class='speedcontrolcontainer'>
<audio class=" card-text eachPodcastLink my-3" controls>
Your browser does not support the audio element.
<source src="${eachPodcast.enclosure.link}" type="audio/mp4">
</audio>
<div>
<label for="pbrate">Speed:</label>
<input type="range" id="pbrate" min=.5 max=3 value=1 step=.1>
<span></span>
</div>
</div>
<p class="eachPodcastDescription">${eachPodcast.description}</p>
</div>
</div>`
});
}
getAllPodcastDate();
document.querySelector('.podcastContainer').innerHTML = eachPocastData;
let all = document.querySelectorAll('.card-body');
for (let i = 0; i < all.length; i++) {
const audio = document.querySelectorAll('audio')[i];
const playbackrate = document.querySelectorAll('.speedcontrolcontainer input')[i];
const display = document.querySelectorAll('.speedcontrolcontainer span')[i];
const displayvalue = val => {
return parseInt(val * 100, 10) + '%'
}
if (window.localStorage.pbspeed) {
audio.playbackRate = window.localStorage.pbspeed;
playbackrate.value = window.localStorage.pbspeed;
}
display.innerText = displayvalue(audio.playbackRate);
playbackrate.addEventListener('change', e => {
audio.playbackRate = playbackrate.value;
display.innerText = displayvalue(playbackrate.value);
window.localStorage.pbspeed = playbackrate.value;
});
}
}).catch(err => {
console.log('error is: ', err);
})
</script>
</body>
</html>