Skip to content

Commit 19affe3

Browse files
CodexDavidKRKCopilotCopilot
authored
Lazy-load Mixcloud player on home & bio pages (#268)
* Initial plan * Lazy-load Mixcloud widgets on audited pages Co-authored-by: DavidKRK <136035295+DavidKRK@users.noreply.github.com> * Remove duplicated player CSS from music page * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: openai-code-agent[bot] <242516109+Codex@users.noreply.github.com> Co-authored-by: DavidKRK <136035295+DavidKRK@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
1 parent 7119c71 commit 19affe3

5 files changed

Lines changed: 238 additions & 47 deletions

File tree

‎assets/css/style.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,50 @@ footer {
322322
}
323323
}
324324

325+
/* ---------- PLAYER (on-demand load) ---------- */
326+
.player-load-wrapper {
327+
margin: 0 auto 2rem;
328+
max-width: 900px;
329+
padding: 0 1rem;
330+
text-align: center;
331+
}
332+
.player-load-btn {
333+
background: transparent;
334+
border: 1px solid var(--primary-color, #ff0000);
335+
border-radius: 999px;
336+
color: #fff;
337+
cursor: pointer;
338+
font-family: "Russo One", sans-serif;
339+
font-size: 0.95rem;
340+
letter-spacing: 0.05em;
341+
padding: 0.85rem 1.4rem;
342+
text-transform: uppercase;
343+
transition:
344+
background-color 0.2s ease,
345+
transform 0.2s ease;
346+
}
347+
.player-load-btn:hover,
348+
.player-load-btn:focus-visible {
349+
background: color-mix(in srgb, var(--primary-color, #ff0000) 15%, transparent);
350+
transform: translateY(-1px);
351+
}
352+
.player-load-note {
353+
color: rgba(255, 255, 255, 0.75);
354+
font-size: 0.9rem;
355+
margin-top: 0.75rem;
356+
}
357+
.visually-hidden {
358+
border: 0;
359+
clip: rect(0 0 0 0);
360+
height: 1px;
361+
margin: -1px;
362+
overflow: hidden;
363+
padding: 0;
364+
position: absolute;
365+
white-space: nowrap;
366+
width: 1px;
367+
}
368+
325369

326370
/* ---------- TYPOGRAPHY ---------- */
327371
.text-center .main-title {

‎assets/js/bio.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,84 @@ document.addEventListener('DOMContentLoaded', () => {
22
const langBtns = document.querySelectorAll('.language-btn');
33
const langContents = document.querySelectorAll('.lang-content');
44

5+
const mixcloudPlayerTrigger = document.getElementById('mixcloud-player-trigger');
6+
const mixcloudPlayerNote = document.getElementById('mixcloud-player-note');
7+
const mixcloudPlayerStatus = document.getElementById('mixcloud-player-status');
8+
const mixcloudPlayerContainer = document.getElementById('mixcloud-player-container');
9+
let mixcloudPlayerLoaded = false;
10+
11+
const langContent = {
12+
fr: {
13+
player_button: 'Charger le lecteur Mixcloud',
14+
player_loaded: 'Lecteur Mixcloud chargé',
15+
player_note: 'Le lecteur externe se charge à la demande pour accélérer l’affichage de la page.',
16+
player_status: 'Le lecteur Mixcloud est maintenant chargé.'
17+
},
18+
en: {
19+
player_button: 'Load Mixcloud player',
20+
player_loaded: 'Mixcloud player loaded',
21+
player_note: 'The external player loads on demand to speed up page rendering.',
22+
player_status: 'The Mixcloud player is now loaded.'
23+
},
24+
es: {
25+
player_button: 'Cargar el reproductor de Mixcloud',
26+
player_loaded: 'Reproductor de Mixcloud cargado',
27+
player_note: 'El reproductor externo se carga bajo demanda para acelerar la visualización de la página.',
28+
player_status: 'El reproductor de Mixcloud ya está cargado.'
29+
},
30+
eu: {
31+
player_button: 'Kargatu Mixcloud erreproduzitzailea',
32+
player_loaded: 'Mixcloud erreproduzitzailea kargatuta',
33+
player_note: 'Kanpoko erreproduzitzailea eskatu ahala kargatzen da orria azkarrago erakusteko.',
34+
player_status: 'Mixcloud erreproduzitzailea kargatuta dago orain.'
35+
},
36+
ar: {
37+
player_button: 'تحميل مشغل Mixcloud',
38+
player_loaded: 'تم تحميل مشغل Mixcloud',
39+
player_note: 'يتم تحميل المشغل الخارجي عند الطلب لتسريع عرض الصفحة.',
40+
player_status: 'تم الآن تحميل مشغل Mixcloud.'
41+
},
42+
uk: {
43+
player_button: 'Завантажити плеєр Mixcloud',
44+
player_loaded: 'Плеєр Mixcloud завантажено',
45+
player_note: 'Зовнішній плеєр завантажується на вимогу, щоб пришвидшити показ сторінки.',
46+
player_status: 'Плеєр Mixcloud тепер завантажено.'
47+
}
48+
};
49+
50+
function loadMixcloudPlayer() {
51+
if (mixcloudPlayerLoaded || !mixcloudPlayerTrigger || !mixcloudPlayerContainer) {
52+
return;
53+
}
54+
55+
const t = langContent[document.documentElement.lang] || langContent.fr;
56+
57+
mixcloudPlayerLoaded = true;
58+
mixcloudPlayerContainer.hidden = false;
59+
60+
const iframe = document.createElement('iframe');
61+
iframe.title = 'Mixcloud player';
62+
iframe.width = '100%';
63+
iframe.height = '120';
64+
iframe.style.border = '0';
65+
iframe.src = 'https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&feed=%2FDavidKRK%2F';
66+
iframe.allow = 'autoplay; encrypted-media; fullscreen; idle-detection; speaker-selection; web-share';
67+
68+
mixcloudPlayerContainer.appendChild(iframe);
69+
70+
mixcloudPlayerTrigger.disabled = true;
71+
mixcloudPlayerTrigger.textContent = t.player_loaded;
72+
mixcloudPlayerTrigger.setAttribute('aria-label', t.player_loaded);
73+
74+
if (mixcloudPlayerStatus) {
75+
mixcloudPlayerStatus.textContent = t.player_status;
76+
}
77+
}
78+
79+
if (mixcloudPlayerTrigger) {
80+
mixcloudPlayerTrigger.addEventListener('click', loadMixcloudPlayer);
81+
}
82+
583
function switchLanguage(lang) {
684
const clickedBtn = document.querySelector(`.language-btn[data-lang="${lang}"]`);
785

@@ -19,6 +97,15 @@ document.addEventListener('DOMContentLoaded', () => {
1997
// Update document language and text direction for accessibility and RTL support
2098
document.documentElement.lang = lang;
2199
document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
100+
101+
const t = langContent[lang] || langContent.fr;
102+
if (mixcloudPlayerTrigger) {
103+
const playerLabel = mixcloudPlayerLoaded ? t.player_loaded : t.player_button;
104+
mixcloudPlayerTrigger.textContent = playerLabel;
105+
mixcloudPlayerTrigger.setAttribute('aria-label', playerLabel);
106+
}
107+
if (mixcloudPlayerNote) mixcloudPlayerNote.textContent = t.player_note;
108+
if (mixcloudPlayerStatus) mixcloudPlayerStatus.textContent = mixcloudPlayerLoaded ? t.player_status : '';
22109
}
23110

24111
langBtns.forEach(btn => {

‎bio.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,17 @@ <h1 class="main-title">David KRK</h1>
194194
</main>
195195

196196
<footer>
197+
<section class="player-load-wrapper" aria-labelledby="mixcloud-player-trigger">
198+
<button type="button" id="mixcloud-player-trigger" class="player-load-btn" aria-controls="mixcloud-player-container" aria-expanded="false" aria-describedby="mixcloud-player-note">
199+
Charger le lecteur Mixcloud
200+
</button>
201+
<p id="mixcloud-player-note" class="player-load-note">Le lecteur externe se charge à la demande pour accélérer l’affichage de la page.</p>
202+
<p id="mixcloud-player-status" class="visually-hidden" role="status" aria-live="polite"></p>
203+
<div id="mixcloud-player-container" class="player-container" hidden></div>
204+
<noscript>
205+
<p class="player-load-note"><a href="https://www.mixcloud.com/DavidKRK/" target="_blank" rel="noopener noreferrer">Listen on Mixcloud</a></p>
206+
</noscript>
207+
</section>
197208
<nav class="flex justify-center gap-6 mb-4" aria-label="Liens vers les réseaux sociaux">
198209
<a href="https://www.facebook.com/DavidKRKofficial" target="_blank" rel="noopener noreferrer" aria-label="Facebook"
199210
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-facebook" aria-hidden="true"></i></a>

‎index.html‎

Lines changed: 96 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -115,13 +115,16 @@ <h1 class="main-title">David KRK</h1>
115115
</div>
116116

117117

118-
<!-- Slider "player‑widget" (optionnel) -->
119-
<section class="mt-8 mb-8 player-container">
120-
<iframe title="Mixcloud player" width="100%" height="120"
121-
loading="lazy"
122-
style="border:0;"
123-
src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&feed=%2FDavidKRK%2Fdavid-krk-life-good-techno-ep3%2F"
124-
allow="autoplay; encrypted-media; fullscreen; idle-detection; speaker-selection; web-share"></iframe>
118+
<section class="player-load-wrapper" aria-labelledby="mixcloud-player-trigger">
119+
<button type="button" id="mixcloud-player-trigger" class="player-load-btn" aria-controls="mixcloud-player-container" aria-expanded="false" aria-describedby="mixcloud-player-note">
120+
Charger le lecteur Mixcloud
121+
</button>
122+
<p id="mixcloud-player-note" class="player-load-note">Le lecteur externe se charge à la demande pour accélérer l’affichage de la page.</p>
123+
<p id="mixcloud-player-status" class="visually-hidden" role="status" aria-live="polite"></p>
124+
<div id="mixcloud-player-container" class="player-container" hidden></div>
125+
<noscript>
126+
<p class="player-load-note"><a href="https://www.mixcloud.com/DavidKRK/" target="_blank" rel="noopener noreferrer">Listen on Mixcloud</a></p>
127+
</noscript>
125128
</section>
126129
</main>
127130

@@ -154,8 +157,85 @@ <h1 class="main-title">David KRK</h1>
154157

155158
<script>
156159
document.addEventListener('DOMContentLoaded', () => {
160+
const mixcloudPlayerTrigger = document.getElementById('mixcloud-player-trigger');
161+
const mixcloudPlayerNote = document.getElementById('mixcloud-player-note');
162+
const mixcloudPlayerStatus = document.getElementById('mixcloud-player-status');
163+
const mixcloudPlayerContainer = document.getElementById('mixcloud-player-container');
157164
const langBtns = document.querySelectorAll('.language-btn');
158165
const langContents = document.querySelectorAll('.lang-content');
166+
let mixcloudPlayerLoaded = false;
167+
168+
const langContent = {
169+
fr: {
170+
player_button: 'Charger le lecteur Mixcloud',
171+
player_loaded: 'Lecteur Mixcloud chargé',
172+
player_note: 'Le lecteur externe se charge à la demande pour accélérer l’affichage de la page.',
173+
player_status: 'Le lecteur Mixcloud est maintenant chargé.'
174+
},
175+
en: {
176+
player_button: 'Load Mixcloud player',
177+
player_loaded: 'Mixcloud player loaded',
178+
player_note: 'The external player loads on demand to speed up page rendering.',
179+
player_status: 'The Mixcloud player is now loaded.'
180+
},
181+
es: {
182+
player_button: 'Cargar el reproductor de Mixcloud',
183+
player_loaded: 'Reproductor de Mixcloud cargado',
184+
player_note: 'El reproductor externo se carga bajo demanda para acelerar la visualización de la página.',
185+
player_status: 'El reproductor de Mixcloud ya está cargado.'
186+
},
187+
eu: {
188+
player_button: 'Kargatu Mixcloud erreproduzitzailea',
189+
player_loaded: 'Mixcloud erreproduzitzailea kargatuta',
190+
player_note: 'Kanpoko erreproduzitzailea eskatu ahala kargatzen da orria azkarrago erakusteko.',
191+
player_status: 'Mixcloud erreproduzitzailea kargatuta dago orain.'
192+
},
193+
ar: {
194+
player_button: 'تحميل مشغل Mixcloud',
195+
player_loaded: 'تم تحميل مشغل Mixcloud',
196+
player_note: 'يتم تحميل المشغل الخارجي عند الطلب لتسريع عرض الصفحة.',
197+
player_status: 'تم الآن تحميل مشغل Mixcloud.'
198+
},
199+
uk: {
200+
player_button: 'Завантажити плеєр Mixcloud',
201+
player_loaded: 'Плеєр Mixcloud завантажено',
202+
player_note: 'Зовнішній плеєр завантажується на вимогу, щоб пришвидшити показ сторінки.',
203+
player_status: 'Плеєр Mixcloud тепер завантажено.'
204+
}
205+
};
206+
207+
function loadMixcloudPlayer() {
208+
if (mixcloudPlayerLoaded || !mixcloudPlayerTrigger || !mixcloudPlayerContainer) {
209+
return;
210+
}
211+
212+
const t = langContent[document.documentElement.lang] || langContent.fr;
213+
214+
mixcloudPlayerLoaded = true;
215+
mixcloudPlayerContainer.hidden = false;
216+
217+
const iframe = document.createElement('iframe');
218+
iframe.title = 'Mixcloud player';
219+
iframe.width = '100%';
220+
iframe.height = '120';
221+
iframe.style.border = '0';
222+
iframe.src = 'https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&feed=%2FDavidKRK%2Fdavid-krk-life-good-techno-ep3%2F';
223+
iframe.allow = 'autoplay; encrypted-media; fullscreen; idle-detection; speaker-selection; web-share';
224+
225+
mixcloudPlayerContainer.appendChild(iframe);
226+
227+
mixcloudPlayerTrigger.setAttribute('aria-expanded', 'true');
228+
mixcloudPlayerTrigger.disabled = true;
229+
mixcloudPlayerTrigger.textContent = t.player_loaded;
230+
mixcloudPlayerTrigger.setAttribute('aria-label', t.player_loaded);
231+
if (mixcloudPlayerStatus) {
232+
mixcloudPlayerStatus.textContent = t.player_status;
233+
}
234+
}
235+
236+
if (mixcloudPlayerTrigger) {
237+
mixcloudPlayerTrigger.addEventListener('click', loadMixcloudPlayer);
238+
}
159239

160240
function switchLanguage(lang) {
161241
langContents.forEach(content => {
@@ -178,6 +258,15 @@ <h1 class="main-title">David KRK</h1>
178258
// Update document language and text direction for accessibility and RTL support
179259
document.documentElement.lang = lang;
180260
document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
261+
262+
const t = langContent[lang] || langContent.fr;
263+
if (mixcloudPlayerTrigger) {
264+
const playerLabel = mixcloudPlayerLoaded ? t.player_loaded : t.player_button;
265+
mixcloudPlayerTrigger.textContent = playerLabel;
266+
mixcloudPlayerTrigger.setAttribute('aria-label', playerLabel);
267+
}
268+
if (mixcloudPlayerNote) mixcloudPlayerNote.textContent = t.player_note;
269+
if (mixcloudPlayerStatus) mixcloudPlayerStatus.textContent = mixcloudPlayerLoaded ? t.player_status : '';
181270
}
182271

183272
langBtns.forEach(btn => {

‎music.html‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -91,46 +91,6 @@
9191
color: rgba(255,255,255,0.5);
9292
font-size: 0.75rem;
9393
}
94-
.player-load-wrapper {
95-
margin: 0 auto 2rem;
96-
max-width: 900px;
97-
padding: 0 1rem;
98-
text-align: center;
99-
}
100-
.player-load-btn {
101-
background: transparent;
102-
border: 1px solid var(--primary-color, #ff0000);
103-
border-radius: 999px;
104-
color: #fff;
105-
cursor: pointer;
106-
font-family: 'Russo One', sans-serif;
107-
font-size: 0.95rem;
108-
letter-spacing: 0.05em;
109-
padding: 0.85rem 1.4rem;
110-
text-transform: uppercase;
111-
transition: background-color 0.2s ease, transform 0.2s ease;
112-
}
113-
.player-load-btn:hover,
114-
.player-load-btn:focus-visible {
115-
background: color-mix(in srgb, var(--primary-color, #ff0000) 15%, transparent);
116-
transform: translateY(-1px);
117-
}
118-
.player-load-note {
119-
color: rgba(255,255,255,0.75);
120-
font-size: 0.9rem;
121-
margin-top: 0.75rem;
122-
}
123-
.visually-hidden {
124-
border: 0;
125-
clip: rect(0 0 0 0);
126-
height: 1px;
127-
margin: -1px;
128-
overflow: hidden;
129-
padding: 0;
130-
position: absolute;
131-
white-space: nowrap;
132-
width: 1px;
133-
}
13494
</style>
13595
</head>
13696
<body class="music-page">

0 commit comments

Comments
 (0)