Changeset 48481cd in Klonkt


Ignore:
Timestamp:
08/20/2026 12:59:45 AM (3 weeks ago)
Author:
Robin <roboburr@…>
Branches:
main
Children:
4989294
Parents:
e46ebaa
git-author:
Robin <roboburr@…> (08/20/2026 12:57:38 AM)
git-committer:
Robin <roboburr@…> (08/20/2026 12:59:45 AM)
Message:

Apple Music: de hoogte hoort bij wat je insluit

Barts melding (20-8) over boiert.eu/the-mixtape: de afspeellijst daar stond
in een venster van 175px. Dat is de maat van een LOS NUMMER, dus je zag er
ongeveer een derde van -- en met overflow:hidden eroverheen viel de rest
ook niet te bereiken.

De hoogte stond vast voor alle drie de soorten. Nu volgt hij het pad:

song 175px
album, playlist 450px

De regex ving (album|playlist|song) al, maar gooide die groep weg; nu is
het een echte capture en beslist het woord in het pad. Geraden wordt er niet.

450 is niet uit de documentatie overgenomen maar nagemeten: de embed-pagina
van pl.u-LdbqzVvI3go5g geeft zijn <main> EN zijn <body> allebei precies
450px. Dat is ook de hoogte die Apple's eigen insluitcode gebruikt.

Vier tests erbij; drie ervan vallen om als je de hoogte weer vastzet.

Twee dingen die ik zag maar heb laten staan, want ze horen niet bij deze
melding: overflow:hidden maakt afgesneden inhoud onbereikbaar in plaats
van scrollbaar, en Apple's eigen code zet er ook een sandbox-attribuut op
dat wij niet hebben.

Suite 1169/1169.

Co-Authored-By: Claude Opus 5 <noreply@…>

Files:
2 edited

Legend:

Unmodified
Added
Removed

  • src/services/AudioEmbedService.js

    re46ebaa r48481cd  
    248248    // gevangen wordt gaat rechtstreeks achter https://embed.music.apple.com/ aan.
    249249    const match = url.match(
    250       /music\.apple\.com\/([a-z]{2}\/(?:album|playlist|song)\/[^/?#]+\/(?:[0-9]+|pl\.[A-Za-z0-9_-]+))/i,
     250      /music\.apple\.com\/([a-z]{2}\/(album|playlist|song)\/[^/?#]+\/(?:[0-9]+|pl\.[A-Za-z0-9_-]+))/i,
    251251    );
    252252    if (!match) return null;
    253253    const src = `https://embed.music.apple.com/${match[1]}`;
     254    // De hoogte hangt af van WAT je insluit, en dat stond hier op een vaste
     255    // 175px -- de maat van een LOS NUMMER. Een album of afspeellijst is 450px,
     256    // dus daarvan zag je ongeveer een derde, met `overflow:hidden` eroverheen
     257    // zodat de rest ook niet te bereiken viel. Barts melding (20-8) over
     258    // boiert.eu/the-mixtape.
     259    //
     260    // Nagemeten en niet overgenomen: de embed-pagina van die lijst
     261    // (pl.u-LdbqzVvI3go5g) geeft zijn <main> EN zijn <body> allebei precies
     262    // 450px. Dat is ook de hoogte in Apple's eigen insluitcode.
     263    const hoogte = String(match[2]).toLowerCase() === 'song' ? 175 : 450;
    254264    return `
    255265      <figure class="folio-embed folio-embed--applemusic">
    256266        <iframe src="${this.escape(src)}"
    257                 style="width:100%;height:175px;border:0;overflow:hidden;border-radius:8px;"
     267                style="width:100%;height:${hoogte}px;border:0;overflow:hidden;border-radius:8px;"
    258268                loading="lazy"
    259269                allow="autoplay; clipboard-write; encrypted-media"

  • test/apple-music-embed.test.js

    re46ebaa r48481cd  
    5353  }
    5454});
     55
     56// ── De hoogte hoort bij wat je insluit (Bart, 20-8) ─────────────────────────
     57// Op boiert.eu/the-mixtape stond een afspeellijst in een venster van 175px: de
     58// maat van een LOS NUMMER. Je zag ongeveer een derde, en `overflow:hidden`
     59// maakte de rest ook nog onbereikbaar.
     60//
     61// 450 is niet uit de documentatie overgenomen maar nagemeten: de embed-pagina
     62// van pl.u-LdbqzVvI3go5g geeft zijn <main> en <body> allebei precies 450px.
     63test('een afspeellijst krijgt 450px, niet de hoogte van een los nummer', () => {
     64  const html = AudioEmbedService.generateIframe('applemusic',
     65    { url: 'https://music.apple.com/nl/playlist/romance/pl.u-LdbqzVvI3go5g' });
     66  assert.match(html, /height:450px/, 'een lijst is 450 hoog');
     67  assert.ok(!/height:175px/.test(html), 'en zeker niet 175');
     68});
     69
     70test('een album ook: dat is dezelfde speler met een lijst erin', () => {
     71  const html = AudioEmbedService.generateIframe('applemusic',
     72    { url: 'https://music.apple.com/nl/album/blue/1440857781' });
     73  assert.match(html, /height:450px/);
     74});
     75
     76test('een los nummer blijft klein', () => {
     77  const html = AudioEmbedService.generateIframe('applemusic',
     78    { url: 'https://music.apple.com/nl/song/blue/1440857785' });
     79  assert.match(html, /height:175px/, 'een enkel nummer heeft geen lijst te tonen');
     80});
     81
     82test('en de soort wordt uit de URL gelezen, niet geraden', () => {
     83  // Dezelfde id-vorm, ander soort: alleen het woord in het pad mag beslissen.
     84  const lijst = AudioEmbedService.generateIframe('applemusic',
     85    { url: 'https://music.apple.com/us/playlist/x/pl.abc123def456' });
     86  const nummer = AudioEmbedService.generateIframe('applemusic',
     87    { url: 'https://music.apple.com/us/song/x/123456789' });
     88  assert.match(lijst, /height:450px/);
     89  assert.match(nummer, /height:175px/);
     90});
Note: See TracChangeset for help on using the changeset viewer.