Changeset 48481cd in Klonkt for src/services/AudioEmbedService.js


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@…>

File:
1 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"
Note: See TracChangeset for help on using the changeset viewer.