Skip to content

Commit b78d25f

Browse files
JamesDBartlett3JamesDBartlett3
authored
video player files
1 parent 5a533bc commit b78d25f

File tree

4 files changed

+233
-0
lines changed

4 files changed

+233
-0
lines changed

‎index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>The Drill Down with Ahmad & James</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div id="bannerContainer">
11+
<img
12+
src="thedrilldown_banner.png"
13+
alt="The Drill Down with Ahmad & James"
14+
/>
15+
</div>
16+
<div class="container">
17+
<div id="videoContainer">
18+
<video id="videoPlayer" controls>
19+
<source id="videoSource" src="" type="video/mp4" />
20+
Your browser does not support the video tag or the video could not be
21+
loaded.
22+
</video>
23+
</div>
24+
<div id="playlistContainer">
25+
<input type="text" id="search" placeholder="Search..." />
26+
<button id="sortToggle">Sort Descending</button>
27+
<ul id="playlist"></ul>
28+
</div>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎script.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const videoPlayer = document.getElementById("videoPlayer");
3+
const videoSource = document.getElementById("videoSource");
4+
const playlist = document.getElementById("playlist");
5+
const searchInput = document.getElementById("search");
6+
const sortToggleButton = document.getElementById("sortToggle");
7+
8+
let videos = [];
9+
let isAscending = true;
10+
11+
async function fetchReleases() {
12+
const response = await fetch(
13+
"https://api.github.com/repos/TheDrillDown/TheDrillDown/releases"
14+
);
15+
const releases = await response.json();
16+
console.log("Fetched releases:", releases); // Debugging line
17+
return releases;
18+
}
19+
20+
function filterVideos(query) {
21+
return videos.filter(
22+
(video) =>
23+
video.name.toLowerCase().includes(query.toLowerCase()) ||
24+
video.body.toLowerCase().includes(query.toLowerCase())
25+
);
26+
}
27+
28+
function sortVideos(ascending = true) {
29+
return videos.sort((a, b) => {
30+
const dateA = new Date(a.published_at);
31+
const dateB = new Date(b.published_at);
32+
return ascending ? dateA - dateB : dateB - dateA;
33+
});
34+
}
35+
36+
function updatePlaylist(videos) {
37+
playlist.innerHTML = "";
38+
videos.forEach((video) => {
39+
const li = document.createElement("li");
40+
li.textContent = video.name;
41+
li.addEventListener("click", () => {
42+
console.log("Selected video URL:", video.url); // Debugging line
43+
videoSource.src = video.url;
44+
console.log("Video source set to:", videoSource.src); // Debugging line
45+
videoPlayer.load();
46+
videoPlayer.play().catch((error) => {
47+
console.error("Error playing video:", error); // Error handling
48+
});
49+
});
50+
playlist.appendChild(li);
51+
});
52+
}
53+
54+
async function init() {
55+
const releases = await fetchReleases();
56+
videos = releases.flatMap((release) =>
57+
release.assets
58+
.filter((asset) => asset.name.endsWith(".mp4"))
59+
.map((asset) => ({
60+
name: release.name,
61+
body: release.body,
62+
url: asset.browser_download_url,
63+
published_at: release.published_at,
64+
}))
65+
);
66+
console.log("Fetched videos:", videos); // Debugging line
67+
const sortedVideos = sortVideos(isAscending);
68+
updatePlaylist(sortedVideos);
69+
}
70+
71+
searchInput.addEventListener("input", () => {
72+
const query = searchInput.value;
73+
const filteredVideos = filterVideos(query);
74+
updatePlaylist(filteredVideos);
75+
});
76+
77+
sortToggleButton.addEventListener("click", () => {
78+
isAscending = !isAscending;
79+
const sortedVideos = sortVideos(isAscending);
80+
updatePlaylist(sortedVideos);
81+
sortToggleButton.textContent = isAscending
82+
? "Sort Descending"
83+
: "Sort Ascending";
84+
});
85+
86+
init();
87+
});

‎style.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #fdfbec;
4+
margin: 0;
5+
padding: 0;
6+
color: #08524d; /* Set text color */
7+
}
8+
9+
.container {
10+
width: 100%; /* Make container take full width */
11+
max-width: 100%; /* Ensure container does not exceed full width */
12+
margin: 0 auto;
13+
padding: 20px;
14+
background-color: #fdfbec;
15+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16+
display: flex;
17+
flex-direction: column; /* Change to column layout */
18+
gap: 20px;
19+
box-sizing: border-box; /* Include padding in the element's total width and height */
20+
}
21+
22+
#bannerContainer {
23+
text-align: center; /* Center the banner image */
24+
}
25+
26+
#bannerContainer img {
27+
max-width: 100%;
28+
height: auto;
29+
}
30+
31+
h1 {
32+
text-align: center;
33+
width: 100%;
34+
}
35+
36+
#search {
37+
width: 90%;
38+
padding: 10px;
39+
margin-bottom: 10px;
40+
}
41+
42+
button {
43+
padding: 10px;
44+
margin: 5px;
45+
}
46+
47+
video {
48+
width: 100%; /* Ensure video takes full width */
49+
margin-bottom: 10px;
50+
box-sizing: border-box; /* Include padding in the element's total width and height */
51+
}
52+
53+
#videoContainer {
54+
flex: none; /* Reset flex property */
55+
}
56+
57+
#playlistContainer {
58+
width: 100%; /* Ensure playlist container takes full width */
59+
max-width: 100%; /* Ensure playlist container does not exceed full width */
60+
flex: none; /* Reset flex property */
61+
display: block; /* Change to block layout */
62+
box-sizing: border-box; /* Include padding in the element's total width and height */
63+
}
64+
65+
#playlist {
66+
list-style: none;
67+
padding: 0;
68+
flex-grow: 1;
69+
overflow-y: auto;
70+
}
71+
72+
#playlist li {
73+
padding: 10px;
74+
cursor: pointer;
75+
border-bottom: 1px solid #ccc;
76+
}
77+
78+
#playlist li:hover {
79+
background-color: #d3c886;
80+
}
81+
82+
/* Media query for landscape orientation */
83+
@media (orientation: landscape) {
84+
.container {
85+
flex-direction: row; /* Change to row layout */
86+
}
87+
88+
#videoContainer {
89+
align-items: center; /* Center content vertically */
90+
width: 75%;
91+
height: 100%;
92+
}
93+
94+
#playlistContainer {
95+
width: 25%;
96+
padding-right: 10px;
97+
}
98+
}
99+
100+
/* Media query for portrait orientation */
101+
@media (orientation: portrait) {
102+
.container {
103+
flex-direction: column; /* Change to column layout */
104+
}
105+
106+
#videoContainer {
107+
flex: none; /* Reset flex property */
108+
}
109+
110+
#playlistContainer {
111+
flex: none; /* Reset flex property */
112+
max-width: 100%; /* Ensure playlist container takes full width */
113+
}
114+
}

‎thedrilldown_banner.png

136 KB
Loading

0 commit comments

Comments
 (0)