diff --git a/src/app/components/common/player.php b/src/app/components/common/player.php index f31dbb23c76882d86cfa9ca1c742445a4df4ef45..9ea54736cfb2d7855b4d604fdff7d6e05be2d570 100644 --- a/src/app/components/common/player.php +++ b/src/app/components/common/player.php @@ -8,20 +8,14 @@ </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"> + <div class="play-button-player"> <img src="<?= BASE_URL ?>/images/assets/play_icon.svg" alt="pause"> </div> - <div class="pause-button"> + <div class="pause-button-player"> <img src="<?= BASE_URL ?>/images/assets/pause_icon.svg" alt="pause"> </div> </div> - <div class="nextButton"> - <img src="<?= BASE_URL ?>/images/assets/next_icon.svg" alt="next"> - </div> </div> <div class="progress-control"> <div class="current-time">00.00</div> diff --git a/src/app/controllers/seed/post_seed.php b/src/app/controllers/seed/post_seed.php index 92dca048b55c0c82cca6358e9e32304cc427cbac..839809e0a3eba6e2b3a0570c0275251625a42839 100644 --- a/src/app/controllers/seed/post_seed.php +++ b/src/app/controllers/seed/post_seed.php @@ -63,7 +63,7 @@ class PostSeedController $eps_title = "Episode " . $j . " of Podcast Non-Premium " . $i; $eps_description = "Description for Episode " . $j . " of Podcast Non-Premium " . $i . " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat lacus, cursus vel arcu ut, blandit euismod ex. Pellentesque eu magna vehicula odio laoreet maximus eget eu neque. Nullam nec euismod arcu, id tincidunt magna."; $eps_url_thumbnail = $j % 2 == 0 ? "/images/escape.jpg" : "/images/hello.jpg"; - $eps_url_audio = $j % 2 == 0 ? "/audio/audiotester.mp3" : "/audio/sample.mp3"; + $eps_url_audio = $j % 2 == 0 ? "/episodes/audiotester.mp3" : "/episodes/sample.mp3"; $episode_query .= "('" . $eps_title . "', '" . $eps_url_thumbnail . "', '" . $eps_description . "', '" . $eps_url_audio . "', " . $i . ")"; diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js index 64c0a0c754ddb16ae073bd8c2691eeb0058d8f9d..b0f38457059e7677d203e7bc1e9770cc0dec9973 100644 --- a/src/public/javascript/app/app.js +++ b/src/public/javascript/app/app.js @@ -47,7 +47,9 @@ const getPage = (page, queryParam) => { } else if (window.location.href.includes("home")) { handleHome(); } - mountPlayer(); + if (!document.querySelector(".hide-player")) { + mountPlayer(); + } } }; diff --git a/src/public/javascript/player/player_page.js b/src/public/javascript/player/player_page.js index 2ead79e8a6bf509e5d03c5ce38e36367ccd85749..dc7bdc3445f3a526fb48ecc344201148c31b807a 100644 --- a/src/public/javascript/player/player_page.js +++ b/src/public/javascript/player/player_page.js @@ -1,7 +1,8 @@ export function handlePlayerPage() { + console.log("player page"); const audioPlayer = document.querySelector('audio'); - const playButton = document.querySelector('.play-button'); - const pauseButton = document.querySelector('.pause-button'); + const playButton = document.querySelector('.play-button-player'); + const pauseButton = document.querySelector('.pause-button-player'); const duration = document .querySelector('.duration'); const currentTime = document.querySelector('.current-time'); const progressBar = document.querySelector('.progress-bar'); @@ -16,12 +17,13 @@ export function handlePlayerPage() { if (audioPlayer) { // Play button + console.log(playButton); playButton.addEventListener("click", () => { playButton.style.display = "none"; pauseButton.style.display = "block"; audioPlayer.play(); }); - + // Pause button pauseButton.addEventListener("click", () => { pauseButton.style.display = "none"; diff --git a/src/public/javascript/podcast/script.js b/src/public/javascript/podcast/script.js index bb586ae442c53a75dcf5238a917bfa2519361b47..d09751f1ea175b18c0fce2f534f6aa060c36e2df 100644 --- a/src/public/javascript/podcast/script.js +++ b/src/public/javascript/podcast/script.js @@ -1,6 +1,7 @@ "use strict"; import { mountPlayer } from "../player/player.js"; +import { handlePlayerPage } from "../player/player_page.js"; import { showSuccessToast, showErrorToast, showInformationToast } from "../toast.mjs"; export function handlePodcast() { // Get DOM elements @@ -24,6 +25,7 @@ export function handlePodcast() { xhr.onreadystatechange = () => { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { mountPlayer(); + handlePlayerPage(); } };