Skip to content

Commit

Permalink
Update: [Client][Player] ログ出力を増やして色分けする
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsukumijima
tsukumijima committed Oct 25, 2023
1 parent e480921 commit a28fb5f
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 19 deletions.
23 changes: 21 additions & 2 deletions client/src/services/player/PlayerWrapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ class PlayerWrapper {
private readonly romsounds_context: AudioContext = new AudioContext();
private readonly romsounds_buffers: AudioBuffer[] = [];

// 破棄中かどうか
// 破棄中は destroy() が呼ばれても何もしない
private destroying = false;

// 破棄済みかどうか
private destroyed = false;

Expand Down Expand Up @@ -109,6 +113,8 @@ class PlayerWrapper {
const player_store = usePlayerStore();
const settings_store = useSettingsStore();

console.log('\u001b[31m[PlayerWrapper] Initializing...');

// 破棄済みかどうかのフラグを下ろす
this.destroyed = false;

Expand Down Expand Up @@ -449,6 +455,8 @@ class PlayerWrapper {
// これにより各 PlayerManager での実際の処理が開始される
// 同期処理すると時間が掛かるので、並行して実行する
await Promise.all(this.player_managers.map((player_manager) => player_manager.init()));

console.log('\u001b[31m[PlayerWrapper] Initialized.');
}


Expand Down Expand Up @@ -483,7 +491,7 @@ class PlayerWrapper {

// この時点で映像が停止している場合、復旧を試みる
if (this.player.video.readyState < 3) {
console.log('player.video.readyState < HAVE_FUTURE_DATA. trying to recover.');
console.log('\u001b[31m[PlayerWrapper] player.video.readyState < HAVE_FUTURE_DATA. trying to recover.');

// 一旦停止して、0.1 秒間を置く
this.player.video.pause();
Expand All @@ -492,7 +500,7 @@ class PlayerWrapper {
// 再度再生を試みる
this.player.video.play().catch(() => {
assert(this.player !== null);
console.warn('HTMLVideoElement.play() rejected. paused.');
console.warn('\u001b[31m[PlayerWrapper] HTMLVideoElement.play() rejected. paused.');
this.player.pause();
});
}
Expand Down Expand Up @@ -930,6 +938,14 @@ class PlayerWrapper {
return;
}

// すでに破棄中なら何もしない
if (this.destroying === true) {
return;
}
this.destroying = true;

console.log('\u001b[31m[PlayerWrapper] Destroying...');

// 登録されている PlayerManager をすべて破棄
// CSS アニメーションの関係上、ローディング状態にする前に破棄する必要がある (特に LiveDataBroadcastingManager)
// 同期処理すると時間が掛かるので、並行して実行する
Expand Down Expand Up @@ -978,7 +994,10 @@ class PlayerWrapper {
}

// 破棄済みかどうかのフラグを立てる
this.destroying = false;
this.destroyed = true;

console.log('\u001b[31m[PlayerWrapper] Destroyed.');
}
}

Expand Down
10 changes: 7 additions & 3 deletions client/src/services/player/managers/CaptureManager2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ class CaptureManager implements PlayerManager {
// キャプチャボタンがクリックされたら、非同期でキャプチャと保存を行う
this.capture_button.addEventListener('click', () => this.captureAndSave(false));
this.comment_capture_button.addEventListener('click', () => this.captureAndSave(true));

console.log('[CaptureManager] Initialized.');
}


Expand Down Expand Up @@ -322,7 +324,7 @@ class CaptureManager implements PlayerManager {
// キャプチャの合成を実行し、字幕なしキャプチャと字幕ありキャプチャを生成する
// Web Worker 側に ImageBitmap を移譲するため、Comlink.transfer() を使う
// 第二引数に (第一引数内のオブジェクトに含まれる) 移譲する Transferable オブジェクトを渡す
console.log('[CaptureManager] Composite start:');
console.log('\u001b[36m[CaptureManager] Composite start:');
const capture_compositor_start_time = Utils.time();
const capture_compositor = await new CaptureCompositorProxy(Comlink.transfer({
mode: settings_store.settings.capture_caption_mode,
Expand All @@ -333,7 +335,7 @@ class CaptureManager implements PlayerManager {
capture_exif_data: capture_exif_data,
}, image_bitmaps));
const result = await capture_compositor.composite();
console.log('[CaptureManager] Composite end:', Utils.mathFloor(Utils.time() - capture_compositor_start_time, 3), 'sec');
console.log('\u001b[36m[CaptureManager] Composite end:', Utils.mathFloor(Utils.time() - capture_compositor_start_time, 3), 'sec');

// ファイル名（拡張子なし）
// TODO: ファイル名パターンを設定で変更できるようにする
Expand Down Expand Up @@ -394,7 +396,7 @@ class CaptureManager implements PlayerManager {
} else {
this.removeHighlight(is_comment_composite);
}
console.log('[CaptureManager] Total:', total_time, 'sec');
console.log('\u001b[36m[CaptureManager] Total:', total_time, 'sec');

// ***** クリップボードへのキャプチャ画像のコピー *****

Expand Down Expand Up @@ -423,7 +425,9 @@ class CaptureManager implements PlayerManager {
* このため、代わりに init() 側にすでにキャプチャボタンが追加済みであれば一旦削除する処理を入れている
*/
public async destroy(): Promise<void> {

// 何もしない
console.log('[CaptureManager] Destroyed.');
}
}

Expand Down
10 changes: 7 additions & 3 deletions client/src/services/player/managers/LiveCommentManager2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ class LiveCommentManager implements PlayerManager {
// 視聴セッションを初期化できた場合のみ、
// 取得したコメントサーバーへの接続情報を使い、非同期でコメントセッションを初期化
this.initCommentSession(watch_session_info);

console.log('[LiveCommentManager] Initialized.');
}


Expand Down Expand Up @@ -607,7 +609,7 @@ class LiveCommentManager implements PlayerManager {
const player_store = usePlayerStore();

// 再接続を開始
console.warn('[LiveCommentManager][WatchSession] Reconnecting...');
console.warn('[LiveCommentManager] Reconnecting...');
this.player.notice('ニコニコ実況に再接続しています…');

// 前の視聴セッション・コメントセッションを破棄
Expand All @@ -620,7 +622,7 @@ class LiveCommentManager implements PlayerManager {
// 初期化に失敗した際のエラーメッセージを設定する
// UI 側のエラー表示に利用されるほか、null から string になったことで初期化に失敗したことを示す
player_store.live_comment_init_failed_message = watch_session_info.detail;
console.error('[LiveCommentManager][WatchSession] Reconnection failed.');
console.error('[LiveCommentManager] Reconnection failed.');

// 無条件にエラーメッセージをプレイヤーに通知
this.player.notice(watch_session_info.detail, undefined, undefined, '#FF6F6A');
Expand All @@ -630,6 +632,8 @@ class LiveCommentManager implements PlayerManager {
// 視聴セッションを初期化できた場合のみ、
// 取得したコメントサーバーへの接続情報を使い、非同期でコメントセッションを初期化
this.initCommentSession(watch_session_info);

console.warn('[LiveCommentManager] Reconnected.');
}


Expand Down Expand Up @@ -666,7 +670,7 @@ class LiveCommentManager implements PlayerManager {
// 初期化に失敗した際のエラーメッセージを削除
player_store.live_comment_init_failed_message = null;

console.log('[LiveCommentManager][WatchSession] Destroyed.');
console.log('[LiveCommentManager] Destroyed.');
}
}

Expand Down
6 changes: 4 additions & 2 deletions client/src/services/player/managers/LiveDataBroadcastingManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,6 @@ class LiveDataBroadcastingManager implements PlayerManager {
});
this.bml_browser_width = 960;
this.bml_browser_height = 540;
console.log('[LiveDataBroadcastingManager] BMLBrowser initialized.');

// BML ブラウザがロードされたときのイベント
this.#bml_browser.addEventListener('load', (event) => {
Expand Down Expand Up @@ -361,6 +360,8 @@ class LiveDataBroadcastingManager implements PlayerManager {
}
}
}));

