From 05bb5fd99bdbeaed81d73367a83427c894df80db Mon Sep 17 00:00:00 2001
From: mrsyaban <mrsyaban99@gmail.com>
Date: Wed, 15 Nov 2023 20:12:34 +0700
Subject: [PATCH] player kehubung tapi blm bisa di play
---
src/app/components/app/app_page.php | 7 +-
src/app/components/common/player.php | 76 +++---
src/app/controllers/app/app_controller.php | 16 +-
.../controllers/episode/post_play_episode.php | 1 +
.../controllers/player/get_episode_played.php | 28 +++
src/app/controllers/player/mount_player.php | 31 +++
.../controllers/profile/update_profile.php | 1 -
src/app/core/app.php | 6 +-
src/app/database/mysql/init.sql | 217 +++++++++++++++++-
src/app/init.php | 3 +
src/app/models/episode.php | 6 +-
src/app/views/player/player_view.php | 16 ++
src/public/javascript/app/app.js | 2 +
src/public/javascript/player.js | 50 ----
src/public/javascript/player/player.js | 19 ++
src/public/javascript/player/player_page.js | 51 ++++
src/public/javascript/podcast/script.js | 2 +
src/public/javascript/search/resultSearch.js | 3 +
src/public/styles/globals.css | 3 +-
src/public/styles/home/homeStyle.css | 2 +-
src/public/styles/search/search.css | 8 +-
21 files changed, 431 insertions(+), 117 deletions(-)
create mode 100644 src/app/controllers/player/get_episode_played.php
create mode 100644 src/app/controllers/player/mount_player.php
create mode 100644 src/app/views/player/player_view.php
delete mode 100644 src/public/javascript/player.js
create mode 100644 src/public/javascript/player/player.js
create mode 100644 src/public/javascript/player/player_page.js
diff --git a/src/app/components/app/app_page.php b/src/app/components/app/app_page.php
index 739b68d..7eb2873 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 7fcb9cc..f31dbb2 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 ed70961..b7864d8 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 f21f6d8..0370191 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 0000000..a139b16
--- /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 0000000..2296e7f
--- /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 b225994..2910f18 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 aac88f2..7fab00d 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 2ebf319..f4e2725 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 8e23e62..17801be 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 0240196..d976c23 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 0000000..e560da6
--- /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 98b3977..64c0a0c 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 dfcbde6..0000000
--- 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 0000000..aa0ef45
--- /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 0000000..2ead79e
--- /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 b41b215..bb586ae 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 7374b7a..2cf01cb 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 faa94fe..cebf275 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 5fc2764..afee8ee 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 97846ee..3010e17 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;
--
GitLab