diff --git a/src/app/components/app/app_page.php b/src/app/components/app/app_page.php
index 739b68df23ec83c3b41587756c96dab131e7ff74..7eb2873cdd531c5b0601c3dcb0ac19181627bd03 100644
--- a/src/app/components/app/app_page.php
+++ b/src/app/components/app/app_page.php
@@ -18,7 +18,6 @@
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/components/button.css">
<!-- JavaScript Library -->
<script type="module" src="<?= BASE_URL ?>/javascript/toast.mjs" defer></script>
- <script type="text/javascript" src="<?= BASE_URL ?>/javascript/player.js" defer></script>
<script type="text/javascript" src="<?= BASE_URL ?>/javascript/util/debounce.js" defer></script>
<script type="text/javascript" src="<?= BASE_URL ?>/javascript/profile/profile.js" defer></script>
<script type="module" src="<?= BASE_URL ?>/javascript/dashboard/layout.mjs" defer></script>
@@ -39,7 +38,11 @@
<main id="main-section">
<!-- Called by app.js -->
</main>
- <?php include(dirname(__DIR__) . "/common/player.php") ?>
+ <div class="player">
+ <div class="sh3 caption">
+ play your favorite podcast!
+ </div>
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/src/app/components/common/player.php b/src/app/components/common/player.php
index 7fcb9cc9bfc1437e88465bddd3bb3aa6eec1dd29..f31dbb23c76882d86cfa9ca1c742445a4df4ef45 100644
--- a/src/app/components/common/player.php
+++ b/src/app/components/common/player.php
@@ -1,46 +1,44 @@
-<div class="player">
- <?php if (isset($this->data["title"])) : ?>
- <div class="podcast-details">
- <img class="thumbnail" src="<?= STORAGE_URL . $this->data["url_thumbnail"] ?>" alt="image" width="110" height="110">
- <div class="podcast-info">
- <div class="b3"><?= $this->data["title"] ?></div>
- <div class="b4"><?= $this->data["podcast"] ?></div>
- </div>
+<?php if (isset($this->data["title"])) : ?>
+ <div class="podcast-details">
+ <img class="thumbnail" src="<?= STORAGE_URL . $this->data["url_thumbnail"] ?>" alt="image" width="110" height="110">
+ <div class="podcast-info">
+ <div class="b3"><?= $this->data["title"] ?></div>
+ <div class="b4"><?= $this->data["podcast"] ?></div>
</div>
- <div class="audio-player">
- <div class="audio-controller">
- <div class="prevButton">
- <img src="<?= BASE_URL ?>/images/assets/prev_icon.svg" alt="prev">
- </div>
- <div class="button-player">
- <div class="play-button">
- <img src="<?= BASE_URL ?>/images/assets/play_icon.svg" alt="pause">
- </div>
- <div class="pause-button">
- <img src="<?= BASE_URL ?>/images/assets/pause_icon.svg" alt="pause">
- </div>
+ </div>
+ <div class="audio-player">
+ <div class="audio-controller">
+ <div class="prevButton">
+ <img src="<?= BASE_URL ?>/images/assets/prev_icon.svg" alt="prev">
+ </div>
+ <div class="button-player">
+ <div class="play-button">
+ <img src="<?= BASE_URL ?>/images/assets/play_icon.svg" alt="pause">
</div>
- <div class="nextButton">
- <img src="<?= BASE_URL ?>/images/assets/next_icon.svg" alt="next">
+ <div class="pause-button">
+ <img src="<?= BASE_URL ?>/images/assets/pause_icon.svg" alt="pause">
</div>
</div>
- <div class="progress-control">
- <div class="current-time">00.00</div>
- <input type="range" name="progress-bar" class="progress-bar" step="0.01" value="0">
- <div class="duration">00:00</div>
+ <div class="nextButton">
+ <img src="<?= BASE_URL ?>/images/assets/next_icon.svg" alt="next">
</div>
</div>
- <div class="volume-control">
- <div></div>
- </div>
- <div class="hide-player">
- <audio controls class="audio-player">
- <source src="<?= STORAGE_URL . $this->data["url_audio"] ?>" type="audio/mpeg">
- </audio>
- </div>
- <? else : ?>
- <div class="sh3 caption">
- play your favorite podcast!
+ <div class="progress-control">
+ <div class="current-time">00.00</div>
+ <input type="range" name="progress-bar" class="progress-bar" step="0.01" value="0">
+ <div class="duration">00:00</div>
</div>
- <? endif; ?>
-</div>
\ No newline at end of file
+ </div>
+ <div class="volume-control">
+ <div></div>
+ </div>
+ <div class="hide-player">
+ <audio controls class="audio-player">
+ <source src="<?= STORAGE_URL . $this->data["url_audio"] ?>" type="audio/mpeg">
+ </audio>
+ </div>
+<? else : ?>
+ <div class="sh3 caption">
+ play your favorite podcast!
+ </div>
+<? endif; ?>
\ No newline at end of file
diff --git a/src/app/controllers/app/app_controller.php b/src/app/controllers/app/app_controller.php
index ed709614e75fb4ee6c9d51ebd9fc8c3dbfdf7edd..b7864d8efbcb16bc36fcb35aa58c9bf6668df9d5 100644
--- a/src/app/controllers/app/app_controller.php
+++ b/src/app/controllers/app/app_controller.php
@@ -28,11 +28,7 @@ class AppController
}
- // Get id_episode from session
- $epsId = "";
- if (isset($_SESSION["eps_id"])) {
- $epsId = $_SESSION["eps_id"];
- }
+
// Get id_user from session
$userId = "";
@@ -42,16 +38,6 @@ class AppController
$data = [];
- // Data Player
- $podcastModel = new PodcastModel();
- $podcastInfo = $podcastModel->getPodcastInfo($epsId);
- if ($podcastInfo) {
- $data["title"] = $podcastInfo->title;
- $data["url_thumbnail"] = $podcastInfo->url_thumbnail;
- $data["podcast"] = $podcastInfo->name;
- $data["url_audio"] = $podcastInfo->url_audio;
- }
-
// Data Profile
$userModel = new UserModel();
$userInfo = $userModel->getUserInfo($userId);
diff --git a/src/app/controllers/episode/post_play_episode.php b/src/app/controllers/episode/post_play_episode.php
index f21f6d8510396ceeb4af08ffb60a8be398dab569..0370191ab3a78458e0efd03b42acb3dc0da95d76 100644
--- a/src/app/controllers/episode/post_play_episode.php
+++ b/src/app/controllers/episode/post_play_episode.php
@@ -23,6 +23,7 @@ class PostPlayEpisodeController
}
$_SESSION["eps_id"] = $_POST["idEpisode"];
+
http_response_code(200);
header("Content-Type: application/json");
diff --git a/src/app/controllers/player/get_episode_played.php b/src/app/controllers/player/get_episode_played.php
new file mode 100644
index 0000000000000000000000000000000000000000..a139b16191ef5a51ce1cf576a5fe616146a9f0b2
--- /dev/null
+++ b/src/app/controllers/player/get_episode_played.php
@@ -0,0 +1,28 @@
+<?php
+
+class GetEpisodePlayed
+{
+ public function call()
+ {
+ session_start();
+ if (!isset($_SESSION["user_id"])) {
+ http_response_code(403);
+ header("Content-Type: application/json");
+ echo json_encode(["message" => "unauthorized"]);
+
+ return;
+ }
+
+ // Check for current eps id
+ if (!isset($_SESSION["eps_id"])) {
+ http_response_code(400);
+ header("Content-Type: application/json");
+ echo json_encode(["message" => "missing episode id"]);
+ return;
+ }
+
+ http_response_code(200);
+ header("Content-Type: application/json");
+ echo json_encode(["message" => "success", "eps_id" => $_SESSION["eps_id"]]);
+ }
+}
diff --git a/src/app/controllers/player/mount_player.php b/src/app/controllers/player/mount_player.php
new file mode 100644
index 0000000000000000000000000000000000000000..2296e7ffce024c37b4f6563c816f426ebb23ca48
--- /dev/null
+++ b/src/app/controllers/player/mount_player.php
@@ -0,0 +1,31 @@
+<?php
+
+class MountPlayerController
+{
+ public function call()
+ {
+ session_start();
+
+ // Get id_episode from session
+ $epsId = "";
+ if (isset($_SESSION["eps_id"])) {
+ $epsId = $_SESSION["eps_id"];
+ }
+
+ $data = [];
+
+ // Data Player
+ $podcastModel = new PodcastModel();
+ $podcastInfo = $podcastModel->getPodcastInfo($epsId);
+ if ($podcastInfo) {
+ $data["title"] = $podcastInfo->title;
+ $data["url_thumbnail"] = $podcastInfo->url_thumbnail;
+ $data["podcast"] = $podcastInfo->name;
+ $data["url_audio"] = $podcastInfo->url_audio;
+ }
+
+ require_once __DIR__ . "/../../views/player/player_view.php";
+ $playerView = new PlayerView($data);
+ $playerView->render();
+}
+}
\ No newline at end of file
diff --git a/src/app/controllers/profile/update_profile.php b/src/app/controllers/profile/update_profile.php
index b22599403d32c455fede310af6ccff5a2eb55fcb..2910f1845ae2975740aa3faa6d763cbc073b4fcc 100644
--- a/src/app/controllers/profile/update_profile.php
+++ b/src/app/controllers/profile/update_profile.php
@@ -66,6 +66,5 @@ class UpdateProfileController
exit;
}
}
- session_destroy();
}
}
diff --git a/src/app/core/app.php b/src/app/core/app.php
index aac88f2ad7ddff628481d5d8cfd4d895015ae9b2..7fab00d87680c83883fee2813d7319a1ab4f7dde 100644
--- a/src/app/core/app.php
+++ b/src/app/core/app.php
@@ -36,14 +36,16 @@ class App
$router->get("public/components/playlist", new GetPlaylistController());
$router->get("public/components/dashboard", new GetDashboardLayoutController());
$router->get("public/components/podcast", new GetPodcastPageController());
-
+
$router->get("public/components/dashboard-main", new GetDashboardLayoutController());
$router->get("public/components/dashboard-episode", new GetDashboardLayoutController());
$router->get("public/dashboard/internal/dashboard-main", new GetDashboardMainController());
$router->get("public/dashboard/internal/dashboard-episode", new GetDashboardEpisodeController());
-
+
// GET routes
$router->get("public/dashboard/user-podcast", new GetUserPodcastController());
+ $router->get("public/components/player", new MountPlayerController());
+ $router->get("public/player/episode", new GetEpisodePlayed());
// POST routes
$router->post("public/logout", new LogoutController());
diff --git a/src/app/database/mysql/init.sql b/src/app/database/mysql/init.sql
index 2ebf319c76d518a5a97a733496d21267d362a8a4..f4e27256323a97abd6dce13dc95b542184515c3a 100644
--- a/src/app/database/mysql/init.sql
+++ b/src/app/database/mysql/init.sql
@@ -416,4 +416,219 @@ VALUES (
"Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
"sports",
3
- );
\ No newline at end of file
+ );
+
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 1
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 1
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 1
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 1
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 1
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 1
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 1
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 1
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 1",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 2
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 2",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 2
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 2",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 2
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 2",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 2
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 2",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 2
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 2",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 2
+);
+INSERT INTO episode (
+ title,
+ description,
+ url_thumbnail,
+ url_audio,
+ id_podcast
+)
+VALUES (
+ "Ini tuh episode 2",
+ "Ini adalah contoh teks deskripsi dummy yang dibuat oleh ChatGPT. Teks ini mengilustrasikan kemampuan model dalam menghasilkan teks deskripsi dengan panjang yang lebih besar. ChatGPT adalah AI canggih yang dirancang untuk memberikan informasi, menyelesaikan masalah, dan memberikan panduan dalam berbagai topik.",
+ "/images/episode.jpeg",
+ "episodes/audiotester.mp3",
+ 2
+);
+
+
+
+
diff --git a/src/app/init.php b/src/app/init.php
index 8e23e625f841cc0d0798e1ffbd2f44eb3249f4d0..17801beebbf8e1da6040766b97a25a8141814fa2 100644
--- a/src/app/init.php
+++ b/src/app/init.php
@@ -45,6 +45,9 @@ require_once __DIR__ . "/controllers/search/get_search.php";
require_once __DIR__ . "/controllers/profile/get_profile.php";
require_once __DIR__ . "/controllers/profile/update_profile.php";
+require_once __DIR__ . "/controllers/player/mount_player.php";
+require_once __DIR__ . "/controllers/player/get_episode_played.php";
+
require_once __DIR__ . "/controllers/app/app_controller.php";
require_once __DIR__ . "/models/podcast.php";
diff --git a/src/app/models/episode.php b/src/app/models/episode.php
index 0240196c1aa72a13584fb64c9a9372abd15e4606..d976c23cd0678856dcb28546df910f3ca7851cb7 100644
--- a/src/app/models/episode.php
+++ b/src/app/models/episode.php
@@ -38,7 +38,7 @@ class EpisodeModel
$this->db->bind("podcast_id", $podcast_id);
$this->db->bind("offset", ($page - 1) * 4);
$episodes = $this->db->fetchAll();
-
+
return $episodes;
}
@@ -126,7 +126,7 @@ class EpisodeModel
$this->db->query($query);
$this->db->bind("idPodcast", $idPodcast);
-
- return $this->db->fetchAll();
+ $episode = $this->db->fetchAll();
+ return $episode;
}
}
diff --git a/src/app/views/player/player_view.php b/src/app/views/player/player_view.php
new file mode 100644
index 0000000000000000000000000000000000000000..e560da6009935bf7214b9154747e7ef729dae667
--- /dev/null
+++ b/src/app/views/player/player_view.php
@@ -0,0 +1,16 @@
+<?php
+
+class PlayerView
+{
+ public $data;
+
+ public function __construct($data = [])
+ {
+ $this->data = $data;
+ }
+
+ public function render()
+ {
+ require_once __DIR__ . "/../../components/common/player.php";
+ }
+}
diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js
index 98b3977d75da848eed7f819fa0632f5fc9123eb6..64c0a0c754ddb16ae073bd8c2691eeb0058d8f9d 100644
--- a/src/public/javascript/app/app.js
+++ b/src/public/javascript/app/app.js
@@ -5,6 +5,7 @@ import { handleSearch } from "../search/search.js";
import { handleResultSearch } from "../search/resultSearch.js";
import { handlePodcast } from "../podcast/script.js";
import { handleHome } from "../home/home.js";
+import { mountPlayer } from "../player/player.js";
const mainSection = document.querySelector("#main-section");
const sidebar = document.querySelector(".sidebar");
@@ -46,6 +47,7 @@ const getPage = (page, queryParam) => {
} else if (window.location.href.includes("home")) {
handleHome();
}
+ mountPlayer();
}
};
diff --git a/src/public/javascript/player.js b/src/public/javascript/player.js
deleted file mode 100644
index dfcbde68add1e27233713b74d924fae36fc53796..0000000000000000000000000000000000000000
--- a/src/public/javascript/player.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const audioPlayer = document.querySelector('audio');
-const playButton = document.querySelector('.play-button');
-const pauseButton = document.querySelector('.pause-button');
-const duration = document .querySelector('.duration');
-const currentTime = document.querySelector('.current-time');
-const progressBar = document.querySelector('.progress-bar');
-
-function formatTime(duration) {
- const minutes = Math.floor(duration / 60);
- const seconds = Math.floor(duration % 60);
- const formattedMinutes = String(minutes).padStart(2, '0');
- const formattedSeconds = String(seconds).padStart(2, '0');
- return `${formattedMinutes}:${formattedSeconds}`;
-}
-
-if (audioPlayer) {
- // Play button
- playButton.addEventListener("click", () => {
- playButton.style.display = "none";
- pauseButton.style.display = "block";
- audioPlayer.play();
- });
-
- // Pause button
- pauseButton.addEventListener("click", () => {
- pauseButton.style.display = "none";
- playButton.style.display = "block";
- audioPlayer.pause();
- });
-
- document.addEventListener("DOMContentLoaded", () => {
- duration.textContent = formatTime(audioPlayer.duration);
- });
-
- audioPlayer.addEventListener('timeupdate', () => {
- // update current time
- currentTime.textContent = formatTime(audioPlayer.currentTime);
-
- // update progress bar
- const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
- progressBar.value = progress;
- });
-
- progressBar.addEventListener("input", (e) => {
- const seconds = (e.target.value / 100) * audioPlayer.duration;
- audioPlayer.currentTime = seconds;
- currentTime.textContent = formatTime(audioPlayer.currentTime);
- });
-}
-
diff --git a/src/public/javascript/player/player.js b/src/public/javascript/player/player.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa0ef45ff8b829a2d98b32258d97e93bc216145d
--- /dev/null
+++ b/src/public/javascript/player/player.js
@@ -0,0 +1,19 @@
+import { handlePlayerPage } from "./player_page.js";
+
+export function mountPlayer() {
+ const player = document.querySelector(".player");
+
+ const xhr = new XMLHttpRequest();
+ // call Mount Player
+ xhr.open("GET", "/public/components/player");
+
+ xhr.onreadystatechange = () => {
+ if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+ player.innerHTML = xhr.responseText;
+ handlePlayerPage();
+ }};
+
+ xhr.send();
+
+
+}
diff --git a/src/public/javascript/player/player_page.js b/src/public/javascript/player/player_page.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ead79e8a6bf509e5d03c5ce38e36367ccd85749
--- /dev/null
+++ b/src/public/javascript/player/player_page.js
@@ -0,0 +1,51 @@
+export function handlePlayerPage() {
+ const audioPlayer = document.querySelector('audio');
+ const playButton = document.querySelector('.play-button');
+ const pauseButton = document.querySelector('.pause-button');
+ const duration = document .querySelector('.duration');
+ const currentTime = document.querySelector('.current-time');
+ const progressBar = document.querySelector('.progress-bar');
+
+ function formatTime(duration) {
+ const minutes = Math.floor(duration / 60);
+ const seconds = Math.floor(duration % 60);
+ const formattedMinutes = String(minutes).padStart(2, '0');
+ const formattedSeconds = String(seconds).padStart(2, '0');
+ return `${formattedMinutes}:${formattedSeconds}`;
+ }
+
+ if (audioPlayer) {
+ // Play button
+ playButton.addEventListener("click", () => {
+ playButton.style.display = "none";
+ pauseButton.style.display = "block";
+ audioPlayer.play();
+ });
+
+ // Pause button
+ pauseButton.addEventListener("click", () => {
+ pauseButton.style.display = "none";
+ playButton.style.display = "block";
+ audioPlayer.pause();
+ });
+
+ document.addEventListener("DOMContentLoaded", () => {
+ duration.textContent = formatTime(audioPlayer.duration);
+ });
+
+ audioPlayer.addEventListener('timeupdate', () => {
+ // update current time
+ currentTime.textContent = formatTime(audioPlayer.currentTime);
+
+ // update progress bar
+ const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+ progressBar.value = progress;
+ });
+
+ progressBar.addEventListener("input", (e) => {
+ const seconds = (e.target.value / 100) * audioPlayer.duration;
+ audioPlayer.currentTime = seconds;
+ currentTime.textContent = formatTime(audioPlayer.currentTime);
+ });
+ }
+}
\ No newline at end of file
diff --git a/src/public/javascript/podcast/script.js b/src/public/javascript/podcast/script.js
index b41b2158b457713029fb3bd4e3fbe4c7ca78a8af..bb586ae442c53a75dcf5238a917bfa2519361b47 100644
--- a/src/public/javascript/podcast/script.js
+++ b/src/public/javascript/podcast/script.js
@@ -1,5 +1,6 @@
"use strict";
+import { mountPlayer } from "../player/player.js";
import { showSuccessToast, showErrorToast, showInformationToast } from "../toast.mjs";
export function handlePodcast() {
// Get DOM elements
@@ -22,6 +23,7 @@ export function handlePodcast() {
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+ mountPlayer();
}
};
diff --git a/src/public/javascript/search/resultSearch.js b/src/public/javascript/search/resultSearch.js
index 7374b7afa2e9e41b58423c74f4eeb09d241d599a..2cf01cbfc9c4653f30798c38b3d880f0dd03e9cb 100644
--- a/src/public/javascript/search/resultSearch.js
+++ b/src/public/javascript/search/resultSearch.js
@@ -1,3 +1,5 @@
+import { handlePodcast } from "../podcast/script";
+
export const handleResultSearch = () => {
const podcastCardResult = document.querySelectorAll('.podcast-card-result');
const mainSection = document.querySelector('#main-section');
@@ -12,6 +14,7 @@ export const handleResultSearch = () => {
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
mainSection.innerHTML = xhr.responseText;
+ handlePodcast();
}
};
diff --git a/src/public/styles/globals.css b/src/public/styles/globals.css
index faa94fe49e8f4c37162386c481aaf7e23fbe02ca..cebf2750620b01cc9c3c95da7584cc1186ecbc9c 100644
--- a/src/public/styles/globals.css
+++ b/src/public/styles/globals.css
@@ -37,15 +37,16 @@ body {
color: white;
padding: 0;
margin: 0;
+ height: 100vh;
font-family: "DM Sans", sans-serif;
}
main {
min-width: 0;
background-color: var(--BLACK);
- height: 100vh;
overflow-y: hidden;
width: 100%;
+ height: 100vh;
}
button {
diff --git a/src/public/styles/home/homeStyle.css b/src/public/styles/home/homeStyle.css
index 5fc2764635cba7d69881c843b0fab48aefccaedb..afee8ee2026bbcbd0ab88cef3dadc9d114bb7b5d 100644
--- a/src/public/styles/home/homeStyle.css
+++ b/src/public/styles/home/homeStyle.css
@@ -1,5 +1,5 @@
.home-section {
- margin-top: 68px;
+ padding-top: 68px;
display: flex;
flex-direction: column;
width: 100%;
diff --git a/src/public/styles/search/search.css b/src/public/styles/search/search.css
index 97846eed42edebd3a627b4d4791f4f8f65a4eb86..3010e1788d834efdf260b4cf5d019c93fee71d30 100644
--- a/src/public/styles/search/search.css
+++ b/src/public/styles/search/search.css
@@ -85,10 +85,13 @@ navbar .dropbtn {
/* result */
.result-container {
display: flex;
- margin-top: 150px;
+ margin-top: 78px;
+ padding-top: 50px;
justify-content: center;
justify-self: auto;
overflow-y: auto;
+ height: 100vh;
+ margin-bottom: 400px;
}
.podcast-list {
@@ -97,12 +100,13 @@ navbar .dropbtn {
column-gap: 1.5rem;
row-gap: 1.5rem;
gap: 20px;
+ align-content: start;
}
.podcast-card-result {
display: flex;
width: 166px;
- height: 100%;
+ height: 240px;
flex-direction: column;
border-radius: 8px;
padding: 8px;