console.log('[LiveDataBroadcastingManager] Initialized.');
}


Expand Down Expand Up @@ -600,10 +601,11 @@ class LiveDataBroadcastingManager implements PlayerManager {
await this.#bml_browser.destroy();
this.is_bml_browser_destroying = false;
this.#bml_browser = null;
console.log('[LiveDataBroadcastingManager] BMLBrowser destroyed.');

// BML ブラウザの要素を削除
this.container_element?.remove();

console.log('[LiveDataBroadcastingManager] Destroyed.');
}
}
}
Expand Down
10 changes: 7 additions & 3 deletions client/src/services/player/managers/LiveEventManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ class LiveEventManager implements PlayerManager {

// イベントを取得
const event: ILiveStreamStatusEvent = JSON.parse(event_raw.data);
console.log(`[initial_update] Status: ${event.status} / Detail: ${event.detail}`);
console.log('\u001b[33m[LiveEventManager][initial_update]', `\nStatus: ${event.status} / Detail: ${event.detail}`);

// ステータスごとに処理を振り分け
switch (event.status) {
Expand All @@ -89,7 +89,7 @@ class LiveEventManager implements PlayerManager {

// イベントを取得
const event: ILiveStreamStatusEvent = JSON.parse(event_raw.data);
console.log(`[status_update] Status: ${event.status} / Detail: ${event.detail}`);
console.log('\u001b[33m[LiveEventManager][status_update]', `\nStatus: ${event.status} / Detail: ${event.detail}`);

// 視聴者数を更新
channels_store.updateChannel(channels_store.display_channel_id, {
Expand Down Expand Up @@ -216,7 +216,7 @@ class LiveEventManager implements PlayerManager {

// イベントを取得
const event: ILiveStreamStatusEvent = JSON.parse(event_raw.data);
console.log(`[detail_update] Status: ${event.status} Detail:${event.detail}`);
console.log('\u001b[33m[LiveEventManager][detail_update]', `\nStatus: ${event.status} Detail:${event.detail}`);

// 視聴者数を更新
channels_store.updateChannel(channels_store.display_channel_id, {
Expand Down Expand Up @@ -255,6 +255,8 @@ class LiveEventManager implements PlayerManager {
viewer_count: event.client_count,
});
});

console.log('\u001b[33m[LiveEventManager] Initialized.');
}


Expand All @@ -268,6 +270,8 @@ class LiveEventManager implements PlayerManager {
this.eventsource.close();
this.eventsource = null;
}

console.log('\u001b[33m[LiveEventManager] Destroyed.');
}
}

Expand Down
4 changes: 4 additions & 0 deletions client/src/services/player/managers/MediaSessionManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,8 @@ class MediaSessionManager implements PlayerManager {
}
});
}

