From 07fc5c1607016bdb4a578eb47d703d642eed57b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20R=C3=BChmann?= Date: Tue, 28 May 2024 21:24:47 -0300 Subject: [PATCH 1/3] Refactor: Fix the infinite carousel text --- .../components/checkTextAndAddCarroussel.js | 18 ++++- src-mobile/style/index.css | 73 ++++++++++++++++--- 2 files changed, 77 insertions(+), 14 deletions(-) diff --git a/src-mobile/script/components/checkTextAndAddCarroussel.js b/src-mobile/script/components/checkTextAndAddCarroussel.js index 489b629..c98c579 100644 --- a/src-mobile/script/components/checkTextAndAddCarroussel.js +++ b/src-mobile/script/components/checkTextAndAddCarroussel.js @@ -9,10 +9,20 @@ export function checkText(className) { elements.forEach((element) => { const textElement = element.textContent; - if (textElement.length > 21) { - element.className = `carrousel ${className} `; - } else { - element.className = `${className} `; + //this switch is to verify text sizes. + switch (true) { + case textElement.length > 21 && textElement.length < 40: + element.className = `carrousel-small ${className} `; + break; + case textElement.length > 40 && textElement.length < 90: + element.className = `carrousel-medium ${className} `; + break; + case textElement.length > 90: + element.className = `carrousel-large ${className} `; + break; + + default: + element.className = `${className} `; } }); } diff --git a/src-mobile/style/index.css b/src-mobile/style/index.css index 79219cb..e742d7c 100644 --- a/src-mobile/style/index.css +++ b/src-mobile/style/index.css @@ -95,8 +95,16 @@ a { margin-left: 7%; } -.carrousel { - animation: carrousel 15s linear infinite; +.carrousel-small { + animation: carrousel-small 15s linear infinite; +} + +.carrousel-medium { + animation: carrousel-medium 25s linear infinite; +} + +.carrousel-large { + animation: carrousel-large 30s linear infinite; } .track-name { @@ -178,20 +186,65 @@ button img { width: 45%; } -@keyframes carrousel { +@keyframes carrousel-small { 0% { - transform: translate(20%, 0); + transform: translate(0%, 0); + } + 15% { + transform: translate(0%, 0); + } + 54% { + transform: translate(-170%, 0); + } + 54.5% { + transform: translate(100050%, 0); + } + 55% { + transform: translate(100%, 0); + } + 77% { + transform: translate(0%, 0); + } +} + +@keyframes carrousel-medium { + 0% { + transform: translate(0%, 0); + } + 15% { + transform: translate(0%, 0); + } + 54% { + transform: translate(-370%, 0); + } + 54.5% { + transform: translate(100050%, 0); + } + 55% { + transform: translate(100%, 0); + } + 77% { + transform: translate(0%, 0); + } +} + +@keyframes carrousel-large { + 0% { + transform: translate(0%, 0); + } + 15% { + transform: translate(0%, 0); } - 50% { - transform: translate(-150%, 0); + 54% { + transform: translate(-470%, 0); } - 51% { + 54.5% { transform: translate(100050%, 0); } - 52% { + 55% { transform: translate(100%, 0); } - 100% { - transform: translate(20%, 0); + 77% { + transform: translate(0%, 0); } } From e777870ae8762681df4d3c8d72999103ccaa7bb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20R=C3=BChmann?= Date: Thu, 30 May 2024 20:02:39 -0300 Subject: [PATCH 2/3] Style Feature: Add Fade-In and Fade-Out Effects to Infinite Carousel Text --- src-mobile/index.html | 74 ++++---- .../checkPlaybackbarTextAndAddCarousel.js | 34 ++++ .../components/checkTextAndAddCarroussel.js | 28 --- .../checkTrackTextAndAddCarroussel.js | 29 ++++ src-mobile/script/components/putFade.js | 38 ++++ .../script/components/renderPlaybackbar.js | 2 +- .../script/handlers/handlePlayButton.js | 4 +- src-mobile/script/index.js | 4 +- src-mobile/script/templates/TrackTemplate.js | 13 +- src-mobile/style/index.css | 162 +++++++++++++----- 10 files changed, 273 insertions(+), 115 deletions(-) create mode 100644 src-mobile/script/components/checkPlaybackbarTextAndAddCarousel.js delete mode 100644 src-mobile/script/components/checkTextAndAddCarroussel.js create mode 100644 src-mobile/script/components/checkTrackTextAndAddCarroussel.js create mode 100644 src-mobile/script/components/putFade.js diff --git a/src-mobile/index.html b/src-mobile/index.html index 72582de..adfe5ac 100644 --- a/src-mobile/index.html +++ b/src-mobile/index.html @@ -1,43 +1,45 @@ - - - - - - - Kreck - - -
-
-
-
-

Tracks

+ + + + + + + Kreck + + +
+
+
+
+

Tracks

+
+
+

Sounds

+
-
-

Sounds

-
-
-
-
-
-
-
-
- - - +
+
+
+
+
+
+
+
+ + + +
-
- - + + diff --git a/src-mobile/script/components/checkPlaybackbarTextAndAddCarousel.js b/src-mobile/script/components/checkPlaybackbarTextAndAddCarousel.js new file mode 100644 index 0000000..424981b --- /dev/null +++ b/src-mobile/script/components/checkPlaybackbarTextAndAddCarousel.js @@ -0,0 +1,34 @@ +import { putFade } from "./putFade.js"; + +export function checkplaybackbarText() { + const playbackbar = document.querySelector(`.playbackbar-track-name`); + + const textElement = playbackbar.textContent; + + switch (true) { + case textElement.length > 21 && textElement.length < 40: + playbackbar.className = `carousel-small-playbackbar playbackbar-track-name `; + playbackbar.parentElement.classList.remove("no-fade"); + + putFade("playbackbar-name-fade", "carousel-small-playbackbar", 20000); + break; + case textElement.length > 40 && textElement.length < 90: + playbackbar.className = `carousel-medium-playbackbar playbackbar-track-name `; + playbackbar.parentElement.classList.remove("no-fade"); + + putFade("playbackbar-name-fade", "carousel-medium-playbackbar", 25000); + + break; + case textElement.length > 90: + playbackbar.className = `carousel-large-playbackbar playbackbar-track-name `; + playbackbar.parentElement.classList.remove("no-fade"); + + putFade("playbackbar-name-fade", "carousel-large-playbackbar", 30000); + + break; + + default: + playbackbar.className = `playbackbar-track-name `; + playbackbar.parentElement.classList.add("no-fade"); + } +} diff --git a/src-mobile/script/components/checkTextAndAddCarroussel.js b/src-mobile/script/components/checkTextAndAddCarroussel.js deleted file mode 100644 index c98c579..0000000 --- a/src-mobile/script/components/checkTextAndAddCarroussel.js +++ /dev/null @@ -1,28 +0,0 @@ -function getTrackElements(className) { - const elements = document.querySelectorAll(`.${className}`); - return elements; -} - -export function checkText(className) { - const elements = getTrackElements(className); - - elements.forEach((element) => { - const textElement = element.textContent; - - //this switch is to verify text sizes. - switch (true) { - case textElement.length > 21 && textElement.length < 40: - element.className = `carrousel-small ${className} `; - break; - case textElement.length > 40 && textElement.length < 90: - element.className = `carrousel-medium ${className} `; - break; - case textElement.length > 90: - element.className = `carrousel-large ${className} `; - break; - - default: - element.className = `${className} `; - } - }); -} diff --git a/src-mobile/script/components/checkTrackTextAndAddCarroussel.js b/src-mobile/script/components/checkTrackTextAndAddCarroussel.js new file mode 100644 index 0000000..1831084 --- /dev/null +++ b/src-mobile/script/components/checkTrackTextAndAddCarroussel.js @@ -0,0 +1,29 @@ +import { putFade } from "./putFade.js"; + +export function checkTrackText() { + const tracks = document.querySelectorAll(`.content-track-name`); + + tracks.forEach((track) => { + const textElement = track.textContent; + + switch (true) { + case textElement.length > 21 && textElement.length < 40: + track.className = `carousel-small-track content-track-name `; + putFade("track-name-fade", "carousel-small-track", 20000); + break; + case textElement.length > 40 && textElement.length < 90: + track.className = `carousel-medium-track content-track-name `; + putFade("track-name-fade", "carousel-medium-track", 25000); + + break; + case textElement.length > 90: + track.className = `carousel-large-track content-track-name `; + putFade("track-name-fade", "carousel-large-track", 30000); + + break; + + default: + track.className = `content-track-name `; + } + }); +} diff --git a/src-mobile/script/components/putFade.js b/src-mobile/script/components/putFade.js new file mode 100644 index 0000000..fc956d6 --- /dev/null +++ b/src-mobile/script/components/putFade.js @@ -0,0 +1,38 @@ +export function putFade(classFade, carouselName, duration) { + const carousels = document.querySelectorAll(`.${carouselName}`); + const animationDuration = duration; + + let animationStartTime = null; + + // Function to toggle the "classFade" class based on animation progress + const toggleTrackNameFade = (progress) => { + carousels.forEach((carousel) => { + if (progress >= 0 && progress <= 20) { + carousel.parentElement.classList.remove(`${classFade}`); + } else { + carousel.parentElement.classList.add(`${classFade}`); + } + }); + }; + + // Function to update the carousel based on current time and animation duration + const updateCarousel = () => { + const currentTime = Date.now(); + const elapsedTime = (currentTime - animationStartTime) % animationDuration; + const animationProgress = (elapsedTime / animationDuration) * 100; + + toggleTrackNameFade(animationProgress); + requestAnimationFrame(updateCarousel); + }; + + // Initialize animation start time on animation iteration + carousels.forEach((carousel) => { + carousel.addEventListener("animationiteration", () => { + animationStartTime = Date.now(); + }); + }); + + // Start monitoring the carousel animation + animationStartTime = Date.now(); + requestAnimationFrame(updateCarousel); +} diff --git a/src-mobile/script/components/renderPlaybackbar.js b/src-mobile/script/components/renderPlaybackbar.js index 9c70c23..aa11557 100644 --- a/src-mobile/script/components/renderPlaybackbar.js +++ b/src-mobile/script/components/renderPlaybackbar.js @@ -1,6 +1,6 @@ export function renderPlaybackbar(trackTitle) { const playbackbar = document.querySelector(".playbackbar"); - const playbackTrackName = document.querySelector(".playbackbarTrack-name"); + const playbackTrackName = document.querySelector(".playbackbar-track-name"); playbackTrackName.textContent = trackTitle; playbackbar.style.display = "flex"; diff --git a/src-mobile/script/handlers/handlePlayButton.js b/src-mobile/script/handlers/handlePlayButton.js index 0b25dac..2af6ad9 100644 --- a/src-mobile/script/handlers/handlePlayButton.js +++ b/src-mobile/script/handlers/handlePlayButton.js @@ -1,7 +1,7 @@ +import { checkplaybackbarText } from "../components/checkPlaybackbarTextAndAddCarousel.js"; import { renderPlaybackbar } from "../components/renderPlaybackbar.js"; import { putPlayTrack } from "../endpoints.js"; import { playTrackPlaybackbar } from "./handlePlayPlaybackbar.js"; -import { checkText } from "../components/checkTextAndAddCarroussel.js"; export function handlePlayButton(convertedTrack) { convertedTrack.forEach((track) => { @@ -10,7 +10,7 @@ export function handlePlayButton(convertedTrack) { button.addEventListener("click", () => { putPlayTrack(track.id); renderPlaybackbar(track.title); - checkText("playbackbarTrack-name"); + checkplaybackbarText(); playTrackPlaybackbar(); }); }); diff --git a/src-mobile/script/index.js b/src-mobile/script/index.js index 0f2f307..75347e8 100644 --- a/src-mobile/script/index.js +++ b/src-mobile/script/index.js @@ -5,7 +5,7 @@ import { convertTracks } from "./handlers/handleTracks.js"; import { handlePlayPlaybackbar } from "./handlers/handlePlayPlaybackbar.js"; import { handleNextPlaybackbar } from "./handlers/handleNextPlaybackbar.js"; import { handlePreviousPlaybackbar } from "./handlers/handlePreviousPlaybackbar.js"; -import { checkText } from "./components/checkTextAndAddCarroussel.js"; +import { checkTrackText } from "./components/checkTrackTextAndAddCarroussel.js"; const tracks = await getTracks(); const convertedTracks = convertTracks(tracks); @@ -15,4 +15,4 @@ handlePlayButton(convertedTracks); handlePlayPlaybackbar(); handleNextPlaybackbar(); handlePreviousPlaybackbar(); -checkText("track-name"); +checkTrackText(); diff --git a/src-mobile/script/templates/TrackTemplate.js b/src-mobile/script/templates/TrackTemplate.js index 8959c6f..b7749d1 100644 --- a/src-mobile/script/templates/TrackTemplate.js +++ b/src-mobile/script/templates/TrackTemplate.js @@ -7,14 +7,17 @@ export function getTrackTemplate(track) { container.innerHTML = `
-
${track.title}
-
${track.playlist}
+
+
${track.title}
-
-
-
+
+
${track.playlist}
+
+
+
+
`; container.className = "container-track"; diff --git a/src-mobile/style/index.css b/src-mobile/style/index.css index e742d7c..8a9f9d5 100644 --- a/src-mobile/style/index.css +++ b/src-mobile/style/index.css @@ -84,6 +84,11 @@ a { border-radius: 20px 50px 50px 20px; } +.track-name-no-fade::before, +.track-name-no-fade::after { + content: none; +} + .track-informations { overflow: hidden; display: flex; @@ -92,36 +97,70 @@ a { flex-direction: column; width: 70%; height: 100px; - margin-left: 7%; + margin-left: 1%; } -.carrousel-small { - animation: carrousel-small 15s linear infinite; +.track-name-fade { + position: relative; +} + +.track-name-fade::before, +.track-name-fade::after { + content: ""; + position: absolute; + width: 50px; + height: 100%; + z-index: 2; } -.carrousel-medium { - animation: carrousel-medium 25s linear infinite; +.track-name-fade::before { + margin-left: -1px; + left: 0; + background: linear-gradient( + to right, + var(--cinza-escuro), + rgba(255, 255, 255, 0) + ); } -.carrousel-large { - animation: carrousel-large 30s linear infinite; +.track-name-fade::after { + margin-right: -1px; + top: 5%; + right: 0; + background: linear-gradient( + to left, + var(--cinza-escuro), + rgba(255, 255, 255, 0) + ); } -.track-name { +.content-track-name { width: 100%; white-space: nowrap; font-size: 110%; } -.track-playlist { +.content-track-playlist { font-size: 110%; } -.track-player { +.content-track-player { display: flex; justify-content: center; align-items: center; width: 30%; } +.carousel-small-track { + animation: carousel-small 20s linear infinite; +} + +.carousel-medium-track { + animation: carousel-medium 25s linear infinite; +} + +.carousel-large-track { + animation: carousel-large 30s linear infinite; +} + .play-button { display: flex; align-items: center; @@ -163,7 +202,7 @@ a { margin-inline: 6%; overflow: hidden; } -.playbackbarTrack-name { +.playbackbar-track-name { white-space: nowrap; width: 100%; font-size: 100%; @@ -186,65 +225,106 @@ button img { width: 45%; } -@keyframes carrousel-small { +.playbackbar-name-fade { + position: relative; +} + +.playbackbar-name-fade::before, +.playbackbar-name-fade::after { + content: ""; + position: absolute; + width: 50px; + height: 100%; + z-index: 2; +} + +.playbackbar-name-fade::before { + margin-left: -1px; + left: 0; + background: linear-gradient( + to right, + var(--cinza-claro), + rgba(255, 255, 255, 0) + ); +} + +.playbackbar-name-fade::after { + margin-right: -1px; + top: 5%; + right: 0; + background: linear-gradient( + to left, + var(--cinza-claro), + rgba(255, 255, 255, 0) + ); +} + +.no-fade.playbackbar-name-fade::before { + width: 0px !important; +} + +.carousel-small-playbackbar { + animation: carousel-small 20s linear infinite; +} + +.carousel-medium-playbackbar { + animation: carousel-medium 25s linear infinite; +} + +.carousel-large-playbackbar { + animation: carousel-large 30s linear infinite; +} + +@keyframes carousel-small { 0% { transform: translate(0%, 0); } - 15% { + 20% { transform: translate(0%, 0); } - 54% { - transform: translate(-170%, 0); + 75% { + transform: translate(-155%, 0); } - 54.5% { + 75.10% { transform: translate(100050%, 0); } - 55% { - transform: translate(100%, 0); - } - 77% { - transform: translate(0%, 0); + 75.11% { + transform: translate(95%, 0); } } -@keyframes carrousel-medium { +@keyframes carousel-medium { 0% { transform: translate(0%, 0); } - 15% { + 20% { transform: translate(0%, 0); } - 54% { - transform: translate(-370%, 0); + 75% { + transform: translate(-270%, 0); } - 54.5% { + 75.10% { transform: translate(100050%, 0); } - 55% { - transform: translate(100%, 0); - } - 77% { - transform: translate(0%, 0); + 75.11% { + transform: translate(95%, 0); } } -@keyframes carrousel-large { +@keyframes carousel-large { 0% { transform: translate(0%, 0); } - 15% { + 20% { transform: translate(0%, 0); } - 54% { - transform: translate(-470%, 0); + 75% { + transform: translate(-370%, 0); } - 54.5% { + 75.10% { transform: translate(100050%, 0); } - 55% { - transform: translate(100%, 0); - } - 77% { - transform: translate(0%, 0); + 75.11% { + transform: translate(95%, 0); } } From 47044e9f1c0928757726ecf828bd2d80a85c9d36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20R=C3=BChmann?= Date: Tue, 4 Jun 2024 01:17:33 -0300 Subject: [PATCH 3/3] Refactor: Improved readability and scalability of the checkTextAndAddCarousel function. --- src-mobile/index.html | 1 + .../checkPlaybackbarTextAndAddCarousel.js | 34 ------- .../components/checkTextAndAddCarousel.js | 32 ++++++ .../checkTrackTextAndAddCarroussel.js | 29 ------ .../subcomponents/addElementClass.js | 3 + .../components/{ => subcomponents}/putFade.js | 0 .../script/handlers/handlePlayButton.js | 4 +- src-mobile/script/index.js | 4 +- src-mobile/script/mock.js | 97 ------------------- src-mobile/script/templates/TrackTemplate.js | 6 +- src-mobile/style/index.css | 22 ++--- 11 files changed, 54 insertions(+), 178 deletions(-) delete mode 100644 src-mobile/script/components/checkPlaybackbarTextAndAddCarousel.js create mode 100644 src-mobile/script/components/checkTextAndAddCarousel.js delete mode 100644 src-mobile/script/components/checkTrackTextAndAddCarroussel.js create mode 100644 src-mobile/script/components/subcomponents/addElementClass.js rename src-mobile/script/components/{ => subcomponents}/putFade.js (100%) delete mode 100644 src-mobile/script/mock.js diff --git a/src-mobile/index.html b/src-mobile/index.html index adfe5ac..b606384 100644 --- a/src-mobile/index.html +++ b/src-mobile/index.html @@ -5,6 +5,7 @@ + Kreck diff --git a/src-mobile/script/components/checkPlaybackbarTextAndAddCarousel.js b/src-mobile/script/components/checkPlaybackbarTextAndAddCarousel.js deleted file mode 100644 index 424981b..0000000 --- a/src-mobile/script/components/checkPlaybackbarTextAndAddCarousel.js +++ /dev/null @@ -1,34 +0,0 @@ -import { putFade } from "./putFade.js"; - -export function checkplaybackbarText() { - const playbackbar = document.querySelector(`.playbackbar-track-name`); - - const textElement = playbackbar.textContent; - - switch (true) { - case textElement.length > 21 && textElement.length < 40: - playbackbar.className = `carousel-small-playbackbar playbackbar-track-name `; - playbackbar.parentElement.classList.remove("no-fade"); - - putFade("playbackbar-name-fade", "carousel-small-playbackbar", 20000); - break; - case textElement.length > 40 && textElement.length < 90: - playbackbar.className = `carousel-medium-playbackbar playbackbar-track-name `; - playbackbar.parentElement.classList.remove("no-fade"); - - putFade("playbackbar-name-fade", "carousel-medium-playbackbar", 25000); - - break; - case textElement.length > 90: - playbackbar.className = `carousel-large-playbackbar playbackbar-track-name `; - playbackbar.parentElement.classList.remove("no-fade"); - - putFade("playbackbar-name-fade", "carousel-large-playbackbar", 30000); - - break; - - default: - playbackbar.className = `playbackbar-track-name `; - playbackbar.parentElement.classList.add("no-fade"); - } -} diff --git a/src-mobile/script/components/checkTextAndAddCarousel.js b/src-mobile/script/components/checkTextAndAddCarousel.js new file mode 100644 index 0000000..30c953d --- /dev/null +++ b/src-mobile/script/components/checkTextAndAddCarousel.js @@ -0,0 +1,32 @@ +import { addElementClass } from "./subcomponents/addElementClass.js"; +import { putFade } from "./subcomponents/putFade.js"; + +function removeParentClass(element) { + element.parentElement.classList.remove("no-fade"); +} + +export function checkTextAndAddCarousel(where) { + const element = document.querySelectorAll(`.${where}-track-name`); + const classFade = `${where}-name-fade`; + + element.forEach((element) => { + const textElement = element.textContent; + + if (textElement.length > 21 && textElement.length <= 40) { + addElementClass(element, "small", `${where}`); + removeParentClass(element); + putFade(classFade, `carousel-small-${where}`, 20000); + } else if (textElement.length > 40 && textElement.length <= 90) { + addElementClass(element, "medium", `${where}`); + removeParentClass(element); + putFade(classFade, `carousel-medium-${where}`, 25000); + } else if (textElement.length > 90) { + addElementClass(element, "large", `${where}`); + removeParentClass(element); + putFade(classFade, `carousel-large-${where}`, 30000); + } else { + element.className = `${where}-track-name `; + element.parentElement.classList.add("no-fade"); + } + }); +} diff --git a/src-mobile/script/components/checkTrackTextAndAddCarroussel.js b/src-mobile/script/components/checkTrackTextAndAddCarroussel.js deleted file mode 100644 index 1831084..0000000 --- a/src-mobile/script/components/checkTrackTextAndAddCarroussel.js +++ /dev/null @@ -1,29 +0,0 @@ -import { putFade } from "./putFade.js"; - -export function checkTrackText() { - const tracks = document.querySelectorAll(`.content-track-name`); - - tracks.forEach((track) => { - const textElement = track.textContent; - - switch (true) { - case textElement.length > 21 && textElement.length < 40: - track.className = `carousel-small-track content-track-name `; - putFade("track-name-fade", "carousel-small-track", 20000); - break; - case textElement.length > 40 && textElement.length < 90: - track.className = `carousel-medium-track content-track-name `; - putFade("track-name-fade", "carousel-medium-track", 25000); - - break; - case textElement.length > 90: - track.className = `carousel-large-track content-track-name `; - putFade("track-name-fade", "carousel-large-track", 30000); - - break; - - default: - track.className = `content-track-name `; - } - }); -} diff --git a/src-mobile/script/components/subcomponents/addElementClass.js b/src-mobile/script/components/subcomponents/addElementClass.js new file mode 100644 index 0000000..ac2bf05 --- /dev/null +++ b/src-mobile/script/components/subcomponents/addElementClass.js @@ -0,0 +1,3 @@ +export function addElementClass(element, carouselSize, where) { + element.className = `carousel-${carouselSize}-${where} ${where}-track-name `; +} diff --git a/src-mobile/script/components/putFade.js b/src-mobile/script/components/subcomponents/putFade.js similarity index 100% rename from src-mobile/script/components/putFade.js rename to src-mobile/script/components/subcomponents/putFade.js diff --git a/src-mobile/script/handlers/handlePlayButton.js b/src-mobile/script/handlers/handlePlayButton.js index 2af6ad9..adf4792 100644 --- a/src-mobile/script/handlers/handlePlayButton.js +++ b/src-mobile/script/handlers/handlePlayButton.js @@ -1,4 +1,4 @@ -import { checkplaybackbarText } from "../components/checkPlaybackbarTextAndAddCarousel.js"; +import { checkTextAndAddCarousel } from "../components/checkTextAndAddCarousel.js"; import { renderPlaybackbar } from "../components/renderPlaybackbar.js"; import { putPlayTrack } from "../endpoints.js"; import { playTrackPlaybackbar } from "./handlePlayPlaybackbar.js"; @@ -10,7 +10,7 @@ export function handlePlayButton(convertedTrack) { button.addEventListener("click", () => { putPlayTrack(track.id); renderPlaybackbar(track.title); - checkplaybackbarText(); + checkTextAndAddCarousel("playbackbar"); playTrackPlaybackbar(); }); }); diff --git a/src-mobile/script/index.js b/src-mobile/script/index.js index 75347e8..d97484d 100644 --- a/src-mobile/script/index.js +++ b/src-mobile/script/index.js @@ -5,7 +5,7 @@ import { convertTracks } from "./handlers/handleTracks.js"; import { handlePlayPlaybackbar } from "./handlers/handlePlayPlaybackbar.js"; import { handleNextPlaybackbar } from "./handlers/handleNextPlaybackbar.js"; import { handlePreviousPlaybackbar } from "./handlers/handlePreviousPlaybackbar.js"; -import { checkTrackText } from "./components/checkTrackTextAndAddCarroussel.js"; +import { checkTextAndAddCarousel } from "./components/checkTextAndAddCarousel.js"; const tracks = await getTracks(); const convertedTracks = convertTracks(tracks); @@ -15,4 +15,4 @@ handlePlayButton(convertedTracks); handlePlayPlaybackbar(); handleNextPlaybackbar(); handlePreviousPlaybackbar(); -checkTrackText(); +checkTextAndAddCarousel("trackSection"); diff --git a/src-mobile/script/mock.js b/src-mobile/script/mock.js deleted file mode 100644 index ea55cfd..0000000 --- a/src-mobile/script/mock.js +++ /dev/null @@ -1,97 +0,0 @@ -// https://localhost:8000/tracks - -fetch("https://jsonplaceholder.typicode.com/posts/", { - method: "GET", - headers: { "Content-Type": "application/json" }, -}) - .then((res) => res.json()) - .then((data) => { - console.log(data); - const content_music = document.querySelector(".content"); - data.forEach((track) => { - let music = document.createElement("div"); - music.innerHTML = ` -
-
${track.title.substring(0, 7)}
-
${track.body.substring(0, 7)}
-
-
-
-
-
`; - music.className = "container-music"; - content_music.appendChild(music); - - const playButton = music.querySelectorAll(".play-button"); - playButton.forEach((button) => { - button.addEventListener("click", () => { - document.querySelector(".sound-name").textContent = track.id; - document.querySelector(".sound-duration").textContent = - track.body.substring(0, 3); - const playbackbar = document.querySelector(".playbackbar"); - playbackbar.style.display = "flex"; - }); - }); - }); - }) - .catch((error) => { - console.error("Erro:", error); - }); - -// let mockActived = { -// className: "container-music", -// innerHTML: -// '
Music Name
3:06
', -// }; - -// let contentMusic = document.querySelector(".content"); - -// let music = document.createElement("div"); -// music.className = mockActived.className; -// music.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music); - -// let music2 = document.createElement("div"); -// music2.className = mockActived.className; -// music2.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music2); - -// let music3 = document.createElement("div"); -// music3.className = mockActived.className; -// music3.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music3); - -// let music4 = document.createElement("div"); -// music4.className = mockActived.className; -// music4.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music4); - -// let music5 = document.createElement("div"); -// music5.className = mockActived.className; -// music5.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music5); - -// let music6 = document.createElement("div"); -// music6.className = mockActived.className; -// music6.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music6); - -// let music7 = document.createElement("div"); -// music7.className = mockActived.className; -// music7.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music7); - -// let musci8 = document.createElement("div"); -// musci8.className = mockActived.className; -// musci8.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(musci8); - -// let music9 = document.createElement("div"); -// music9.className = mockActived.className; -// music9.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music9); - -// let music10 = document.createElement("div"); -// music10.className = mockActived.className; -// music10.innerHTML = mockActived.innerHTML; -// contentMusic.appendChild(music10); diff --git a/src-mobile/script/templates/TrackTemplate.js b/src-mobile/script/templates/TrackTemplate.js index b7749d1..5c9668a 100644 --- a/src-mobile/script/templates/TrackTemplate.js +++ b/src-mobile/script/templates/TrackTemplate.js @@ -8,13 +8,13 @@ export function getTrackTemplate(track) { container.innerHTML = `
-
${track.title}
+
${track.title}
-
${track.playlist}
+
${track.playlist}
-
+
diff --git a/src-mobile/style/index.css b/src-mobile/style/index.css index 8a9f9d5..1810fe1 100644 --- a/src-mobile/style/index.css +++ b/src-mobile/style/index.css @@ -100,12 +100,12 @@ a { margin-left: 1%; } -.track-name-fade { +.trackSection-name-fade { position: relative; } -.track-name-fade::before, -.track-name-fade::after { +.trackSection-name-fade::before, +.trackSection-name-fade::after { content: ""; position: absolute; width: 50px; @@ -113,7 +113,7 @@ a { z-index: 2; } -.track-name-fade::before { +.trackSection-name-fade::before { margin-left: -1px; left: 0; background: linear-gradient( @@ -123,7 +123,7 @@ a { ); } -.track-name-fade::after { +.trackSection-name-fade::after { margin-right: -1px; top: 5%; right: 0; @@ -134,30 +134,30 @@ a { ); } -.content-track-name { +.trackSection-track-name { width: 100%; white-space: nowrap; font-size: 110%; } -.content-track-playlist { +.trackSection-track-playlist { font-size: 110%; } -.content-track-player { +.trackSection-track-player { display: flex; justify-content: center; align-items: center; width: 30%; } -.carousel-small-track { +.carousel-small-trackSection { animation: carousel-small 20s linear infinite; } -.carousel-medium-track { +.carousel-medium-trackSection { animation: carousel-medium 25s linear infinite; } -.carousel-large-track { +.carousel-large-trackSection { animation: carousel-large 30s linear infinite; }