Implement a preact component for youtube livestream player, insteadof Twitch

[Jean-Baptiste-Lasselle]

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 #62

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	4635c92
Status:	🚫  Build failed.

View logs

[Jean-Baptiste-Lasselle]

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

[Jean-Baptiste-Lasselle]

One problem

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

[Jean-Baptiste-Lasselle]

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 :

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]

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]

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]

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

• at build time, i use the Youtube Data API to fetch the thumbnail of the video playlist
• i then display that image, as an astro asset
• the image as it is clicked, will load the actual youtube player, the full iframe
• the best thing would be to also fetch:
• the share link
• the subscribe to channel link
• the title of the playlist
• and the 2 above are added on top of the thumbnail as components, meaning on top of thumbnail there is :
• the share link
• the subscirbe to channel link
• the play button with the youtube iconfrom react-icons
• the title of the playlist

Behavioral improvement:

• if no live is ongiong, the astro build also checks, by fetching the Yotube Data API, if there is a schefduled live, and if so, displays the thumbnail, the "notify me" button for the user to be notified when the live starts
• if a live is ongoing, then there also is a façade, and the play button clearly show a live is going on click me to start watching the live

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]

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

how to get the thumbnail of a given playlist :

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

[socket-security]

👍 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↗︎