console.log('[MediaSessionManager] Initialized.');
}


Expand Down Expand Up @@ -213,6 +215,8 @@ class MediaSessionManager implements PlayerManager {

// 破棄済みかどうかのフラグを立てる
this.destroyed = true;

console.log('[MediaSessionManager] Destroyed.');
}
}

Expand Down
12 changes: 6 additions & 6 deletions client/src/workers/CaptureCompositor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ class CaptureCompositor implements ICaptureCompositor {
* @returns 字幕なしのキャプチャ画像と、字幕ありのキャプチャ画像の Blob オブジェクト (どちらかが null になる場合がある)
*/
public async composite(): Promise<ICaptureCompositorResult> {
console.log('[CaptureCompositor] Composite start:', this.options);
console.log('\u001b[36m[CaptureCompositor] Composite start:', this.options);
const start_time = Utils.time();

// 字幕ありキャプチャ画像から合成しているのは、this.compositeInNormalDirectMode() を実行した時点で
Expand Down Expand Up @@ -139,7 +139,7 @@ class CaptureCompositor implements ICaptureCompositor {

// 並列で実行して、結果を待つ
const [capture_caption, capture_normal] = await Promise.all([capture_caption_promise, capture_normal_promise]);
console.log('[CaptureCompositor] Composite end:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
console.log('\u001b[36m[CaptureCompositor] Composite end:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');

return {
capture_normal: capture_normal,
Expand Down Expand Up @@ -173,7 +173,7 @@ class CaptureCompositor implements ICaptureCompositor {
// ImageBitmap を OffscreenCanvas に転送
normal_direct_canvas_context.transferFromImageBitmap(this.options.capture);
this.options.capture.close(); // ImageBitmap を解放
console.log('[CaptureCompositor] Normal (Direct):', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
console.log('\u001b[36m[CaptureCompositor] Normal (Direct):', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');

// EXIF メタデータをセットした Blob を返す
return await this.exportToBlob(normal_direct_canvas);
Expand Down Expand Up @@ -219,7 +219,7 @@ class CaptureCompositor implements ICaptureCompositor {
if (this.options.capture_comment_data !== null) {
this.compositeComments(normal_canvas, normal_canvas_context);
}
console.log('[CaptureCompositor] Normal:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
console.log('\u001b[36m[CaptureCompositor] Normal:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');

// EXIF メタデータをセットした Blob を返す
return await this.exportToBlob(normal_canvas);
Expand Down Expand Up @@ -269,7 +269,7 @@ class CaptureCompositor implements ICaptureCompositor {
if (this.options.capture_comment_data !== null) {
this.compositeComments(caption_canvas, caption_canvas_context);
}
console.log('[CaptureCompositor] With Caption:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
console.log('\u001b[36m[CaptureCompositor] With Caption:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');

// EXIF メタデータをセットした Blob を返す
return await this.exportToBlob(caption_canvas);
Expand Down Expand Up @@ -408,7 +408,7 @@ class CaptureCompositor implements ICaptureCompositor {

// Blob に EXIF メタデータをセットして返す
const blob_with_exif = await this.setEXIFDataToCapture(blob);
console.log('[CaptureCompositor] Export to Blob:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');
console.log('\u001b[36m[CaptureCompositor] Export to Blob:', Utils.mathFloor(Utils.time() - start_time, 3), 'sec');

return blob_with_exif;
}
Expand Down

0 comments on commit a28fb5f

Please sign in to comment.