3forges / juste-un-curieux

Un site internet pour les curieux...
MIT License
0 stars 1 forks source link

Implement a preact component for youtube livestream player, insteadof Twitch #64

Open Jean-Baptiste-Lasselle opened 6 months ago

Jean-Baptiste-Lasselle commented 6 months ago

Il s'agit d'avoir un player youtube livestream dès le chargement de la page d'accueil du site Justin Curieux, à la place de Twitch

closes https://github.com/3forges/juste-un-curieux/issues/62

cloudflare-pages[bot] commented 6 months ago

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4635c92
Status:🚫  Build failed.

View logs

Jean-Baptiste-Lasselle commented 6 months ago

i locally confirmed the scheduled youtube live is picked up by my new component : image

Jean-Baptiste-Lasselle commented 6 months ago

One problem

When the YouTube LiveStream is finished, hereis what the player displays: image

Jean-Baptiste-Lasselle commented 6 months ago

bon, autre soucis: si je mets le player en mode embed directement, effectivement il y a un pb de perf, normal, il tape dans l'api pour savoir s'il y a un live en cours :

image

image

Bref, comme indiqué par lighthouse , il faut donc bien une façade, et l'idéal serait d'avoir un thumbnail cliquable, qui ressemble au player youtube sans pour autant l'être, ok ok ok :

https://developer.chrome.com/docs/lighthouse/performance/third-party-facades?utm_source=lighthouse&utm_medium=lr&hl=fr

Jean-Baptiste-Lasselle commented 6 months ago

est-il possible de vérifier si un live est en cours, sans authentification par API Key ?

https://stackoverflow.com/questions/56385532/how-to-find-if-a-youtube-channel-is-currently-live-streaming-without-using-searc

il pourrait aussi être imaginé qu'on demande une autorisation OAuth2 pour savoir si le live est en cours avec le user token, mais ça demanderait un côté serveur, ou en tout cas authentification puis autorisation

le mieux resterait un build juste avant chaque live, et un worker pour prefetch avec splash screen ...

https://stackoverflow.com/questions/56385532/how-to-find-if-a-youtube-channel-is-currently-live-streaming-without-using-searc

https://www.google.com/search?q=how+to+check+if+youtube+channel+is+streaming+live+without+authentication&sca_esv=a48dbaf87d89a746&ei=y8S_ZdvEH4mTkdUPt_m7uAQ&ved=0ahUKEwib1unElpKEAxWJSaQEHbf8DkcQ4dUDCBA&uact=5&oq=how+to+check+if+youtube+channel+is+streaming+live+without+authentication&gs_lp=Egxnd3Mtd2l6LXNlcnAiSGhvdyB0byBjaGVjayBpZiB5b3V0dWJlIGNoYW5uZWwgaXMgc3RyZWFtaW5nIGxpdmUgd2l0aG91dCBhdXRoZW50aWNhdGlvbkiOTVDQBljsSHAHeAGQAQCYAfgBoAGkGaoBBjMuMTcuM7gBA8gBAPgBAcICChAAGEcY1gQYsAPCAgUQIRigAcICBRAhGJ8FwgIEECEYFcICBxAhGAoYoAHCAgQQIRgK4gMEGAAgQYgGAZAGCA&sclient=gws-wiz-serp#ip=1

Après on peut supposer que les gens restent en permanence connectés auth à youtube, tel ou pc, c le cas en général . derrière il faudrait que je vois si je peut vérifier quel est le résultat de la requête HTTP faîte via le src='' avec l'iframe etc, pas sûr à voir. Tjrs est-il que l'hydraation n'est pas optimale avec client:visible s'il n'y a pas d'effet façade. On a vraiment un truc à trouver là.

socket-security[bot] commented 6 months ago

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@types/morgan@1.9.9 None +2 4.07 MB types
npm/@types/uuid@9.0.8 None 0 6.74 kB types
npm/astro-icon@1.1.0 Transitive: environment, filesystem, network, shell, unsafe +78 15.1 MB natemoo-re
npm/astro@4.3.3 Transitive: environment, eval, filesystem, network, shell, unsafe +375 92.5 MB fredkschott, matthewp, natemoo-re
npm/prettier@3.2.5 None 0 8.39 MB azz, duailibe, fisker, ...8 more
npm/redaxios@0.5.1 network 0 78.5 kB developit
npm/winston-daily-rotate-file@4.7.1 filesystem Transitive: environment, network +34 6.36 MB mattberther
npm/winston@3.11.0 filesystem, network Transitive: environment +30 1.87 MB dabh

🚮 Removed packages: npm/astro-icon@1.0.2, npm/astro@4.2.4, npm/prettier@3.2.4

View full report↗︎

Jean-Baptiste-Lasselle commented 6 months ago

idea about the performance issue, to implement the façade pattern :

Behavioral improvement:

another way to implement façade: having asplash screen displaying an animations while the component loads behind the scene as a prefetch...?

Jean-Baptiste-Lasselle commented 6 months ago

how to get the thumbnail of a given video (could work for a scheduled live) :

https://developers.google.com/youtube/v3/docs/videos?hl=en#resource-representation

image

how to get the thumbnail of a given playlist :

https://developers.google.com/youtube/v3/docs/playlists?hl=en#resource-representation

image

socket-security[bot] commented 6 months ago

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