From 74a1c769785b09de26fe89bafe78fbd6396f468d Mon Sep 17 00:00:00 2001 From: Foxocube Date: Wed, 1 Jan 2025 15:00:25 +0000 Subject: [PATCH] Log stuff from YT JS API --- .../Providers/Youtube/VideoFrame.razor | 53 +++++++----- MediaFeeder/MediaFeeder/wwwroot/youtube.js | 85 +++++-------------- 2 files changed, 54 insertions(+), 84 deletions(-) diff --git a/MediaFeeder/MediaFeeder/Providers/Youtube/VideoFrame.razor b/MediaFeeder/MediaFeeder/Providers/Youtube/VideoFrame.razor index 2a9bee4..c037892 100644 --- a/MediaFeeder/MediaFeeder/Providers/Youtube/VideoFrame.razor +++ b/MediaFeeder/MediaFeeder/Providers/Youtube/VideoFrame.razor @@ -16,65 +16,77 @@ { if (firstRender) { - var _youtubeLibraryModule = await JsRuntime.InvokeAsync("import", "/iframe_api.js"); + var youtubeLibraryModule = await JsRuntime.InvokeAsync("import", "/iframe_api.js"); _youtubeCustomModule = await JsRuntime.InvokeAsync("import", "/youtube.js"); + Console.WriteLine($"_youtubeLibraryModule: {JsonSerializer.Serialize(youtubeLibraryModule)}"); + Console.WriteLine($"_youtubeCustomModule: {JsonSerializer.Serialize(_youtubeCustomModule)}"); + _videoFrameRef ??= DotNetObjectReference.Create(this); - await _youtubeCustomModule.InvokeVoidAsync("initPlayer", _videoFrameRef, VideoId); - } - } + var player = await _youtubeCustomModule.InvokeAsync("initPlayer", _videoFrameRef, VideoId); - protected override async Task OnParametersSetAsync() - { - if (_youtubeCustomModule != null) - { + Console.WriteLine($"player: {JsonSerializer.Serialize(player)}"); } } [JSInvokable] - public Task onPlayerReady(JsonElement eventData) + public Task OnPlayerReady(JsonElement eventData) { - Console.WriteLine("Player Ready: "); + Console.WriteLine($"Player Ready: {JsonSerializer.Serialize(eventData)}"); + // event.target.playVideo(); return Task.CompletedTask; } [JSInvokable] - public Task onPlaybackQualityChange(JsonElement eventData) + public Task OnPlaybackQualityChange(JsonElement eventData) { - Console.WriteLine("Quality change: "); + Console.WriteLine($"Quality change: {JsonSerializer.Serialize(eventData)}"); return Task.CompletedTask; } [JSInvokable] - public Task onPlaybackRateChange(object eventData) + public Task OnPlaybackRateChange(object eventData) { - Console.WriteLine("Playback rate change: "); + Console.WriteLine($"Playback rate change: {JsonSerializer.Serialize(eventData)}"); return Task.CompletedTask; } [JSInvokable] - public Task onError(object eventData) + public Task OnError(object eventData) { - Console.WriteLine("Playback Error: "); + Console.WriteLine($"Playback Error: {JsonSerializer.Serialize(eventData)}"); + + // if(eventData.data == 150) { + // // "This error is the same as 101. It's just a 101 error in disguise!" - from the YT API Documentation, not 100% this is true. + // // Skip to the next video after 10 seconds, do not mark as watched. + // setTimeout(goNextVideo, 10 * 1000); + // } return Task.CompletedTask; } [JSInvokable] - public Task onApiChange(object eventData) + public Task OnApiChange(object eventData) { - Console.WriteLine("API Change: "); + Console.WriteLine($"API Change: {JsonSerializer.Serialize(eventData)}"); return Task.CompletedTask; } [JSInvokable] - public Task onPlayerStateChange(JsonElement eventData) + public Task OnPlayerStateChange(JsonElement eventData) { - Console.WriteLine("State change: "); + Console.WriteLine($"State change: {JsonSerializer.Serialize(eventData)}"); + + // if (event.data == YT.PlayerState.ENDED) { + // console.log("Video finished!"); + // setWatchedStatus(1); + // } else if (event.data == YT.PlayerState.UNSTARTED) { + // player.playVideo(); + // } return Task.CompletedTask; } @@ -85,5 +97,4 @@ // _youtubeLibraryModule?.DisposeAsync(); _youtubeCustomModule?.DisposeAsync(); } - } diff --git a/MediaFeeder/MediaFeeder/wwwroot/youtube.js b/MediaFeeder/MediaFeeder/wwwroot/youtube.js index b8954c8..8b660aa 100644 --- a/MediaFeeder/MediaFeeder/wwwroot/youtube.js +++ b/MediaFeeder/MediaFeeder/wwwroot/youtube.js @@ -1,68 +1,27 @@ -let player; -let dotNetHelper; - -export function initPlayer(DotNetHelper, videoId) { +function initPlayer(DotNetHelper, videoId) +{ + "use strict"; console.log("Starting player init"); - dotNetHelper = DotNetHelper; - player = new YT.Player('ytplayer', { - height: '100%', - width: '100%', - videoId: videoId, - playerVars: { - origin: window.location, - autoplay: 1, - }, - events: { - 'onReady': onPlayerReady, - 'onStateChange': onPlayerStateChange, - 'onPlaybackQualityChange': onPlaybackQualityChange, - 'onPlaybackRateChange': onPlaybackRateChange, - 'onError': onError, - 'onApiChange': onApiChange - } - }); -} - -function onPlayerReady(event) { - dotNetHelper.invokeMethodAsync('onPlayerReady', event); - console.log("Player Ready: ", event); - event.target.playVideo(); -} - -function onPlaybackQualityChange(event) { - dotNetHelper.invokeMethodAsync('onPlaybackQualityChange', event); - console.log("Quality change: ", event); -} - -function onPlaybackRateChange(event) { - dotNetHelper.invokeMethodAsync('onPlaybackRateChange', event); - console.log("Playback rate change: ", event); -} - -function onError(event) { - dotNetHelper.invokeMethodAsync('onError', event); - console.log("Playback Error: ", event); - if(event.data == 150) { - // "This error is the same as 101. It's just a 101 error in disguise!" - from the YT API Documentation, not 100% this is true. - // Skip to the next video after 10 seconds, do not mark as watched. - setTimeout(goNextVideo, 10 * 1000); - } -} -function onApiChange(event) { - dotNetHelper.invokeMethodAsync('onApiChange', event); - console.log("API Change: ", event); -} - -function onPlayerStateChange(event) { - dotNetHelper.invokeMethodAsync('onPlayerStateChange', event); - console.log("State change: ", event); - if (event.data == YT.PlayerState.ENDED) { - console.log("Video finished!"); - setWatchedStatus(1); - } else if (event.data == YT.PlayerState.UNSTARTED) { - player.playVideo(); - } + return new YT.Player( + 'ytplayer', + { + height: '100%', + width: '100%', + videoId: videoId, + playerVars: { + origin: window.location, + autoplay: 1, + }, + events: { + 'onReady': (event => DotNetHelper.invokeMethodAsync('OnPlayerReady', event)), + 'onStateChange': (event => DotNetHelper.invokeMethodAsync('OnPlayerStateChange', event)), + 'onPlaybackQualityChange': (event => DotNetHelper.invokeMethodAsync('OnPlaybackQualityChange', event)), + 'onPlaybackRateChange': (event => DotNetHelper.invokeMethodAsync('OnPlaybackRateChange', event)), + 'onError': (event => DotNetHelper.invokeMethodAsync('OnError', event)), + 'onApiChange': (event => DotNetHelper.invokeMethodAsync('OnApiChange', event)), + } + }); } // function isFullScreen() {