├── .gitignore
├── desc
    ├── tile280.png
    ├── tile680.png
    ├── tile680.svg
    ├── tile280.svg
    ├── firefox-ja.md
    ├── chrome-ja.md
    ├── firefox-en.md
    └── chrome-en.md
├── src
    ├── images
    │   ├── icon128.chrome.png
    │   ├── icon16.chrome.png
    │   ├── icon32.chrome.png
    │   ├── icon48.chrome.png
    │   ├── pip.svg
    │   └── icon.svg
    ├── modules
    │   ├── injection.js
    │   ├── pip.js
    │   ├── chat_actions.js
    │   └── utils.js
    ├── chatframe.js
    ├── manifest.firefox.json
    ├── sw.js
    ├── manifest.chrome.json
    ├── templates
    │   ├── panel_contextmenu.html
    │   ├── panel_menu.html
    │   └── panel_form.html
    ├── options
    │   ├── options.html
    │   ├── options.css
    │   └── options.js
    ├── styles
    │   ├── layer.css
    │   └── content.css
    ├── content.js
    └── _locales
    │   ├── ja
    │       └── messages.json
    │   └── en
    │       └── messages.json
├── .github
    └── FUNDING.yml
├── types
    ├── extends.d.ts
    └── ytlivechatrenderer.d.ts
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | dist
3 | *.bat


--------------------------------------------------------------------------------
/desc/tile280.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ys-j/YoutubeLiveChatFlusher/HEAD/desc/tile280.png


--------------------------------------------------------------------------------
/desc/tile680.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ys-j/YoutubeLiveChatFlusher/HEAD/desc/tile680.png


--------------------------------------------------------------------------------
/src/images/icon128.chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ys-j/YoutubeLiveChatFlusher/HEAD/src/images/icon128.chrome.png


--------------------------------------------------------------------------------
/src/images/icon16.chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ys-j/YoutubeLiveChatFlusher/HEAD/src/images/icon16.chrome.png


--------------------------------------------------------------------------------
/src/images/icon32.chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ys-j/YoutubeLiveChatFlusher/HEAD/src/images/icon32.chrome.png


--------------------------------------------------------------------------------
/src/images/icon48.chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ys-j/YoutubeLiveChatFlusher/HEAD/src/images/icon48.chrome.png


--------------------------------------------------------------------------------
/src/modules/injection.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | 	const ev = new CustomEvent('ytlcf-message', {
3 | 		detail: {
4 | 			ytInitialData: JSON.stringify(window['ytInitialData']),
5 | 			ytcfg: JSON.stringify(window['ytcfg']?.d()),
6 | 		},
7 | 	});
8 | 	self.dispatchEvent(ev);
9 | })();


--------------------------------------------------------------------------------
/src/images/pip.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-30 -30 60 60">
2 | <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round">
3 | 	<path d="M-16-12l8,8h-8h8v-8" stroke-width="2" />
4 | 	<path d="M-8,16h-12a4,4,0,0,1,-4,-4v-28a4,4,0,0,1,4,-4h40a4,4,0,0,1,4,4v12" stroke-width="3" />
5 | </g>
6 | <rect width="25" height="15" y="2" rx="2" ry="2" fill="#fff" />
7 | </svg>


--------------------------------------------------------------------------------
/src/images/icon.svg:
--------------------------------------------------------------------------------
 1 | <!-- Copyright 2021 ys-j -->
 2 | <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-36 -36 72 72">
 3 | 	<path d="M0,24Q8,24,24,23,31,22,31,19,32,12,32,0H0M0,24Q-8,24,-24,23,-31,22,-31,19,-32,12,-32,0H0M0,-24Q-8,-24,-24,-23,-31,-22,-31,-19,-32,-12,-32,0H0M0,-24Q8,-24,24,-23,31,-22,31,-19,32,-12,32,0H0Z" fill="red"/>
 4 | 	<g transform="translate(0,10)" fill="white">
 5 | 		<path d="M4,-10l12,12h6l-12,-12,12,-12h-6z" />
 6 | 		<circle cx="0" r="2.5" />
 7 | 		<circle cx="-10" r="2.5" />
 8 | 		<circle cx="-20" r="2.5" />
 9 | 	</g>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/src/chatframe.js:
--------------------------------------------------------------------------------
 1 | self.browser ??= chrome;
 2 | 
 3 | const isLive = location.pathname === '/live_chat';
 4 | const modeName = isLive ? 'mode_livestream' : 'mode_replay';
 5 | 
 6 | browser.storage.local.get('others').then(storage => {
 7 | 	const mode = storage?.others?.[modeName] ?? 1;
 8 | 	if (mode === 0) {
 9 | 		document.addEventListener('yt-action', e => {
10 | 			if (e.detail?.actionName === 'yt-live-chat-actions') {
11 | 				const ev = new CustomEvent('ytlcf-actions', { detail: e.detail?.args?.at(0) || [] });
12 | 				top?.dispatchEvent(ev);
13 | 			}
14 | 		}, { passive: true });
15 | 	}
16 | });


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: ys-j # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
12 | polar: # Replace with a single Polar username
13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
14 | thanks_dev: # Replace with a single thanks.dev username
15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
16 | 


--------------------------------------------------------------------------------
/types/extends.d.ts:
--------------------------------------------------------------------------------
 1 | type FontData = {
 2 | 	family: string;
 3 | 	fullName: string;
 4 | 	postscriptName: string;
 5 | 	style: string;
 6 | 	blob(): Promise<Blob>;
 7 | }
 8 | type DocumentPictureInPictureOptions = {
 9 | 	width?: number;
10 | 	height?: number;
11 | 	disallowReturnToOpener?: boolean;
12 | 	preferInitialWindowPlacement?: boolean;
13 | }
14 | interface DocumentPictureInPicture {
15 | 	window?: Window;
16 | 	requestWindow: (options?: DocumentPictureInPictureOptions) => Promise<Window>;
17 | }
18 | interface Window {
19 | 	queryLocalFonts?(options?: { postscriptNames: string[] }): Promise<FontData[]>;
20 | 	documentPictureInPicture?: DocumentPictureInPicture;
21 | }
22 | interface Node {
23 | 	cloneNode<T extends Node>(this: T, deep?: boolean): T;
24 | }
25 | interface MouseEvent {
26 | 	originalTarget?: EventTarget;
27 | 	explicitOriginalTarget?: EventTarget;
28 | }
29 | interface WindowEventMap {
30 | 	[K: string]: CustomEvent;
31 | }
32 | interface DocumentEventMap {
33 | 	[K: string]: CustomEvent;
34 | }
35 | interface HTMLElementEventMap {
36 | 	[K: string]: CustomEvent;
37 | }
38 | interface HTMLFormControlsCollection {
39 | 	[K: string]: RadioNodeList | HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLFieldSetElement | HTMLElement | undefined;
40 | }


--------------------------------------------------------------------------------
/desc/tile680.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="920" height="680" viewBox="-460 -340 920 680">
 2 | 	<defs>
 3 | 		<style>
 4 | 			text {
 5 | 				font-family: 'Roboto Condensed';
 6 | 				text-anchor: middle;
 7 | 			}
 8 | 			.h1 {
 9 | 				font-size: 56pt;
10 | 				stroke: black;
11 | 			}
12 | 			.h2 {
13 | 				font-size: 28pt;
14 | 			}
15 | 			.red {
16 | 				fill: red;
17 | 			}
18 | 		</style>
19 | 		<symbol id="icon" viewBox="-36 -36 72 72">
20 | 			<path d="M0,24Q8,24,24,23,31,22,31,19,32,12,32,0H0M0,24Q-8,24,-24,23,-31,22,-31,19,-32,12,-32,0H0M0,-24Q-8,-24,-24,-23,-31,-22,-31,-19,-32,-12,-32,0H0M0,-24Q8,-24,24,-23,31,-22,31,-19,32,-12,32,0H0Z" fill="red"/>
21 | 			<g transform="translate(0,10)" fill="white">
22 | 				<path d="M4,-10l12,12h6l-12,-12,12,-12h-6z" />
23 | 				<circle cx="0" r="2.5" />
24 | 				<circle cx="-10" r="2.5" />
25 | 				<circle cx="-20" r="2.5" />
26 | 			</g>
27 | 		</symbol>
28 | 	</defs>
29 | 	<rect x="-460" y="-340" width="920" height="680" fill="white" />
30 | 	<use href="#icon" x="-240" y="-320" width="480" height="480" />
31 | 	<text class="h1" y="172">YouTube LiveChat Flusher</text>
32 | 	<text class="h2" x="-24" y="224">Danmaku / Bullet Chat on YouTube <tspan class="red" dy="0">Live</tspan></text>
33 | 	<circle class="red" cx="264" cy="212" r="8" />
34 | </svg>


--------------------------------------------------------------------------------
/desc/tile280.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="440" height="280" viewBox="0 -140 440 280">
 2 | 	<defs>
 3 | 		<style>
 4 | 			text {
 5 | 				dominant-baseline: middle;
 6 | 				font-family: 'Roboto Condensed';
 7 | 			}
 8 | 			.h1 {
 9 | 				font-size: 22pt;
10 | 				stroke: black;
11 | 			}
12 | 			.h2 {
13 | 				font-size: 12pt;
14 | 			}
15 | 			.red {
16 | 				fill: red;
17 | 			}
18 | 		</style>
19 | 		<symbol id="icon" viewBox="-36 -36 72 72">
20 | 			<path d="M0,24Q8,24,24,23,31,22,31,19,32,12,32,0H0M0,24Q-8,24,-24,23,-31,22,-31,19,-32,12,-32,0H0M0,-24Q-8,-24,-24,-23,-31,-22,-31,-19,-32,-12,-32,0H0M0,-24Q8,-24,24,-23,31,-22,31,-19,32,-12,32,0H0Z" fill="red"/>
21 | 			<g transform="translate(0,10)" fill="white">
22 | 				<path d="M4,-10l12,12h6l-12,-12,12,-12h-6z" />
23 | 				<circle cx="0" r="2.5" />
24 | 				<circle cx="-10" r="2.5" />
25 | 				<circle cx="-20" r="2.5" />
26 | 			</g>
27 | 		</symbol>
28 | 	</defs>
29 | 	<rect y="-140" width="440" height="280" fill="white" />
30 | 	<use href="#icon" x="32" y="-48" width="96" height="96" />
31 | 	<g transform="translate(128,-8)">
32 | 		<text class="h1">YouTube LiveChat Flusher</text>
33 | 		<text class="h2" x="2" y="28">Danmaku / Bullet Chat on YouTube <tspan class="red" y="28">Live</tspan></text>
34 | 		<circle class="red" cx="244" cy="27" r="5" />
35 | 	</g>
36 | </svg>


--------------------------------------------------------------------------------
/src/manifest.firefox.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"manifest_version": 3,
 3 | 	"name": "__MSG_manifestName__",
 4 | 	"version": "0.12.5",
 5 | 	"author": "_y_s",
 6 | 	"action": {},
 7 | 	"background": {
 8 | 		"scripts": ["sw.js"]
 9 | 	},
10 | 	"browser_specific_settings": {
11 | 		"gecko": {
12 | 			"id": "{5a898e4e-6b5c-4acf-9e29-4c791d3b5f2e}",
13 | 			"strict_min_version": "131.0"
14 | 		},
15 | 		"gecko_android": {
16 | 			"strict_min_version": "131.0"
17 | 		}
18 | 	},
19 | 	"content_scripts": [
20 | 		{
21 | 			"css": ["styles/content.css"],
22 | 			"js": ["content.js"],
23 | 			"matches": ["*://www.youtube.com/*"]
24 | 		},
25 | 		{
26 | 			"all_frames": true,
27 | 			"js": ["chatframe.js"],
28 | 			"matches": ["*://www.youtube.com/live_chat*"]
29 | 		}
30 | 	],
31 | 	"default_locale": "en",
32 | 	"description": "__MSG_manifestDescription__",
33 | 	"homepage_url": "https://github.com/ys-j/YoutubeLiveChatFlusher",
34 | 	"host_permissions": ["*://www.youtube.com/*"],
35 | 	"icons": {
36 | 		"48": "images/icon.svg",
37 | 		"96": "images/icon.svg"
38 | 	},
39 | 	"options_ui": {
40 | 		"page": "options/options.html"
41 | 	},
42 | 	"optional_permissions": ["tabs"],
43 | 	"permissions": ["storage"],
44 | 	"web_accessible_resources": [
45 | 		{
46 | 			"resources": ["modules/*", "styles/*", "templates/*", "images/*"],
47 | 			"matches": ["*://www.youtube.com/*"]
48 | 		}
49 | 	]
50 | }


--------------------------------------------------------------------------------
/desc/firefox-ja.md:
--------------------------------------------------------------------------------
 1 | **YouTube LiveChat Flusher**
 2 | ==========
 3 | 
 4 | YouTube Liveのチャットをニコニコ動画のように弾幕風に流すアドオンです。
 5 | 
 6 | 開発中のため動作が不安定な場合があります。正常に動作しない場合はページを更新するかミニプレーヤーに切り替えてください。
 7 | 
 8 | **機能**
 9 | ----------
10 | 
11 | - チャット欄を閉じた状態でも動作します。
12 | - 流れるコメントを右クリックで一時停止、一時停止中のコメントをスクロールで左右に移動できます。
13 | - 生配信中のみ投票結果も流れます。
14 | - メッセージ翻訳が利用できます（Google翻訳を使用します）。
15 | - コメントタイムシフトが利用できます。
16 | 
17 | **設定可能な項目**
18 | ----------
19 | 
20 | - アニメーション秒数……短いコメントほど速く流れます
21 | - フォントサイズ／行数
22 | - フォントファミリー／太さ……CSS文法（カンマ区切り；空白を含むフォント名は""または''で囲む必要があります）（例：Roboto, "Noto Sans JP"）
23 | - 文字の縁取りのスタイル（色／太さ／ぼかし）
24 | - 全体（チャットレイヤー）の透過度
25 | - （スーパーチャットなどの）背景の透過度
26 | - 最大長さ／折り返し
27 | - 最大表示数
28 | - 同時刻チャットに対する動作
29 | - 絵文字の表示方法
30 | - アニメーション方向
31 | - ホットキー（キーボードショートカット）
32 | - 自動スタート
33 | - 種類ごとの表示項目およびテキストの色：一般ユーザー・メンバー・モデレーター・チャンネル管理者・確認済みユーザーのチャット、スーパーチャット、スーパーステッカー、新規メンバー、マイルストーン
34 | - NGワードリスト
35 | - ユーザーCSS
36 | - メッセージ翻訳
37 | - タイムシフト
38 | 
39 | 画質・字幕などと同様に歯車アイコンから設定画面が開きます。
40 | 
41 | 詳細の説明はGitHub wikiをご覧ください：<https://github.com/ys-j/YoutubeLiveChatFlusher/wiki>
42 | 
43 | **Screenshots**
44 | ----------
45 | 
46 | - [【#神楽めあ新衣装】一体この新人、衣装何着もっているんだい？　#新人vtuber 【神楽めあ】 - YouTube](https://www.youtube.com/watch?v=3j2uRSSin74)
47 | - [【#神楽めあ新衣装】初めての新衣装お披露目配信(⋈◍＞◡＜◍)。✧♡ - YouTube](https://www.youtube.com/watch?v=NWbzQ2iHgnw)
48 | 
49 | **免責事項**
50 | ----------
51 | 
52 | 当アドオンによって生じる一切の損害について、開発者は責任を負いません。なお、当アドオンは、業として開発・配布が実施されるものではなく、日本国内における株式会社ドワンゴの特許権を侵害するものではありません。
53 | 


--------------------------------------------------------------------------------
/src/sw.js:
--------------------------------------------------------------------------------
 1 | /// <reference path="../types/browser.d.ts" />
 2 | 
 3 | self.browser ??= chrome;
 4 | 
 5 | const manifest = browser.runtime.getManifest();
 6 | 
 7 | /** @type {Record<string, Function>} */
 8 | const events = {
 9 | 	/**
10 | 	 * @param {number} tabId 
11 | 	 * @param {string} url
12 | 	 */
13 | 	async toggleAction(tabId, url) {
14 | 		const urlObj = new URL(url);
15 | 		/** @type {string[] | undefined} */
16 | 		const hosts = manifest.host_permissions;
17 | 		const isHostMatch = hosts?.some(url => url.match(/:\/\/([^\/]*)/)?.[1] === urlObj.hostname);
18 | 		return browser.action[isHostMatch ? 'enable' : 'disable'](tabId);
19 | 	},
20 | 	async reload() {
21 | 		const ytTabs = await browser.tabs.query({
22 | 			discarded: false,
23 | 			url: manifest.host_permissions,
24 | 		});
25 | 		for (const tab of ytTabs) {
26 | 			browser.tabs.reload(tab.id, { bypassCache: true });
27 | 		}
28 | 	},
29 | 	async openOptions() {
30 | 		return browser.runtime.openOptionsPage();
31 | 	},
32 | };
33 | 
34 | browser.action.onClicked.addListener(() => {
35 | 	events.openOptions();
36 | });
37 | 
38 | browser.runtime.onMessage.addListener(async (message, sender, response) => {
39 | 	events[message.fire]?.()?.then(response);
40 | });
41 | 
42 | browser.tabs.onUpdated.addListener((tabId, info, tab) => {
43 | 	if (info.url) events.toggleAction(tabId, info.url);
44 | });
45 | browser.tabs.onCreated.addListener(tab => {
46 | 	if (tab.url) events.toggleAction(tab.id, tab.url);
47 | });


--------------------------------------------------------------------------------
/desc/chrome-ja.md:
--------------------------------------------------------------------------------
 1 | YouTube LiveChat Flusher
 2 | ==========
 3 | 
 4 | YouTube Liveのチャットをニコニコ動画のように弾幕風に流すアドオンです。
 5 | 
 6 | 開発中のため動作が不安定な場合があります。正常に動作しない場合はページを更新するかミニプレーヤーに切り替えてください。
 7 | 
 8 | 機能
 9 | ----------
10 | 
11 | - チャット欄を閉じた状態でも動作します。
12 | - 流れるコメントを右クリックで一時停止、一時停止中のコメントをスクロールで左右に移動できます。
13 | - 生配信中のみ投票結果も流れます。
14 | - メッセージ翻訳が利用できます（Google翻訳を使用します）。
15 | - ピクチャーインピクチャーが利用できます（ベータ機能）。
16 | - コメントタイムシフトが利用できます。
17 | 
18 | 設定可能な項目
19 | ----------
20 | 
21 | - アニメーション秒数……短いコメントほど速く流れます
22 | - フォントサイズ／行数
23 | - フォントファミリー／太さ……CSS文法（カンマ区切り；空白を含むフォント名は""または''で囲む必要があります）（例：Roboto, "Noto Sans JP"）
24 | - 文字の縁取りのスタイル（色／太さ／ぼかし）
25 | - 全体（チャットレイヤー）の透過度
26 | - （スーパーチャットなどの）背景の透過度
27 | - 最大長さ／折り返し
28 | - 最大表示数
29 | - 同時刻チャットに対する動作
30 | - 絵文字の表示方法
31 | - アニメーション方向
32 | - ホットキー（キーボードショートカット）
33 | - 自動スタート
34 | - 種類ごとの表示項目およびテキストの色：一般ユーザー・メンバー・モデレーター・チャンネル管理者・確認済みユーザーのチャット、スーパーチャット、スーパーステッカー、新規メンバー、マイルストーン
35 | - NGワードリスト
36 | - ユーザーCSS
37 | - メッセージ翻訳
38 | - タイムシフト
39 | 
40 | 画質・字幕などと同様に歯車アイコンから設定画面が開きます。
41 | 
42 | 詳細の説明はGitHub wikiをご覧ください：<https://github.com/ys-j/YoutubeLiveChatFlusher/wiki>
43 | 
44 | Screenshots
45 | ----------
46 | 
47 | - [【#神楽めあ新衣装】一体この新人、衣装何着もっているんだい？　#新人vtuber 【神楽めあ】 - YouTube](https://www.youtube.com/watch?v=3j2uRSSin74)
48 | - [【#神楽めあ新衣装】初めての新衣装お披露目配信(⋈◍＞◡＜◍)。✧♡ - YouTube](https://www.youtube.com/watch?v=NWbzQ2iHgnw)
49 | 
50 | 免責事項
51 | ----------
52 | 
53 | 当アドオンによって生じる一切の損害について、開発者は責任を負いません。なお、当アドオンは、業として開発・配布が実施されるものではなく、日本国内における株式会社ドワンゴの特許権を侵害するものではありません。
54 | 


--------------------------------------------------------------------------------
/src/manifest.chrome.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"manifest_version": 3,
 3 | 	"name": "__MSG_manifestName__",
 4 | 	"version": "0.12.5",
 5 | 	"author": "_y_s",
 6 | 	"action": {
 7 | 		"default_state": "disabled"
 8 | 	},
 9 | 	"background": {
10 | 		"service_worker": "sw.js"
11 | 	},
12 | 	"content_scripts": [
13 | 		{
14 | 			"css": ["styles/content.css"],
15 | 			"js": ["content.js"],
16 | 			"matches": ["*://www.youtube.com/*"]
17 | 		},
18 | 		{
19 | 			"all_frames": true,
20 | 			"js": ["chatframe.js"],
21 | 			"matches": ["*://www.youtube.com/live_chat*"]
22 | 		}
23 | 	],
24 | 	"default_locale": "en",
25 | 	"description": "__MSG_manifestDescription__",
26 | 	"homepage_url": "https://github.com/ys-j/YoutubeLiveChatFlusher",
27 | 	"host_permissions": ["*://www.youtube.com/*"],
28 | 	"icons": {
29 | 		"16": "images/icon16.png",
30 | 		"32": "images/icon32.png",
31 | 		"48": "images/icon48.png",
32 | 		"128": "images/icon128.png"
33 | 	},
34 | 	"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAw8pVqZOdYarVW0a8/bA4CgxR35Mlg3QSHCgZYecnu6fgANWn0rq+Ive4PC99pT6/29kCT2tk1QWnPuYT3KL/A2LyA5ufzsPos3svKnaIgvO8MS10PjjpxriR798YfwunFi+KDdl2Vw2osz4owS+JeXqE86DT4zik3ZULPGQ4KkNnw25cGRtroqlsNT5sQzTwBocyOS2Rl9crsP60CJethw4rhaHCigugTdrnpn35CdKnjau0o9rEAgsu5YsItLkc6eBgzeTtLfT/go854V5ekLGRuY8mZ4hPoGnqEJwWWRiXsCoBtUvLnkadsn80Xk1rs5cp7spIEoBJ3zulnFY7bQIDAQAB",
35 | 	"options_ui": {
36 | 		"page": "options/options.html"
37 | 	},
38 | 	"optional_permissions": ["tabs"],
39 | 	"permissions": ["storage"],
40 | 	"web_accessible_resources": [
41 | 		{
42 | 			"resources": ["modules/*", "styles/*", "templates/*", "images/*"],
43 | 			"matches": ["*://www.youtube.com/*"]
44 | 		}
45 | 	]
46 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # YouTube LiveChat Flusher
 2 | 
 3 | Firefox Add-on / Chrome Extension; Provides bullet chatting (Danmaku) on YouTube Live, like niconico or bilibili.\
 4 | Firefoxアドオン／Chrome拡張機能です。YouTube Liveでニコニコ動画やビリビリ動画のようにライブチャットを弾幕風に流します。
 5 | 
 6 | - [Firefox Browser Add-on](https://addons.mozilla.org/firefox/addon/youtube-livechat-flusher/)
 7 | - [Chrome Web Store](https://chrome.google.com/webstore/detail/youtube-livechat-flusher/kkjglcpgfpjlaloboikfcoofameeljbe)
 8 | 
 9 | Please refer to *[wiki](https://github.com/ys-j/YoutubeLiveChatFlusher/wiki)* for installation instructions and detailed explanations of configuration. \
10 | インストール方法、設定項目の詳しい説明については *[wiki](https://github.com/ys-j/YoutubeLiveChatFlusher/wiki)* を参照してください。
11 | 
12 | ## Features / 特徴
13 | 
14 | - Written in Vanilla JS and CSS (No libraries used)\
15 |   Vanilla JSとCSSで書かれています（ライブラリを使用していません）
16 | - Translation function is available\
17 |   翻訳機能が利用可能です
18 | - Customizable styles\
19 |   スタイルをカスタマイズ可能です
20 | - Document Picture-in-Picture (PiP w/ chat) is available on Chrome\
21 |   Chrome版は Document Picture-in-Picture (PiP w/ chat) が利用可能です
22 | - Time-shifted chat is available (Replay only)\
23 |   タイムシフト機能が利用可能です（リプレイのみ）
24 | 
25 | ## Screenshots / スクリーンショット
26 | 
27 | - [【#神楽めあ新衣装】一体この新人、衣装何着もっているんだい？　#新人vtuber 【神楽めあ】 - YouTube](https://www.youtube.com/watch?v=3j2uRSSin74)\
28 |   ![Screenshot 1](https://addons.mozilla.org/user-media/previews/full/318/318609.png "【#神楽めあ新衣装】一体この新人、衣装何着もっているんだい？　#新人vtuber 【神楽めあ】 - YouTube")
29 | - [【#神楽めあ新衣装】一体この新人、衣装何着もっているんだい？　#新人vtuber 【神楽めあ】 - YouTube](https://www.youtube.com/watch?v=3j2uRSSin74)\
30 |   ![Screenshot 2](https://addons.mozilla.org/user-media/previews/full/318/318610.png "【#神楽めあ新衣装】一体この新人、衣装何着もっているんだい？　#新人vtuber 【神楽めあ】 - YouTube")
31 | - [【#神楽めあ新衣装】初めての新衣装お披露目配信(⋈◍＞◡＜◍)。✧♡ - YouTube](https://www.youtube.com/watch?v=NWbzQ2iHgnw)\
32 |   ![Screenshot 3](https://addons.mozilla.org/user-media/previews/full/266/266861.png "【#神楽めあ新衣装】初めての新衣装お披露目配信(⋈◍＞◡＜◍)。✧♡ - YouTube")
33 | 
34 | ## DISCLAIMER / 免責事項
35 | 当アドオンによって生じる一切の損害について、開発者は責任を負いません。なお、当アドオンは、業として開発・配布が実施されるものではなく、日本国内における株式会社ドワンゴの特許権を侵害するものではありません。
36 | 
37 | cf. <https://twitter.com/sigekun/status/1533297493626105857>
38 | 


--------------------------------------------------------------------------------
/desc/firefox-en.md:
--------------------------------------------------------------------------------
 1 | **YouTube LiveChat Flusher**
 2 | ==========
 3 | 
 4 | This add-on provides bullet chatting (danmaku) on Youtube Live, like niconico or bilibili.
 5 | 
 6 | Under development, it may not works well.  If it doesn't work, please refresh page or switch to mini player.
 7 | 
 8 | **Features**
 9 | ----------
10 | 
11 | - Works without displaying the chat frame.
12 | - You can pause each message by right click, and then move it left/right by scroll up/down.
13 | - Vote result will be also rendered. (Streaming ONLY)
14 | - Message translation (using Google Translate)
15 | - Time-shift chat
16 | 
17 | **Configurable Options**
18 | ----------
19 | 
20 | - Animation Duration
21 | - Font Size / Number of Lines / Line Height
22 | - Font Family/ Weight - CSS-syntax (Comma-separated; Font name containing spaces must be enclosed in quotation marks.) (e.g. Roboto, "Noto Sans JP")
23 | - Stroke Style - Color, Offset, Blur.
24 | - Chat Layer Opacity
25 | - Background Opacity - Superchat, Milestone etc.
26 | - Max Width / Wrap Mode
27 | - Display Limit (Max Number of Messages)
28 | - Simultaneous Messages - Behavior when loaded many messages at same time.
29 | - Emoji Expression
30 | - Flow Direction
31 | - Hotkeys (Keyboard Shortcuts)
32 | - Auto-start
33 | - Visibility and color with each following types: chat message by member, moderator, channel owner and verified user; super-chat, super-sticker, new-membership and milestones.
34 | - Words Filter (Banned Words List)
35 | - User-defined CSS
36 | - Message Translation
37 | - Time-shift Duration
38 | 
39 | Configuration control panel is available from "Gear" icon as with video quality or annotation.
40 | 
41 | Detailed explanation: <https://github.com/ys-j/YoutubeLiveChatFlusher/wiki>
42 | 
43 | **Screenshots**
44 | ----------
45 | 
46 | - [【#神楽めあ新衣装】一体この新人、衣装何着もっているんだい？　#新人vtuber 【神楽めあ】 - YouTube](https://www.youtube.com/watch?v=3j2uRSSin74)
47 | - [【#神楽めあ新衣装】初めての新衣装お披露目配信(⋈◍＞◡＜◍)。✧♡ - YouTube](https://www.youtube.com/watch?v=NWbzQ2iHgnw)
48 | 
49 | **DISCLAIMER**
50 | ----------
51 | 
52 | The developer is not responsible for any damage caused by the add-on. It is noted that the add-on is not developed and published as a business, therefore it does not infringe upon any patent rights of DWANGO Co., Ltd. in Japan.
53 | 


--------------------------------------------------------------------------------
/desc/chrome-en.md:
--------------------------------------------------------------------------------
 1 | YouTube LiveChat Flusher
 2 | ==========
 3 | 
 4 | This add-on provides bullet chatting (danmaku) on Youtube Live, like niconico or bilibili.
 5 | 
 6 | Under development, it may not works well.  If it doesn't work, please refresh page or switch to mini player.
 7 | 
 8 | Features
 9 | ----------
10 | 
11 | - Works without displaying the chat frame.
12 | - You can pause each message by right click, and then move it left/right by scroll up/down.
13 | - Vote result will be also rendered. (Streaming ONLY)
14 | - Message translation (using Google Translate)
15 | - Picture-in-picture with chat (beta features)
16 | - Time-shift chat
17 | 
18 | Configurable Options
19 | ----------
20 | 
21 | - Animation Duration
22 | - Font Size / Number of Lines / Line Height
23 | - Font Family/ Weight - CSS-syntax (Comma-separated; Font name containing spaces must be enclosed in quotation marks.) (e.g. Roboto, "Noto Sans JP")
24 | - Stroke Style - Color, Offset, Blur.
25 | - Chat Layer Opacity
26 | - Background Opacity - Superchat, Milestone etc.
27 | - Max Width / Wrap Mode
28 | - Display Limit (Max Number of Messages)
29 | - Simultaneous Messages - Behavior when loaded many messages at same time.
30 | - Emoji Expression
31 | - Flow Direction
32 | - Hotkeys (Keyboard Shortcuts)
33 | - Auto-start
34 | - Visibility and color with each following types: chat message by member, moderator, channel owner and verified user; super-chat, super-sticker, new-membership and milestones.
35 | - Words Filter (Banned Words List)
36 | - User-defined CSS
37 | - Message Translation
38 | - Time-shift Duration
39 | 
40 | Configuration control panel is available from "Gear" icon as with video quality or annotation.
41 | 
42 | Detailed explanation: <https://github.com/ys-j/YoutubeLiveChatFlusher/wiki>
43 | 
44 | Screenshots
45 | ----------
46 | 
47 | - [【#神楽めあ新衣装】一体この新人、衣装何着もっているんだい？　#新人vtuber 【神楽めあ】 - YouTube](https://www.youtube.com/watch?v=3j2uRSSin74)
48 | - [【#神楽めあ新衣装】初めての新衣装お披露目配信(⋈◍＞◡＜◍)。✧♡ - YouTube](https://www.youtube.com/watch?v=NWbzQ2iHgnw)
49 | 
50 | DISCLAIMER
51 | ----------
52 | 
53 | The developer is not responsible for any damage caused by the add-on. It is noted that the add-on is not developed and published as a business, therefore it does not infringe upon any patent rights of DWANGO Co., Ltd. in Japan.
54 | 


--------------------------------------------------------------------------------
/src/templates/panel_contextmenu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <title>popupmenu</title>
 3 | <div class=ytp-panel>
 4 | 	<div class=ytp-panel-menu role=menu>
 5 | 		<div class=ytp-menuitem aria-haspopup=false role=menuitem tabindex=0 data-menu=resume_animation>
 6 | 			<div class=ytp-menuitem-icon>
 7 | 				<svg viewBox="-24 -24 48 48" height="100%" width="100%" fill="currentColor">
 8 | 					<path d="M4 0l20 16v-32z" />
 9 | 					<circle cy="10" r="3" />
10 | 					<circle cx="-10" cy="10" r="3" />
11 | 					<circle cx="-20" cy="10" r="3" />
12 | 				</svg>
13 | 			</div>
14 | 			<div class=ytp-menuitem-label data-i18n=menu_resumeAnimation></div>
15 | 			<div class=ytp-menuitem-content></div>
16 | 		</div>
17 | 		<div class=ytp-menuitem aria-haspopup=false role=menuitem tabindex=0 data-menu=move_message>
18 | 			<div class=ytp-menuitem-icon>
19 | 				<svg viewBox="-16 -16 32 32" height="100%" width="100%">
20 | 					<path d="M0-14L4-8H1V-1H8V-4L14 0L8 4V1H1V8H4L0 14L-4 8H-1V1H-8V4L-14 0L-8-4V-1H-1V-8H-4z" fill="currentColor" />
21 | 				</svg>
22 | 			</div>
23 | 			<div class=ytp-menuitem-label data-i18n=menu_moveMessage></div>
24 | 			<div class=ytp-menuitem-content></div>
25 | 		</div>
26 | 		<div class=ytp-menuitem aria-haspopup=false role=menuitem tabindex=0 data-menu=copy_user_id>
27 | 			<div class=ytp-menuitem-icon>
28 | 				<svg viewBox="-16 -16 32 32" height="100%" width="100%">
29 | 					<path d="M1.5-6H6A6 6 0 0 1 6 6H1.5M-1.5 6H-6A6 6 0 0 1-6-6H-1.5M-5.5 0H5.5" fill="none" stroke="currentColor" stroke-width="3" />
30 | 				</svg>
31 | 			</div>
32 | 			<div class=ytp-menuitem-label data-i18n=menu_copyAuthorId></div>
33 | 			<div class=ytp-menuitem-content></div>
34 | 		</div>
35 | 		<div class=ytp-menuitem aria-haspopup=false role=menuitem tabindex=0 data-menu=hide_user>
36 | 			<div class=ytp-menuitem-icon>
37 | 				<svg viewBox="-16 -16 32 32" height="100%" width="100%">
38 | 					<path d="M-12 0A12 12 0 0 1 12 0A12 12 0 0 1 -12 0M-5.214 7.336A9 9 0 0 0 7.336 -5.214M5.214 -7.336A9 9 0 0 0 -7.336 5.214z" fill="currentColor" />
39 | 				</svg>
40 | 			</div>
41 | 			<div class=ytp-menuitem-label data-i18n=menu_hideAuthor></div>
42 | 			<div class=ytp-menuitem-content></div>
43 | 		</div>
44 | 	</div>
45 | 	<textarea id=yt-lcf-clipboard class=ytp-html5-clipboard readonly tabindex=-1></textarea>
46 | </div>


--------------------------------------------------------------------------------
/src/templates/panel_menu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <title>popupmenu</title>
 3 | <div id=yt-lcf-cb class=ytp-menuitem tabindex=0 role=menuitemcheckbox aria-checked=undefined>
 4 | 	<div class=ytp-menuitem-icon>
 5 | 		<svg height="24" width="24" viewBox="-40 -40 80 80">
 6 | 			<path d="M0,24Q8,24,24,23,31,22,31,19,32,12,32,0M0,24Q-8,24,-24,23,-31,22,-31,19,-32,12,-32,0M0,-24Q-8,-24,-24,-23,-31,-22,-31,-19,-32,-12,-32,0M0,-24Q8,-24,24,-23,31,-22,31,-19,32,-12,32,0" fill="none" stroke="white" stroke-width="3" />
 7 | 			<g fill="white" transform="translate(0,10)">
 8 | 				<path d="M4,-10l12,12h8l-12,-12,12,-12h-8z" />
 9 | 				<circle r="3" />
10 | 				<circle cx="-10" r="3" />
11 | 				<circle cx="-20" r="3" />
12 | 			</g>
13 | 		</svg>
14 | 	</div>
15 | 	<div class=ytp-menuitem-label data-i18n=ytp_menuitem_label_switch></div>
16 | 	<div class=ytp-menuitem-content>
17 | 		<div class=ytp-menuitem-toggle-checkbox></div>
18 | 	</div>
19 | </div>
20 | <div id=yt-lcf-pm class=ytp-menuitem tabindex=0 role=menuitem aria-haspopup=true>
21 | 	<div class=ytp-menuitem-icon>
22 | 		<svg height="24" width="24" viewBox="-40 -64 108 108">
23 | 			<mask id="m">
24 | 				<path d="M-40-80h120v120h-120z" fill="white" />
25 | 				<circle r="9" />
26 | 			</mask>
27 | 			<path d="M0,24Q8,24,24,23,31,22,31,19,32,12,32,0M0,24Q-8,24,-24,23,-31,22,-31,19,-32,12,-32,0M0,-24Q-8,-24,-24,-23,-31,-22,-31,-19,-32,-12,-32,0" fill="none" stroke="white" stroke-width="4" />
28 | 			<g fill="white" transform="translate(0,10)">
29 | 				<circle cx="8" r="3" />
30 | 				<circle cx="-4" r="3" />
31 | 				<circle cx="-16" r="3" />
32 | 				<g transform="translate(32,-32) scale(1.25)" mask="url(#m)">
33 | 					<path id="p" d="M0,0L-10,-8L-6,-24Q0,-26,6,-24L10,-8L-10,8L-6,24Q0,26,6,24L10,8z" />
34 | 					<use xlink:href="#p" transform="rotate(60)" />
35 | 					<use xlink:href="#p" transform="rotate(120)" />
36 | 				</g>
37 | 			</g>
38 | 		</svg>
39 | 	</div>
40 | 	<div class=ytp-menuitem-label data-i18n=ytp_menuitem_label_config></div>
41 | 	<div class=ytp-menuitem-content></div>
42 | </div>
43 | <div id=yt-lcf-pp class=ytp-menuitem tabindex=0 role=menuitem aria-haspopup=true>
44 | 	<div class=ytp-menuitem-icon>
45 | 		<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-30 -30 60 60">
46 | 			<g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round">
47 | 				<path d="M-16-12l8,8h-8h8v-8" stroke-width="2" />
48 | 				<path d="M-8,16h-12a4,4,0,0,1,-4,-4v-28a4,4,0,0,1,4,-4h40a4,4,0,0,1,4,4v12" stroke-width="3" />
49 | 			</g>
50 | 			<rect width="25" height="15" y="2" rx="2" ry="2" fill="#fff" />
51 | 		</svg>
52 | 	</div>
53 | 	<div class=ytp-menuitem-label data-i18n=ytp_menuitem_label_pip></div>
54 | 	<div class=ytp-menuitem-content></div>
55 | </div>


--------------------------------------------------------------------------------
/src/options/options.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset=utf-8>
  3 | <title>browser_action</title>
  4 | <link rel=stylesheet href=options.css>
  5 | <form id=form name=form>
  6 | 	<section>
  7 | 		<h1 data-i18n=manifestName>YouTube LiveChat Flusher</h1>
  8 | 		<table>
  9 | 			<tr>
 10 | 				<th data-i18n=version>
 11 | 				<td data-manifest=version>
 12 | 			<tr>
 13 | 				<th>GitHub
 14 | 				<td><a href=https://github.com/ys-j/YoutubeLiveChatFlusher target=_blank>Home</a> / <a href=https://github.com/ys-j/YoutubeLiveChatFlusher/wiki target=_blank>Wiki</a>
 15 | 			<tr>
 16 | 				<th data-i18n=configFile>
 17 | 				<td>
 18 | 					<button id=btn-export type=button data-i18n=export></button>
 19 | 					<button id=btn-import type=button data-i18n=import></button>
 20 | 					<button id=btn-init type=button data-i18n=init></button>
 21 | 		</table>
 22 | 	</section>
 23 | 	<section>
 24 | 		<h2 data-i18n=commonSettings></h2>
 25 | 		<dl>
 26 | 			<dt data-i18n=loadingMode>
 27 | 			<dd>
 28 | 				<table>
 29 | 					<tr>
 30 | 						<th data-i18n=livestream>
 31 | 						<td>
 32 | 							<label>
 33 | 								<input type=radio name=mode_livestream value=0>
 34 | 								<span data-i18n=mode_option_chatframe_dependent></span>
 35 | 							</label>
 36 | 							<label>
 37 | 								<input type=radio name=mode_livestream value=1>
 38 | 								<span data-i18n=mode_option_chatframe_independent></span>
 39 | 							</label>
 40 | 					<tr>
 41 | 						<th data-i18n=replay>
 42 | 						<td>
 43 | 							<label>
 44 | 								<input type=radio name=mode_replay value=0>
 45 | 								<span data-i18n=mode_option_chatframe_dependent></span>
 46 | 							</label>
 47 | 							<label>
 48 | 								<input type=radio name=mode_replay value=1>
 49 | 								<span data-i18n=mode_option_chatframe_independent></span>
 50 | 							</label>
 51 | 				</table>
 52 | 				<dl class=note>
 53 | 					<dt data-i18n=mode_option_chatframe_dependent>
 54 | 					<dd>
 55 | 						<ul>
 56 | 							<li data-i18n=description_chatframe_dependent_1>
 57 | 							<li data-i18n=description_chatframe_dependent_2>
 58 | 						</ul>
 59 | 					<dt data-i18n=mode_option_chatframe_independent>
 60 | 					<dd>
 61 | 						<ul>
 62 | 							<li data-i18n=description_chatframe_independent_1>
 63 | 							<li data-i18n=description_chatframe_independent_2>
 64 | 							<li data-i18n=description_chatframe_independent_3>
 65 | 						</ul>
 66 | 				</dl>
 67 | 			<dt data-i18n=autostart>
 68 | 			<dd>
 69 | 				<label>
 70 | 					<input type=radio name=autostart value=0>
 71 | 					<span data-i18n=disabled></span>
 72 | 				</label>
 73 | 				<label>
 74 | 					<input type=radio name=autostart value=1>
 75 | 					<span data-i18n=enabled></span>
 76 | 				</label>
 77 | 			<dt data-i18n=hotkey>
 78 | 			<dd>
 79 | 				<table>
 80 | 					<tr>
 81 | 						<th>
 82 | 							<label for=hotkey_layer data-i18n=hotkey_layer></label>
 83 | 						<td>
 84 | 							<input id=hotkey_layer name=hotkey_layer maxlength=1 size=3>
 85 | 					<tr>
 86 | 						<th>
 87 | 							<label for=hotkey_panel data-i18n=hotkey_panel></label>
 88 | 						<td>
 89 | 							<input id=hotkey_panel name=hotkey_panel maxlength=1 size=3>
 90 | 				</table>
 91 | 			<dt data-i18n=message_pause>
 92 | 			<dd>
 93 | 				<label>
 94 | 					<input type=radio name=message_pause value=0>
 95 | 					<span data-i18n=disabled></span>
 96 | 				</label>
 97 | 				<label>
 98 | 					<input type=radio name=message_pause value=1>
 99 | 					<span data-i18n=enabled></span>
100 | 				</label>
101 | 		</dl>
102 | 	</section>
103 | 	<section>
104 | 		<h2 data-i18n=translation></h2>
105 | 		<dl>
106 | 			<dt data-i18n=translationBlacklist>
107 | 			<dd>
108 | 				<label>
109 | 					<input type=checkbox name=translation_blacklist_regexp>
110 | 					<span data-i18n=regexp></span>
111 | 				</label>
112 | 				<br>
113 | 				<textarea name=translation_blacklist rows=20 data-i18n-placeholder=placeholder_mutedWordsList></textarea>
114 | 			<dt data-i18n=translationUrl>
115 | 			<dd><input type=url name=translation_url required>
116 | 		</dl>
117 | 	</section>
118 | 	<section>
119 | 		<button class=primary id=btn-save disabled data-i18n=save></button>
120 | 		<div><small id=status hidden data-i18n=warn_notSaved></small></div>
121 | 	</section>
122 | </form>
123 | <script src=options.js type=module></script>


--------------------------------------------------------------------------------
/src/options/options.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--color-blue-60: oklch(55% 0.24 260);
  3 | 	--color-blue-70: oklch(48% 0.2 260);
  4 | 	--color-cyan-20: oklch(83% 0.11 205);
  5 | 	--color-cyan-30: oklch(76% 0.14 205);
  6 | 	--color-white: #fff;
  7 | 	--color-gray-05: #fbfbfe;
  8 | 	--color-gray-80: #23222b;
  9 | 	--color-gray-100: #15141a;
 10 | 	--accent-color: var(--color-blue-60);
 11 | 	--accent-color-hover: var(--color-blue-70);
 12 | 	--background-color: var(--color-white);
 13 | 	--text-color: var(--color-gray-100);
 14 | 	--text-color-deemphasized: color-mix(in srgb, var(--text-color) 69%, transparent);
 15 | 	--accent-text-color: var(--color-white);
 16 | 	--border-color: color-mix(in srgb, var(--text-color) 20%, transparent);
 17 | }
 18 | * {
 19 | 	box-sizing: border-box;
 20 | }
 21 | body {
 22 | 	accent-color: var(--accent-color);
 23 | 	background-color: var(--background-color);
 24 | 	color: var(--text-color);
 25 | 	font-family: system-ui;
 26 | 	font-size: 14px;
 27 | 	margin: 0;
 28 | }
 29 | section {
 30 | 	padding: 1em;
 31 | }
 32 | section + section {
 33 | 	border-top: 1px solid var(--border-color);
 34 | }
 35 | section:last-of-type {
 36 | 	display: flex;
 37 | 	align-items: center;
 38 | }
 39 | h1, h2 {
 40 | 	color: var(--text-color);
 41 | 	font-size: 1.2em;
 42 | 	margin: .5em 0;
 43 | }
 44 | a {
 45 | 	color: var(--accent-color);
 46 | }
 47 | a:hover {
 48 | 	color: var(--accent-color-hover);
 49 | }
 50 | th {
 51 | 	color: var(--text-color);
 52 | 	font-weight: normal;
 53 | 	text-align: start;
 54 | 	white-space: nowrap;
 55 | 	&:only-of-type {
 56 | 		padding-inline-end: .5em;
 57 | 	}
 58 | }
 59 | td {
 60 | 	color: var(--text-color-deemphasized);
 61 | }
 62 | dl.note {
 63 | 	background-color: color-mix(in srgb, var(--text-color) 3.5%, transparent);
 64 | 	border-radius: 8px;
 65 | 	margin: .75em 0 .75em -1em;
 66 | 	padding: .75em 1em;
 67 | 	[data-browser="chrome"] & ul {
 68 | 		padding-inline-start: 1em;
 69 | 	}
 70 | 	[data-browser="firefox"] & ul {
 71 | 		padding-inline-start: 0;
 72 | 	}
 73 | }
 74 | dt {
 75 | 	color: var(--text-color);
 76 | 	font-weight: bolder;
 77 | 	dd + & {
 78 | 		margin: 1em 0 .25em;
 79 | 	}
 80 | }
 81 | dd {
 82 | 	color: var(--text-color-deemphasized);
 83 | 	[data-browser="chrome"] & {
 84 | 		margin-inline-start: 1em;
 85 | 	}
 86 | }
 87 | button {
 88 | 	appearance: none;
 89 | 	background-color: color-mix(in srgb, var(--text-color) 7%, transparent);
 90 | 	border: 1px solid transparent;
 91 | 	border-radius: 4px;
 92 | 	color: var(--text-color);
 93 | 	margin: 4px 8px;
 94 | 	padding: .45em 1em;
 95 | 	white-space: nowrap;
 96 | }
 97 | button:hover {
 98 | 	background-color: color-mix(in srgb, var(--text-color) 14%, transparent);
 99 | }
100 | button:disabled {
101 | 	opacity: .25;
102 | 	pointer-events: none;
103 | }
104 | button.primary {
105 | 	background-color: var(--accent-color);
106 | 	color: var(--accent-text-color);
107 | }
108 | button.primary:hover {
109 | 	background-color: var(--accent-color-hover);
110 | }
111 | label {
112 | 	display: inline-block;
113 | 	&:not(:last-of-type) {
114 | 		margin-inline-end: 1em;
115 | 	}
116 | }
117 | input[type="radio"] {
118 | 	height: 16px;
119 | 	width: 16px;
120 | 	vertical-align: -3px;
121 | 	&:not(:checked) {
122 | 		appearance: none;
123 | 		border: 1px solid var(--border-color);
124 | 		border-radius: 50%;
125 | 		&:hover {
126 | 			border-color: color-mix(in srgb, var(--text-color) 30%, transparent);
127 | 		}
128 | 	}
129 | 	& + span {
130 | 		padding-inline-start: .25em;
131 | 	}
132 | }
133 | input:checked + span {
134 | 	color: var(--text-color);
135 | }
136 | input:is(:not([type]), [type="text"], [type="url"]),
137 | textarea {
138 | 	background-color: transparent;
139 | 	border: 1px solid currentColor;
140 | 	border-radius: 4px;
141 | 	color: inherit;
142 | 	padding: 4px;
143 | 	width: 100%;
144 | 	&:invalid {
145 | 		outline: 1px solid red;
146 | 	}
147 | 	&[name^="hotkey"] {
148 | 		text-align: center;
149 | 	}
150 | }
151 | 
152 | @media (prefers-color-scheme: dark) {
153 | 	:root {
154 | 		--accent-color: var(--color-cyan-30);
155 | 		--accent-color-hover: var(--color-cyan-20);
156 | 		--accent-text-color: var(--color-gray-100);
157 | 	}
158 | 	[data-browser="chrome"] {
159 | 		--background-color: #292a2d;
160 | 		--text-color: #c4c7c5;
161 | 	}
162 | 	[data-browser="firefox"] {
163 | 		--background-color: var(--color-gray-80);
164 | 		--text-color: var(--color-gray-05);
165 | 	}
166 | }


--------------------------------------------------------------------------------
/src/options/options.js:
--------------------------------------------------------------------------------
  1 | /// <reference path="../../browser.d.ts" />
  2 | 
  3 | import { Storage } from '../modules/utils.js';
  4 | 
  5 | // @ts-ignore
  6 | self.browser ??= chrome;
  7 | const manifest = browser.runtime.getManifest();
  8 | document.documentElement.dataset.browser = 'browser_specific_settings' in manifest ? 'firefox' : 'chrome';
  9 | 
 10 | /** @type {NodeListOf<HTMLElement>} */
 11 | const i18nElems = document.querySelectorAll('[data-i18n]');
 12 | for (const el of i18nElems) {
 13 | 	const key = el.dataset.i18n;
 14 | 	if (key) {
 15 | 		const msg = browser.i18n.getMessage(key);
 16 | 		if (msg) el.textContent = msg;
 17 | 	}
 18 | }
 19 | /** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
 20 | const i18nPlaceholders = document.querySelectorAll('[data-i18n-placeholder]');
 21 | for (const el of i18nPlaceholders) {
 22 | 	const key = el.dataset.i18nPlaceholder;
 23 | 	if (key) {
 24 | 		const msg = browser.i18n.getMessage(key);
 25 | 		if (msg) el.placeholder = msg;
 26 | 	}
 27 | }
 28 | 
 29 | /** @type {NodeListOf<HTMLElement>} */
 30 | const manifestElems = document.querySelectorAll('[data-manifest]');
 31 | for (const el of manifestElems) {
 32 | 	const key = el.dataset.manifest;
 33 | 	if (key && key in manifest) el.textContent = manifest[key];
 34 | }
 35 | 
 36 | const exportBtn = document.getElementById('btn-export');
 37 | exportBtn?.addEventListener('click', () => {
 38 | 	Storage.export();
 39 | }, { passive: true });
 40 | 
 41 | const importBtn = document.getElementById('btn-import');
 42 | importBtn?.addEventListener('click', async () => {
 43 | 	await Storage.import();
 44 | 	location.reload();
 45 | }, { passive: true });
 46 | 
 47 | const initBtn = document.getElementById('btn-init');
 48 | initBtn?.addEventListener('click', async () => {
 49 | 	await Storage.init();
 50 | 	location.reload();
 51 | }, { passive: true });
 52 | 
 53 | const saveBtn = /** @type {HTMLButtonElement?} */ (document.getElementById('btn-save'));
 54 | 
 55 | const form = document.forms.namedItem('form');
 56 | if (form) {
 57 | 	const controls = form.elements;
 58 | 	const config = structuredClone(Storage.DEFAULT);
 59 | 	const storage = await Storage.get(['others', 'hotkeys', 'translation']);
 60 | 	for (const k of Object.keys(config)) {
 61 | 		// @ts-ignore
 62 | 		Object.assign(config[k], storage[k]);
 63 | 	}
 64 | 	/** @type {Record<string, HTMLInputElement | HTMLSelectElement | RadioNodeList>} */
 65 | 	// @ts-ignore
 66 | 	const {
 67 | 		mode_livestream,
 68 | 		mode_replay,
 69 | 		hotkey_layer,
 70 | 		hotkey_panel,
 71 | 		autostart,
 72 | 		message_pause,
 73 | 		translation_blacklist_regexp,
 74 | 		translation_blacklist,
 75 | 		translation_url
 76 | 	} = controls;
 77 | 
 78 | 	// mode
 79 | 	mode_livestream.value = config.others.mode_livestream.toString();
 80 | 	mode_replay.value = config.others.mode_replay.toString();
 81 | 
 82 | 	// autostart
 83 | 	autostart.value = config.others.autostart.toString();
 84 | 
 85 | 	// message pause
 86 | 	message_pause.value = config.others.message_pause.toString();
 87 | 	
 88 | 	// hotkeys
 89 | 	hotkey_layer.value = config.hotkeys.layer;
 90 | 	hotkey_panel.value = config.hotkeys.panel;
 91 | 
 92 | 	// translation
 93 | 	/** @type {HTMLInputElement} */
 94 | 	(translation_blacklist_regexp).checked = config.translation.regexp;
 95 | 	translation_blacklist.value = config.translation.plainList.join('\n');
 96 | 	translation_url.value = config.translation.url;
 97 | 
 98 | 	const status = document.getElementById('status');
 99 | 	form.addEventListener('change', () => {
100 | 		if (saveBtn) saveBtn.disabled = false;
101 | 		if (status) status.hidden = false;
102 | 	});
103 | 	
104 | 	form.addEventListener('submit', async e => {
105 | 		e.preventDefault();
106 | 		const store = await Storage.get();
107 | 		store.others.mode_livestream = Number.parseInt(mode_livestream.value);
108 | 		store.others.mode_replay = Number.parseInt(mode_replay.value);
109 | 		store.others.autostart = Number.parseInt(autostart.value);
110 | 		store.others.message_pause = Number.parseInt(message_pause.value);
111 | 		store.hotkeys.layer = hotkey_layer.value;
112 | 		store.hotkeys.panel = hotkey_panel.value;
113 | 		store.translation.regexp = /** @type {HTMLInputElement} */ (translation_blacklist_regexp).checked;
114 | 		store.translation.plainList = translation_blacklist.value.split(/\n+/).filter(s => s.length > 0);
115 | 		store.translation.url = translation_url.value;
116 | 		await Storage.set(store);
117 | 		if (status) status.hidden = true;
118 | 		browser.runtime.sendMessage({ fire: 'reload' });
119 | 	}, { passive: false });
120 | }


--------------------------------------------------------------------------------
/types/ytlivechatrenderer.d.ts:
--------------------------------------------------------------------------------
  1 | declare namespace LiveChat {
  2 | 	interface LiveChatItemAction {
  3 | 		clickTrackingParams: string
  4 | 		addChatItemAction?: { item: AnyRenderer }
  5 | 		markChatItemAsDeletedAction?: { targetItemId: string }
  6 | 		markChatItemsByAuthorAsDeletedAction?: { externalChannelId: string }
  7 | 		replaceChatItemAction?: { targetItemId: string, replacementItem: AnyRenderer }
  8 | 	}
  9 | 	interface ReplayChatItemAction {
 10 | 		clickTrackingParams: string
 11 | 		replayChatItemAction: {
 12 | 			actions: LiveChatItemAction[],
 13 | 			videoOffsetTimeMsec: string,
 14 | 		}
 15 | 	}
 16 | 	interface RendererContent {
 17 | 		authorBadges?: AuthorBadgeRenderer[]
 18 | 		authorExternalChannelId: string
 19 | 		authorName: SimpleText
 20 | 		authorPhoto: {
 21 | 			thumbnails: Thumbnail[]
 22 | 			webThumbnailDetailsExtensionData?: {
 23 | 				isPreloaded: boolean
 24 | 			}
 25 | 		}
 26 | 		id: string
 27 | 		timestampColor: number	// replay
 28 | 		timestampText?: SimpleText	// replay
 29 | 		timestampUsec: string
 30 | 		trackingParams: string	// streaming
 31 | 		message?: Runs
 32 | 	}
 33 | 	type AnyRenderer = TextMessageRenderer | MembershipItemRenderer | PaidMessageRenderer | PaidStickerRenderer | ViewerEngagementMessageRenderer | SponsorshipsGiftPurchaseAnnouncementRenderer;
 34 | 	type TextMessageRenderer = {
 35 | 		liveChatTextMessageRenderer: RendererContent & {
 36 | 			message: Runs
 37 | 			timestampText: SimpleText
 38 | 		}
 39 | 	};
 40 | 	type MembershipItemRenderer = {
 41 | 		liveChatMembershipItemRenderer: RendererContent & {
 42 | 			headerPrimaryText?: Runs
 43 | 			headerSubtext?: Runs | SimpleText
 44 | 			message?: Runs
 45 | 			timestampText?: SimpleText
 46 | 		}
 47 | 	}
 48 | 	type PaidMessageRenderer = {
 49 | 		liveChatPaidMessageRenderer: RendererContent & {
 50 | 			authorNameTextColor: number
 51 | 			bodyBackgroundColor: number
 52 | 			bodyTextColor: number
 53 | 			headerBackgroundColor: number
 54 | 			headerTextColor: number
 55 | 			message: Runs
 56 | 			purchaseAmountText: SimpleText
 57 | 			timestampColor: number
 58 | 			timestampText?: SimpleText
 59 | 		}
 60 | 	}
 61 | 	type PaidStickerRenderer = {
 62 | 		liveChatPaidStickerRenderer: RendererContent & {
 63 | 			authorNameTextColor: number
 64 | 			backgroundColor: number
 65 | 			moneyChipBackgroundColor: number
 66 | 			moneyChipTextColor: number
 67 | 			purchaseAmountText: SimpleText
 68 | 			sticker: {
 69 | 				thumbnails: Thumbnail[]
 70 | 			}
 71 | 			stickerDisplayHeight: number
 72 | 			stickerDisplayWidth: number
 73 | 		}
 74 | 	}
 75 | 	type ViewerEngagementMessageRenderer = {
 76 | 		liveChatViewerEngagementMessageRenderer: { 
 77 | 			actionButton: ButtonRenderer
 78 | 			icon: { iconType: "GIFT" }
 79 | 			message: Runs
 80 | 		} | {
 81 | 			contextMenuAccessibility: AccessibilityData
 82 | 			contextMenuEndpoint: {
 83 | 				commandMetadata: WebCommandMetadata
 84 | 				liveChatItemContextMenuEndpoint: {
 85 | 					param: string
 86 | 				}
 87 | 			}
 88 | 			icon: { iconType: "POLL" }
 89 | 			id: string
 90 | 			message: Runs
 91 | 		} | {
 92 | 			icon: { iconType: "YOUTUBE_ROUND" }
 93 | 		}
 94 | 	}
 95 | 	type SponsorshipsGiftPurchaseAnnouncementRenderer = {
 96 | 		liveChatSponsorshipsGiftPurchaseAnnouncementRenderer: {
 97 | 			authorExternalChannelId: string
 98 | 			header: SponsorshipsHeaderRenderer
 99 | 			id: string
100 | 			optInPrompt: ViewerEngagementMessageRenderer
101 | 			timestampUsec: string
102 | 		}
103 | 	}
104 | 	type SponsorshipsHeaderRenderer = {
105 | 		liveChatSponsorshipsHeaderRenderer: {
106 | 			authorBudges: AuthorBadgeRenderer[]
107 | 			authorName: SimpleText,
108 | 			authorPhoto: {
109 | 				thumbnails: Thumbnail[]
110 | 				webThumbnailDetailsExtensionData?: {
111 | 					isPreloaded: boolean
112 | 				}
113 | 			}
114 | 			contextMenuAccessibility: AccessibilityData
115 | 			contextMenuEndpoint: {
116 | 				clickTrackingParams: string
117 | 				commandMetadata: WebCommandMetadata
118 | 				liveChatItemContextMenuEndpoint: {
119 | 					param: string
120 | 				}
121 | 			}
122 | 			image: Thumbnail[]
123 | 			primaryText: Runs<Text>
124 | 		}
125 | 	}
126 | 	type SponsorshipsGiftRedemptionAnnouncementRenderer = {
127 | 		liveChatSponsorshipsGiftRedemptionAnnouncementRenderer: RendererContent & {
128 | 			contextMenuAccessibility: AccessibilityData
129 | 			contextMenuEndpoint: {
130 | 				clickTrackingParams: string
131 | 				commandMetadata: WebCommandMetadata
132 | 				liveChatItemContextMenuEndpoint: {
133 | 					params: string
134 | 				}
135 | 			}
136 | 		}
137 | 	}
138 | 	type ModeChangeMessageRenderer = {
139 | 		liveChatModeChangeMessageRenderer: {
140 | 			icon: {
141 | 				iconType: string
142 | 			}
143 | 			id: string
144 | 			subtext: Runs
145 | 			text: Runs
146 | 			timestampText: SimpleText
147 | 			timestampUsec: string
148 | 		}
149 | 	}
150 | 	type PlaceholderItemRenderer = {
151 | 		liveChatPlaceholderItemRenderer: {
152 | 			id: string
153 | 			timestampUsec: string
154 | 		}
155 | 	}
156 | 	type AuthorBadgeRenderer = {
157 | 		liveChatAuthorBadgeRenderer: {
158 | 			accessibility: AccessibilityData
159 | 			customThumbnail?: {
160 | 				thumbnails: Thumbnail[]
161 | 			}
162 | 			icon?: {
163 | 				iconType: string
164 | 			}
165 | 			tooltip: string
166 | 		}
167 | 	}
168 | 	type AccessibilityData = {
169 | 		accessibilityData: {
170 | 			label: string
171 | 		}
172 | 	}
173 | 	type ButtonRenderer = {
174 | 		buttonRenderer: {
175 | 			command: {
176 | 				browseEndpoint: {
177 | 					browseId: string
178 | 					navigationType: string
179 | 					param: string
180 | 				}
181 | 				clickTrackingParams: string
182 | 				commandMetadata: {
183 | 					webCommandMetadata: {
184 | 						apiUrl: string
185 | 						sendPost: boolean
186 | 					}
187 | 				}
188 | 			}
189 | 			isDisabled: boolean
190 | 			size: string
191 | 			style: string
192 | 			text: Runs
193 | 		}
194 | 	}
195 | 	type Thumbnail = {
196 | 		url: string
197 | 		width?: number
198 | 		height?: number
199 | 	}
200 | 	type SimpleText = {
201 | 		simpleText: string
202 | 	}
203 | 	type Runs<T = Text | Emoji> = {
204 | 		runs: T[]
205 | 	}
206 | 	type Text = {
207 | 		text: string
208 | 		bold?: boolean
209 | 		italics?: boolean
210 | 		navigationEndpoint?: {
211 | 			commandMetadata: WebCommandMetadata
212 | 			urlEndpoint?: {
213 | 				url: string
214 | 				target: string
215 | 				nofollow: boolean
216 | 			}
217 | 			watchEndpoint?: {
218 | 				videoId: string
219 | 				nofollow: boolean
220 | 			}
221 | 		}
222 | 	}
223 | 	type Emoji = {
224 | 		emoji: {
225 | 			emojiId: string
226 | 			image: {
227 | 				accessibility: AccessibilityData
228 | 				thumbnails: Thumbnail[]
229 | 			}
230 | 			isCustomEmoji: boolean
231 | 			searchTerms: string[]
232 | 			shortcuts?: string[]
233 | 		}
234 | 	}
235 | 	type WebCommandMetadata = {
236 | 		webCommandMetadata: {
237 | 			// ViewerEngagementMessageRenderer | SponsorshipsHeaderRenderer | SponsorshipsGiftRedemptionAnnouncementRenderer
238 | 			ignoreNavigation?: boolean
239 | 			// ButtonRenderer
240 | 			apiUrl?: string
241 | 			sendPost?: boolean
242 | 			// Text
243 | 			url?: string
244 | 			webPageType?: string
245 | 			rootVe?: number
246 | 		}
247 | 	}
248 | }
249 | 
250 | interface DocumentAndElementEventHandlersEventMap {
251 | 	"yt-action": CustomEvent<{
252 | 		actionName: string
253 | 		args: any[][]
254 | 	}>
255 | }


--------------------------------------------------------------------------------
/src/modules/pip.js:
--------------------------------------------------------------------------------
  1 | /// <reference path="../../types/browser.d.ts" />
  2 | /// <reference path="../../types/extends.d.ts" />
  3 | 
  4 | /**
  5 |  * Initializes the PiP-mode menu.
  6 |  */
  7 | export function initPipMenu() {
  8 | 	const pipmenuTop = document.getElementById('yt-lcf-pp');
  9 | 	if ('documentPictureInPicture' in window) {
 10 | 		const pipmenu = pipmenuTop || self.documentPictureInPicture?.window?.document.getElementById('yt-lcf-pp');
 11 | 		pipmenu?.addEventListener('click',  async () => {
 12 | 			const pipWindow = self.documentPictureInPicture?.window;
 13 | 			if (pipWindow) {
 14 | 				pipWindow.close();
 15 | 			} else {
 16 | 				const layer = document.getElementById('yt-lcf-layer');
 17 | 				if (layer) {
 18 | 					const player = layer.closest('#player-container');
 19 | 					if (player) await openPip(player);
 20 | 				}
 21 | 			}
 22 | 		}, { passive: true });
 23 | 	} else {
 24 | 		if (pipmenuTop) pipmenuTop.hidden = true;
 25 | 	}
 26 | }
 27 | 
 28 | /**
 29 |  * Creates and opens document picture-in-picture window of the video player container.
 30 |  * @param {Element} element element of video player container
 31 |  * @returns {Promise<Window>} document picture-in-picture window
 32 |  */
 33 | export async function openPip(element) {
 34 | 	const parent = element.parentElement;
 35 | 	if (!parent) throw new Error('No parent element.');
 36 | 	const pipWindow = await top?.documentPictureInPicture?.requestWindow({
 37 | 		width: parent.clientWidth,
 38 | 		height: parent.clientHeight,
 39 | 	});
 40 | 	if (!pipWindow) throw new Error('Document Picture-in-Picture API is not implemented.');
 41 | 
 42 | 	top?.addEventListener('keydown', disableKeyboardShortcutOnParentWindow, true);
 43 | 	pipWindow?.addEventListener('keydown', enableKeyboardShortcutOnChildWindow, true);
 44 | 
 45 | 	top?.addEventListener('yt-navigate-finish', onYtNavigateFinishDispatchPip, { passive: true });
 46 | 	
 47 | 	for (const attr of document.documentElement.attributes) {
 48 | 		pipWindow.document.documentElement.attributes.setNamedItem(attr.cloneNode());
 49 | 	}
 50 | 	const pipMetaCharset = document.createElement('meta');
 51 | 	pipMetaCharset.setAttribute('charset', 'utf-8');
 52 | 	const pipTitle = document.createElement('title');
 53 | 	pipTitle.textContent = document.querySelector('h1.ytd-watch-metadata')?.textContent || 'YouTube';
 54 | 	const pipLink = document.createElement('link');
 55 | 	pipLink.rel = 'stylesheet';
 56 | 	pipLink.type = 'text/css';
 57 | 	pipLink.href = browser.runtime.getURL('../styles/content.css');
 58 | 	const pipStyle = document.createElement('style');
 59 | 	pipStyle.textContent = `:root,body,body>*{height:100%;overflow:hidden}.ytp-miniplayer-button,.ytp-size-button,.ytp-fullscreen-button{display:none!important}#yt-lcf-pp{display:none!important}`;
 60 | 	
 61 | 	pipWindow.document.head.append(pipMetaCharset, pipTitle, ...Array.from(element.ownerDocument.styleSheets, sheet => {
 62 | 		if (sheet.href) {
 63 | 			const link = document.createElement('link');
 64 | 			link.rel = 'stylesheet';
 65 | 			link.type = sheet.type;
 66 | 			link.media = Array.from(sheet.media).join();
 67 | 			link.href = sheet.href;
 68 | 			return link;
 69 | 		} else {
 70 | 			const style = document.createElement('style');
 71 | 			style.textContent = Array.from(sheet.cssRules, rule => rule.cssText).join('');
 72 | 			return style;
 73 | 		}
 74 | 	}), pipLink, pipStyle);
 75 | 
 76 | 	const pipMarker = document.createElement('span');
 77 | 	pipMarker.id = 'yt-lcf-pip-marker';
 78 | 	pipMarker.textContent = browser.i18n.getMessage('pip_marker');
 79 | 	element.before(pipMarker);
 80 | 	pipWindow.document.body.appendChild(element);
 81 | 	pipWindow.document.body.dataset.browser = document.body.dataset.browser;
 82 | 
 83 | 	const video = pipWindow.document.querySelector('video');
 84 | 	video?.addEventListener('ytlcf-resize', onResizeVideo, { passive: true });
 85 | 	video?.addEventListener('loadeddata', e => {
 86 | 		video.dispatchEvent(new CustomEvent('ytlcf-resize', { detail: pipWindow }));
 87 | 	}, { passive: true });
 88 | 
 89 | 	pipWindow.addEventListener('ytlcf-pip-update', () => {
 90 | 		const pipTitle = pipWindow.document.getElementsByTagName('title')[0];
 91 | 		if (pipTitle) {
 92 | 			const title = document.querySelector('h1.ytd-watch-metadata')?.textContent;
 93 | 			pipTitle.textContent = title || 'YouTube';
 94 | 		}
 95 | 	}, { passive: true });
 96 | 	pipWindow.dispatchEvent(new CustomEvent('ytlcf-pip-update'));
 97 | 
 98 | 	pipWindow.addEventListener('resize', () => {
 99 | 		const video = pipWindow.document.querySelector('video');
100 | 		video?.dispatchEvent(new CustomEvent('ytlcf-resize', { detail: pipWindow }));
101 | 	}, { passive: true });
102 | 
103 | 	pipWindow.addEventListener('pagehide', () => {
104 | 		const parent = pipMarker.parentElement || top?.document.getElementById('player-container-inner');
105 | 		parent?.append(element);
106 | 		if (parent) {
107 | 			const v = parent.querySelector('video');
108 | 			if (v) {
109 | 				v.style.width = `${parent.clientWidth|0}px`;
110 | 				v.style.height = 'auto';
111 | 				v.style.top = v.style.left = '0px';
112 | 				/** @type {HTMLElement?} */
113 | 				const b = parent.querySelector('.ytp-chrome-bottom');
114 | 				if (b) {
115 | 					const left = Number.parseInt(b.style.left);
116 | 					b.style.width = `${v.clientWidth - left * 2}px`;
117 | 				}
118 | 				v.removeEventListener('ytlcf-resize', onResizeVideo);
119 | 			}
120 | 		}
121 | 		if (top?.document.contains(pipMarker)) pipMarker.remove();
122 | 		top?.removeEventListener('keydown', disableKeyboardShortcutOnParentWindow, true);
123 | 		pipWindow.removeEventListener('keydown', enableKeyboardShortcutOnChildWindow, true);
124 | 		top?.removeEventListener('yt-navigate-finish', onYtNavigateFinishDispatchPip);
125 | 	}, { passive: true });
126 | 	return pipWindow;
127 | 
128 | 	/**
129 | 	 * @param {CustomEvent} e 
130 | 	 */
131 | 	function onYtNavigateFinishDispatchPip(e) {
132 | 		pipWindow?.dispatchEvent(new CustomEvent('ytlcf-pip-update'));
133 | 	}
134 | }
135 | 
136 | /**
137 |  * Updates size of progress bar in picture-in-picture window.
138 |  * @param {Window} win picture-in-picture window
139 |  */
140 | function updateProgressBarSize(win) {
141 | 	/** @type {HTMLElement?} */
142 | 	const bottomElem = win.document.querySelector('.ytp-chrome-bottom');
143 | 	if (bottomElem) {
144 | 		const left = Number.parseInt(bottomElem.style.left);
145 | 		const bottomWidth = win.innerWidth - left * 2;
146 | 		bottomElem.style.width = `${bottomWidth}px`;
147 | 
148 | 		/** @type {HTMLElement?} */
149 | 		const progressBar = bottomElem.querySelector('.ytp-progress-bar');
150 | 		if (progressBar) {
151 | 			/** @type {HTMLElement?} */
152 | 			const hoverContainer = bottomElem.querySelector('.ytp-chapter-hover-container');
153 | 			const containerWidth = Number.parseInt(hoverContainer?.style.width || '0');
154 | 			if (containerWidth > 0) {
155 | 				progressBar.style.transformOrigin = '0 0 0';
156 | 				progressBar.style.transform = `scaleX(${bottomWidth / containerWidth})`;
157 | 			}
158 | 		}
159 | 		/** @type {HTMLElement?} */
160 | 		const heatMap = bottomElem.querySelector('.ytp-heat-map-chapter');
161 | 		if (heatMap) {
162 | 			heatMap.style.width = '100%';
163 | 		}
164 | 	}
165 | }
166 | 
167 | /**
168 |  * @this {HTMLVideoElement}
169 |  * @param {CustomEvent<Window>} e 
170 |  */
171 | function onResizeVideo(e) {
172 | 	const { innerWidth: ww, innerHeight: wh } = e.detail;
173 | 	const { videoWidth: vw, videoHeight: vh } = this;
174 | 	if (!vw || !vh) return;
175 | 	const aspect = vw / vh;
176 | 	const w = Math.min(ww, (wh * aspect)|0);
177 | 	this.style.height = `${Math.min(wh, (w / aspect)|0)}px`;
178 | 	this.style.width = `${w}px`;
179 | 	this.style.left = `${Math.max(ww - w, 0) * .5}px`;
180 | 	updateProgressBarSize(e.detail);
181 | }
182 | 
183 | const shortcutKeys = ['f', 'i', 't'];
184 | 
185 | /** 
186 |  * @param {KeyboardEvent} e 
187 |  */
188 | function disableKeyboardShortcutOnParentWindow(e) {
189 | 	if (shortcutKeys.includes(e.key)) {
190 | 		e.stopImmediatePropagation();
191 | 	}
192 | }
193 | 
194 | /**
195 |  * @param {KeyboardEvent} e 
196 |  */
197 | function enableKeyboardShortcutOnChildWindow(e) {
198 | 	if (!shortcutKeys.includes(e.key)) {
199 | 		top?.dispatchEvent(new KeyboardEvent('keydown', e));
200 | 	}
201 | }


--------------------------------------------------------------------------------
/src/styles/layer.css:
--------------------------------------------------------------------------------
  1 | @keyframes flush {
  2 | 	from { transform: translateX(0px) }
  3 | 	to { transform: translateX(var(--yt-lcf-translate-x)) }
  4 | }
  5 | :host {
  6 | 	contain: strict;
  7 | }
  8 | :host > div {
  9 | 	animation: flush var(--yt-lcf-animation-duration) linear var(--yt-lcf-animation-play-state);
 10 | 	contain: content;
 11 | 	left: 100%;
 12 | 	line-height: var(--yt-lcf-line-height);
 13 | 	max-width: var(--yt-lcf-max-width);
 14 | 	overflow: hidden;
 15 | 	padding-inline: var(--yt-lcf-stroke-offset);
 16 | 	pointer-events: auto;
 17 | 	position: absolute;
 18 | 	text-overflow: ellipsis;
 19 | 	text-shadow:
 20 | 	var(--yt-lcf-stroke-color) calc(var(--yt-lcf-stroke-offset) * -1) calc(var(--yt-lcf-stroke-offset) * -1) var(--yt-lcf-stroke-blur),
 21 | 	var(--yt-lcf-stroke-color) calc(var(--yt-lcf-stroke-offset) * -1) 0 var(--yt-lcf-stroke-blur),
 22 | 	var(--yt-lcf-stroke-color) calc(var(--yt-lcf-stroke-offset) * -1) var(--yt-lcf-stroke-offset) var(--yt-lcf-stroke-blur),
 23 | 	var(--yt-lcf-stroke-color) 0 calc(var(--yt-lcf-stroke-offset) * -1) var(--yt-lcf-stroke-blur),
 24 | 	var(--yt-lcf-stroke-color) 0 var(--yt-lcf-stroke-offset) var(--yt-lcf-stroke-blur),
 25 | 	var(--yt-lcf-stroke-color) var(--yt-lcf-stroke-offset) calc(var(--yt-lcf-stroke-offset) * -1) var(--yt-lcf-stroke-blur),
 26 | 	var(--yt-lcf-stroke-color) var(--yt-lcf-stroke-offset) 0 var(--yt-lcf-stroke-blur),
 27 | 	var(--yt-lcf-stroke-color) var(--yt-lcf-stroke-offset) var(--yt-lcf-stroke-offset) var(--yt-lcf-stroke-blur);
 28 | }
 29 | :host(.direction-reversed-x) > div {
 30 | 	animation-direction: reverse;
 31 | }
 32 | [hidden], link, style {
 33 | 	display: none !important;
 34 | }
 35 | :host > div:not(.text) {
 36 | 	border-radius: .5em;
 37 | 	display: flex;
 38 | 	flex-flow: column nowrap;
 39 | 	overflow: hidden;
 40 | }
 41 | img, svg {
 42 | 	height: 1em;
 43 | 	object-fit: cover;
 44 | 	vertical-align: -.15em;
 45 | 	width: 1em;
 46 | }
 47 | a {
 48 | 	color: inherit;
 49 | 	pointer-events: auto;
 50 | }
 51 | .header, .body, a > * {
 52 | 	pointer-events: none;
 53 | }
 54 | .body {
 55 | 	overflow: hidden;
 56 | 	text-overflow: ellipsis;
 57 | }
 58 | .photo {
 59 | 	border-radius: 50%;
 60 | 	margin-right: 4px;
 61 | }
 62 | .name, .months, .amount {
 63 | 	font-size: .75em;
 64 | }
 65 | .name {
 66 | 	padding-right: 1em;
 67 | }
 68 | 
 69 | .normal { color: var(--yt-lcf-normal-color) }
 70 | :host(.has-normal-name) .normal {
 71 | 	background-color: var(--yt-live-chat-normal-message-background-color); 
 72 | 	border-radius: .5em;
 73 | 	padding: 0 .25em;
 74 | }
 75 | .normal .photo { display: var(--yt-lcf-normal-display-photo) }
 76 | .normal .name { display: var(--yt-lcf-normal-display-name) }
 77 | .normal .body { display: var(--yt-lcf-normal-display-message) }
 78 | 
 79 | .member { color: var(--yt-lcf-member-color) }
 80 | :host(.has-member-name) .member {
 81 | 	background-color: var(--yt-live-chat-member-message-background-color);
 82 | 	border-radius: .5em;
 83 | 	padding: 0 .25em;
 84 | }
 85 | .member .photo { display: var(--yt-lcf-member-display-photo) }
 86 | .member .name { display: var(--yt-lcf-member-display-name) }
 87 | .member .body { display: var(--yt-lcf-member-display-message) }
 88 | 
 89 | .verified { color: var(--yt-lcf-verified-color) }
 90 | :host(.has-verified-name) .verified {
 91 | 	background-color: var(--yt-live-chat-verified-message-background-color);
 92 | 	border-radius: .5em;
 93 | 	padding: 0 .25em;
 94 | }
 95 | .verified .photo { display: var(--yt-lcf-verified-display-photo) }
 96 | .verified .name { display: var(--yt-lcf-verified-display-name) }
 97 | .verified .body { display: var(--yt-lcf-verified-display-message) }
 98 | 
 99 | .moderator { color: var(--yt-lcf-moderator-color) }
100 | :host(.has-moderator-name) .moderator {
101 | 	background-color: var(--yt-live-chat-moderator-message-background-color);
102 | 	border-radius: .5em;
103 | 	padding: 0 .25em;
104 | }
105 | .moderator .photo { display: var(--yt-lcf-moderator-display-photo) }
106 | .moderator .name { display: var(--yt-lcf-moderator-display-name) }
107 | .moderator .body { display: var(--yt-lcf-moderator-display-message) }
108 | 
109 | .owner { color: var(--yt-lcf-owner-color) }
110 | :host(.has-owner-name) .owner {
111 | 	background-color: var(--yt-live-chat-owner-message-background-color);
112 | 	border-radius: .5em;
113 | 	padding: 0 .25em;
114 | }
115 | .owner .photo { display: var(--yt-lcf-owner-display-photo) }
116 | .owner .name { display: var(--yt-lcf-owner-display-name) }
117 | .owner .body { display: var(--yt-lcf-owner-display-message) }
118 | 
119 | div.header {
120 | 	display: flex;
121 | 	align-items: center;
122 | 	background-color: var(--yt-live-chat-paid-message-secondary-color);
123 | 	height: 1.25em;
124 | 	padding: 2px .5em 0;
125 | }
126 | div.header .name {
127 | 	padding-right: .75em;
128 | 	white-space: nowrap;
129 | }
130 | div.body, figure.body {
131 | 	background-color: var(--yt-live-chat-paid-message-primary-color);
132 | 	font-size: .9375em;
133 | 	margin: 0;
134 | 	padding: 0 .5em 2px;
135 | }
136 | div.body:empty {
137 | 	padding-bottom: 1px;
138 | }
139 | .sticker {
140 | 	height: var(--yt-lcf-sticker-size);
141 | 	width: var(--yt-lcf-sticker-size);
142 | }
143 | .wrap {
144 | 	hyphens: var(--yt-lcf-message-hyphens);
145 | 	word-break: var(--yt-lcf-message-word-break);
146 | 	white-space: var(--yt-lcf-message-white-space);
147 | 	width: max-content;
148 | }
149 | .paused {
150 | 	animation-play-state: paused !important;
151 | 	contain: paint;
152 | }
153 | :host([style*="--yt-lcf-membership-display-photo: none; --yt-lcf-membership-display-name: none; --yt-lcf-membership-display-message: none"]) .membership .header,
154 | :host([style*="--yt-lcf-milestone-display-photo: none; --yt-lcf-milestone-display-name: none; --yt-lcf-milestone-display-months: none"]) .milestone .header,
155 | :host([style*="--yt-lcf-paid-message-display-photo: none; --yt-lcf-paid-message-display-name: none; --yt-lcf-paid-message-display-amount: none"]) .superchat .header,
156 | :host([style*="--yt-lcf-paid-sticker-display-photo: none; --yt-lcf-paid-sticker-display-name: none; --yt-lcf-paid-sticker-display-amount: none"]) .supersticker .header { display: none }
157 | :host([style*="--yt-lcf-membership-display-photo: none; --yt-lcf-membership-display-name: none; --yt-lcf-membership-display-message: none"]) .membership .body,
158 | :host([style*="--yt-lcf-milestone-display-photo: none; --yt-lcf-milestone-display-name: none; --yt-lcf-milestone-display-months: none"]) .milestone .body,
159 | :host([style*="--yt-lcf-paid-message-display-photo: none; --yt-lcf-paid-message-display-name: none; --yt-lcf-paid-message-display-amount: none"]) .superchat .body,
160 | :host([style*="--yt-lcf-paid-sticker-display-photo: none; --yt-lcf-paid-sticker-display-name: none; --yt-lcf-paid-sticker-display-amount: none"]) .supersticker .body { padding-top: 2px }
161 | 
162 | .membership { color: var(--yt-lcf-membership-color) }
163 | .membership .photo { display: var(--yt-lcf-membership-display-photo) }
164 | .membership .name { display: var(--yt-lcf-membership-display-name) }
165 | .membership .gifts { display: var(--yt-lcf-membership-display-months) }
166 | .membership .months { display: var(--yt-lcf-membership-display-message) }
167 | 
168 | .milestone { color: var(--yt-lcf-milestone-color) }
169 | .milestone .photo { display: var(--yt-lcf-milestone-display-photo) }
170 | .milestone .name { display: var(--yt-lcf-milestone-display-name) }
171 | .milestone .months { display: var(--yt-lcf-milestone-display-months) }
172 | .milestone .body { display: var(--yt-lcf-milestone-display-message) }
173 | 
174 | .superchat { color: var(--yt-lcf-paid-message-color) }
175 | .superchat .photo { display: var(--yt-lcf-paid-message-display-photo) }
176 | .superchat .name { display: var(--yt-lcf-paid-message-display-name) }
177 | .superchat .amount { display: var(--yt-lcf-paid-message-display-amount) }
178 | .superchat .body { display: var(--yt-lcf-paid-message-display-message) }
179 | 
180 | .supersticker { color: var(--yt-lcf-paid-sticker-color) }
181 | .supersticker .photo { display: var(--yt-lcf-paid-sticker-display-photo) }
182 | .supersticker .name { display: var(--yt-lcf-paid-sticker-display-name) }
183 | .supersticker .amount { display: var(--yt-lcf-paid-sticker-display-amount) }
184 | .supersticker .body { display: var(--yt-lcf-paid-sticker-display-sticker) }
185 | 
186 | .engagement-poll {
187 | 	background-color: rgba(64, 64, 64, var(--yt-lcf-background-opacity));
188 | 	color: var(--yt-live-chat-dialog-text-color, #fff);
189 | }
190 | 
191 | :host([data-emoji="none"]) .emoji {
192 | 	display: none;
193 | }
194 | :host([data-emoji="label"]) .emoji::before {
195 | 	content: attr(data-label);
196 | }
197 | :host([data-emoji="shortcut"]) .emoji::before {
198 | 	content: attr(data-shortcut);
199 | }
200 | :host(:not([data-emoji="all"])) .emoji > img {
201 | 	display: none;
202 | }
203 | 
204 | :host(.prefix_lang) [data-srclang]::before {
205 | 	content: '[' attr(data-srclang) '] ';
206 | }
207 | :host(.suffix_original) small.original {
208 | 	display: block;
209 | 	line-height: 1;
210 | 	&:empty {
211 | 		height: 1em;
212 | 	}
213 | }


--------------------------------------------------------------------------------
/src/content.js:
--------------------------------------------------------------------------------
  1 | /// <reference lib="esnext" />
  2 | /// <reference path="../types/browser.d.ts" />
  3 | /// <reference path="../types/extends.d.ts" />
  4 | /// <reference path="../types/ytlivechatrenderer.d.ts" />
  5 | 
  6 | 
  7 | self.browser ??= chrome;
  8 | 
  9 | const isNotPip = () => !self.documentPictureInPicture?.window;
 10 | 
 11 | /** @type {Map<number, Set<string>>} */
 12 | const actionMap = new Map();
 13 | 
 14 | const manifest = browser.runtime.getManifest();
 15 | document.body.dataset.browser = 'browser_specific_settings' in manifest ? 'firefox' : 'chrome';
 16 | 
 17 | // inject script
 18 | self.addEventListener('ytlcf-message', e => {
 19 | 	if (!e.detail) return;
 20 | 	const { ytInitialData, ytcfg } = e.detail;
 21 | 	if (ytInitialData) sessionStorage.setItem('ytlcf-initial-data', ytInitialData);
 22 | 	if (ytcfg) sessionStorage.setItem('ytlcf-cfg', ytcfg);
 23 | 	const target = document.querySelector('ytd-app') || document.getElementById('player-container-id');
 24 | 	const detail = {
 25 | 		pageType: ['/watch', '/live'].includes(location.pathname) ? 'watch' : 'browser',
 26 | 		response: JSON.parse(ytInitialData),
 27 | 	};
 28 | 	if (target) initialize({ target, detail });
 29 | }, { passive: true });
 30 | 
 31 | setTimeout(() => {
 32 | 	const script = document.createElement('script');
 33 | 	script.src = browser.runtime.getURL('./modules/injection.js');
 34 | 	document.body.append(script);
 35 | }, 1000);
 36 | 
 37 | self.addEventListener('ytlcf-ready', e => {
 38 | 	e.stopImmediatePropagation();
 39 | 	console.info(manifest.name + ' is ready!');
 40 | 	const settingsButton = document.querySelector('.ytp-settings-button');
 41 | 	settingsButton?.classList.add(e.type);
 42 | }, { passive: true });
 43 | 
 44 | document.addEventListener('yt-action', e => {
 45 | 	const name = e.detail?.actionName;
 46 | 	switch (name) {
 47 | 		case 'ytd-watch-player-data-changed': {
 48 | 			const ev = new CustomEvent(name);
 49 | 			if (!isNotPip()) self.documentPictureInPicture?.window?.dispatchEvent(ev);
 50 | 			checkAutoStart();
 51 | 		}
 52 | 	}
 53 | }, { passive: true });
 54 | 
 55 | /**
 56 |  * @typedef NavigateFinishEventDetail
 57 |  * @prop {string} pageType
 58 |  * @prop {object} response
 59 |  * @prop {any} response.response
 60 |  * @prop {any} response.playerResponse
 61 |  * @prop {any} [response.contents]
 62 |  */
 63 | 
 64 | /**
 65 |  * @param { CustomEvent<NavigateFinishEventDetail> | { target: EventTarget, detail: NavigateFinishEventDetail } } e 
 66 |  */
 67 | async function initialize(e) {
 68 | 	const scriptsPaths = ['./modules/livechat.js', './modules/chat_actions.js', './modules/pip.js'];
 69 | 	const [ livechatModule, chatActionsModule, pipModule ] = await Promise.all(scriptsPaths.map(path => import(browser.runtime.getURL(path))));
 70 | 	/** @type {import('./modules/livechat.js')} */
 71 | 	const { g, runApp, doChatActions } = livechatModule;
 72 | 	/** @type {import('./modules/chat_actions.js')} */
 73 | 	const { fetchChatActions } = chatActionsModule;
 74 | 	/** @type {import('./modules/pip.js')} */
 75 | 	const { initPipMenu } = pipModule;
 76 | 
 77 | 	let isLive = false;
 78 | 	let succeeded = true;
 79 | 	/** @type {AbortController} */
 80 | 	let controller;
 81 | 
 82 | 	// run app
 83 | 	const player = /** @type {HTMLElement} */ (e.target);
 84 | 	await runApp(player)
 85 | 	.then(initPipMenu)
 86 | 	.catch(reason => {
 87 | 		console.warn(reason);
 88 | 		succeeded = false;
 89 | 	});
 90 | 	if (succeeded) {
 91 | 		self.addEventListener('yt-navigate-finish', onYtNavigateFinish, { passive: true });
 92 | 		onYtNavigateFinish(e);
 93 | 	} else {
 94 | 		self.addEventListener('yt-navigate-finish', initialize, { passive: true, once: true });
 95 | 		return;
 96 | 	}
 97 | 
 98 | 	let lastOffset = 0;
 99 | 
100 | 	/**
101 | 	 * @this {HTMLVideoElement}
102 | 	 */
103 | 	function onSeeking() {
104 | 		const shiftSec = !isLive && g.storage.others.time_shift || 0;
105 | 		const currentOffset = (this.currentTime - shiftSec) * 1000 | 0;
106 | 		const ev = new CustomEvent('ytlcf-seek', { detail: { offset: currentOffset } });
107 | 		controller.signal.dispatchEvent(ev);
108 | 		lastOffset = currentOffset;
109 | 	}
110 | 
111 | 	/**
112 | 	 * @this {HTMLVideoElement}
113 | 	 */
114 | 	function onTimeUpdate() {
115 | 		const shiftSec = !isLive && g.storage.others.time_shift || 0;
116 | 		const player = g.layer?.element.parentElement;
117 | 		if (player) {
118 | 			const isAdShowing = ['ad-showing', 'ad-interrupting'].map(c => player.classList.contains(c)).includes(true);
119 | 			if (isAdShowing) return;
120 | 		}
121 | 		lastOffset ||= Math.max(-shiftSec * 1000, 1) | 0;
122 | 		const currentOffset = (this.currentTime - shiftSec) * 1000 | 0;
123 | 		const allKeys = actionMap.keys();
124 | 		const targetKeys = allKeys.filter(time => Math.max(lastOffset, currentOffset - 1000) < time && time <= currentOffset);
125 | 		for (const k of targetKeys) {
126 | 			const ev = new CustomEvent('ytlcf-actions', { detail: Array.from(actionMap.get(k) || [], s => JSON.parse(s)) });
127 | 			self.dispatchEvent(ev);
128 | 		}
129 | 		lastOffset = currentOffset;
130 | 	}
131 | 
132 | 	/**
133 | 	 * @param {CustomEvent} e 
134 | 	 */
135 | 	function onYtlcfActions(e) {
136 | 		doChatActions(e.detail);
137 | 	}
138 | 
139 | 	// when page load started
140 | 	self.addEventListener('yt-navigate-start', () => {
141 | 		self?.removeEventListener('ytlcf-actions', onYtlcfActions);
142 | 		controller?.abort();
143 | 		actionMap.clear();
144 | 		g.layer?.clear();
145 | 	}, { passive: true });
146 | 
147 | 	/**
148 | 	 * @param { CustomEvent<NavigateFinishEventDetail> | { target: EventTarget, detail: NavigateFinishEventDetail } } e 
149 | 	 */
150 | 	async function onYtNavigateFinish(e) {
151 | 		self.addEventListener('ytlcf-actions', () => {
152 | 			self.addEventListener('ytlcf-actions', onYtlcfActions, { passive: true });
153 | 		}, { passive: true, once: true });
154 | 		if (e.detail?.pageType !== 'watch') return;
155 | 		
156 | 		/** @type {HTMLVideoElement | null | undefined} */
157 | 		const video = (isNotPip() ? self : self.documentPictureInPicture?.window)?.document.querySelector('#movie_player video');
158 | 		const videoContainer = video?.parentElement;
159 | 		if (!videoContainer) return;
160 | 		const parent = videoContainer.parentElement;
161 | 		if (g.layer && parent?.contains(g.layer.element)) {
162 | 			videoContainer.after(g.layer.element);
163 | 		}
164 | 		const mainResponse = e.detail?.response;
165 | 		const response = (mainResponse && 'contents' in mainResponse) ? mainResponse : mainResponse?.response;
166 | 		if (!response) return;
167 | 		const videoDetails = mainResponse?.playerResponse?.videoDetails
168 | 			|| mainResponse.contents?.twoColumnWatchNextResults?.results?.results?.contents?.at(0)?.videoPrimaryInfoRenderer?.viewCount?.videoViewCountRenderer;
169 | 		isLive = videoDetails?.isLive || videoDetails?.isUpcoming || false;
170 | 
171 | 		const storage = await browser.storage.local.get('others');
172 | 		const modeName = isLive ? 'mode_livestream' : 'mode_replay';
173 | 		const mode = storage.others?.[modeName] ?? 1;
174 | 		if (mode === 1) {
175 | 			let timer = 0;
176 | 			timer = setInterval(() => {
177 | 				if (actionMap.size > 0) {
178 | 					clearInterval(timer);
179 | 					video.addEventListener('seeking', onSeeking, { passive: true });
180 | 					video.addEventListener('timeupdate', onTimeUpdate, { passive: true });
181 | 				}
182 | 			}, 250);
183 | 			video.removeEventListener('seeking', onSeeking);
184 | 			video.removeEventListener('timeupdate', onTimeUpdate);
185 | 
186 | 			// Fetching chat actions async
187 | 			controller = new AbortController();
188 | 			fetchChatActions(response, actionMap, controller.signal)
189 | 			.catch(reason => {
190 | 				const videoId = videoDetails?.videoId;
191 | 				const message = videoId ? reason?.replace('.', ': ' + videoId) : reason;
192 | 				console.warn(message);
193 | 			}).finally(() => {
194 | 				clearInterval(timer);
195 | 			});
196 | 			if (!isLive) setTimeout(() => onSeeking.call(video), 250);
197 | 		}
198 | 	}
199 | 
200 | 	document.body.addEventListener('keydown', e => {
201 | 		if (e.repeat) return;
202 | 		switch (e.key) {
203 | 			case g.storage.hotkeys.layer: {
204 | 				const checkbox = /** @type {HTMLElement?} */ (g.app?.querySelector('#yt-lcf-cb'));
205 | 				checkbox?.click();
206 | 				break;
207 | 			}
208 | 			case g.storage.hotkeys.panel: {
209 | 				const popupmenu = /** @type {HTMLElement?} */ (g.app?.querySelector('#yt-lcf-pm'));
210 | 				popupmenu?.click();
211 | 				break;
212 | 			}
213 | 		}
214 | 	}, { passive: true });
215 | }
216 | 
217 | async function checkAutoStart() {
218 | 	const storage = await browser.storage.local.get('others');
219 | 	const autostart = storage?.others?.autostart;
220 | 	if (autostart) {
221 | 		const buttonContainer = document.getElementById('show-hide-button');
222 | 		if (buttonContainer && !buttonContainer.hidden) {
223 | 			const button = buttonContainer.querySelector('button');
224 | 			const isClose = button?.closest('#close-button');
225 | 			if (!isClose) {
226 | 				button?.click();
227 | 				return true;
228 | 			}
229 | 		}
230 | 	}
231 | 	return false;
232 | }


--------------------------------------------------------------------------------
/src/_locales/ja/messages.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"manifestName": {
  3 | 		"message": "YouTube LiveChat Flusher／弾幕チャット"
  4 | 	},
  5 | 	"manifestDescription": {
  6 | 		"message": "YouTube Liveのチャットをニコニコ動画・ビリビリ動画のように弾幕風に流します"
  7 | 	},
  8 | 	"ytp_menuitem_label_switch": {
  9 | 		"message": "チャットを流す"
 10 | 	},
 11 | 	"ytp_menuitem_label_config": {
 12 | 		"message": "チャット設定"
 13 | 	},
 14 | 	"ytp_menuitem_label_pip": {
 15 | 		"message": "PiP w/ chat (beta)"
 16 | 	},
 17 | 	"close": {
 18 | 		"message": "閉じる"
 19 | 	},
 20 | 	"displayTab": {
 21 | 		"message": "基本"
 22 | 	},
 23 | 	"byTypeTab": {
 24 | 		"message": "種類別"
 25 | 	},
 26 | 	"mutedWordsTab": {
 27 | 		"message": "NGワード"
 28 | 	},
 29 | 	"userDefinedCssTab": {
 30 | 		"message": "ユーザーCSS"
 31 | 	},
 32 | 	"othersTab": {
 33 | 		"message": "その他"
 34 | 	},
 35 | 	"animationDuration": {
 36 | 		"message": "アニメーション秒数"
 37 | 	},
 38 | 	"fontSize": {
 39 | 		"message": "文字サイズ"
 40 | 	},
 41 | 	"lines": {
 42 | 		"message": "行"
 43 | 	},
 44 | 	"typeOfLines_0": {
 45 | 		"message": "固定"
 46 | 	},
 47 | 	"typeOfLines_1": {
 48 | 		"message": "最大"
 49 | 	},
 50 | 	"typeOfLines_2": {
 51 | 		"message": "最小"
 52 | 	},
 53 | 	"lineHeight": {
 54 | 		"message": "行の高さ"
 55 | 	},
 56 | 	"fontFamily_fontWeight": {
 57 | 		"message": "フォント名/太さ"
 58 | 	},
 59 | 	"fontFamily_select_from_local": {
 60 | 		"message": "ローカルフォントから選択する"
 61 | 	},
 62 | 	"strokeStyle": {
 63 | 		"message": "縁取りのスタイル"
 64 | 	},
 65 | 	"strokeColor": {
 66 | 		"message": "色"
 67 | 	},
 68 | 	"strokeOffset": {
 69 | 		"message": "ずれ"
 70 | 	},
 71 | 	"strokeBlur": {
 72 | 		"message": "ぼかし"
 73 | 	},
 74 | 	"layerOpacity": {
 75 | 		"message": "全体の透過度"
 76 | 	},
 77 | 	"backgroundOpacity": {
 78 | 		"message": "背景の透過度"
 79 | 	},
 80 | 	"opacity_0": {
 81 | 		"message": "透過"
 82 | 	},
 83 | 	"opacity_1": {
 84 | 		"message": "不透過"
 85 | 	},
 86 | 	"maxWidth_wordWrap": {
 87 | 		"message": "最大長さ/折り返し"
 88 | 	},
 89 | 	"wordWrap_0": {
 90 | 		"message": "折り返しなし"
 91 | 	},
 92 | 	"wordWrap_1": {
 93 | 		"message": "モード1"
 94 | 	},
 95 | 	"wordWrap_2": {
 96 | 		"message": "モード2"
 97 | 	},
 98 | 	"displayLimit": {
 99 | 		"message": "最大表示数"
100 | 	},
101 | 	"containerLimit": {
102 | 		"message": "チャット欄表示数"
103 | 	},
104 | 	"unlimited": {
105 | 		"message": "無制限"
106 | 	},
107 | 	"simultaneousMessage": {
108 | 		"message": "同時刻チャット"
109 | 	},
110 | 	"simultaneousMessage_0": {
111 | 		"message": "全て流す"
112 | 	},
113 | 	"simultaneousMessage_1": {
114 | 		"message": "読み込む毎に最初のチャットのみ流す"
115 | 	},
116 | 	"simultaneousMessage_2": {
117 | 		"message": "同じ内容を統合する"
118 | 	},
119 | 	"simultaneousMessage_3": {
120 | 		"message": "直前を含めて同じ内容を統合する"
121 | 	},
122 | 	"emojiExpression": {
123 | 		"message": "絵文字の表示"
124 | 	},
125 | 	"emojiExpression_0": {
126 | 		"message": "全て非表示"
127 | 	},
128 | 	"emojiExpression_1": {
129 | 		"message": "全て表示"
130 | 	},
131 | 	"emojiExpression_2": {
132 | 		"message": "ラベルに置換する"
133 | 	},
134 | 	"emojiExpression_3": {
135 | 		"message": "ショートカットに置換する"
136 | 	},
137 | 	"overlapping": {
138 | 		"message": "オーバーラップ"
139 | 	},
140 | 	"overlapping_transparent": {
141 | 		"message": "透過させる"
142 | 	},
143 | 	"overlapping_translate": {
144 | 		"message": "ずらす"
145 | 	},
146 | 	"overlapping_hidden": {
147 | 		"message": "非表示"
148 | 	},
149 | 	"direction": {
150 | 		"message": "方向"
151 | 	},
152 | 	"direction_bottom_to_top": {
153 | 		"message": "下から上へ"
154 | 	},
155 | 	"direction_left_to_right": {
156 | 		"message": "左から右へ"
157 | 	},
158 | 	"layerCSS": {
159 | 		"message": "レイヤCSS"
160 | 	},
161 | 	"resizeLayer": {
162 | 		"message": "レイヤサイズ変更"
163 | 	},
164 | 	"normal": {
165 | 		"message": "通常"
166 | 	},
167 | 	"member": {
168 | 		"message": "メンバー"
169 | 	},
170 | 	"moderator": {
171 | 		"message": "モデレーター"
172 | 	},
173 | 	"owner": {
174 | 		"message": "チャンネル管理者"
175 | 	},
176 | 	"verified": {
177 | 		"message": "確認済み"
178 | 	},
179 | 	"you": {
180 | 		"message": "あなた"
181 | 	},
182 | 	"superchat": {
183 | 		"message": "スーパーチャット"
184 | 	},
185 | 	"sticker": {
186 | 		"message": "スーパーステッカー"
187 | 	},
188 | 	"membership": {
189 | 		"message": "メンバーシップ"
190 | 	},
191 | 	"milestone": {
192 | 		"message": "マイルストーン"
193 | 	},
194 | 	"displaySettings": {
195 | 		"message": "表示設定"
196 | 	},
197 | 	"tooltip_authorPhoto": {
198 | 		"message": "投稿者のサムネイル"
199 | 	},
200 | 	"tooltip_authorName": {
201 | 		"message": "投稿者名"
202 | 	},
203 | 	"display_authorName": {
204 | 		"message": "名前"
205 | 	},
206 | 	"tooltip_purchaseAmount": {
207 | 		"message": "金額"
208 | 	},
209 | 	"display_purchaseAmount": {
210 | 		"message": "金額"
211 | 	},
212 | 	"tooltip_milestoneMonths": {
213 | 		"message": "マイルストーンの月数"
214 | 	},
215 | 	"display_milestoneMonths": {
216 | 		"message": "月数"
217 | 	},
218 | 	"tooltip_chatMessage": {
219 | 		"message": "チャットメッセージ"
220 | 	},
221 | 	"display_chatMessage": {
222 | 		"message": "本文"
223 | 	},
224 | 	"tooltip_membershipMessage": {
225 | 		"message": "新規メンバーのメッセージ"
226 | 	},
227 | 	"display_membershipMessage": {
228 | 		"message": "本文"
229 | 	},
230 | 	"tooltip_sticker": {
231 | 		"message": "ステッカー"
232 | 	},
233 | 	"display_sticker": {
234 | 		"message": "ステッカー"
235 | 	},
236 | 	"tooltip_stickerSize": {
237 | 		"message": "ステッカーのサイズ"
238 | 	},
239 | 	"display_stickerSize": {
240 | 		"message": "サイズ"
241 | 	},
242 | 	"tooltip_customColor": {
243 | 		"message": "カスタム色"
244 | 	},
245 | 	"display_customColor": {
246 | 		"message": "カスタム色"
247 | 	},
248 | 	"placeholder_customCSS": {
249 | 		"message": "カスタムCSS"
250 | 	},
251 | 	"mutedWordsMode": {
252 | 		"message": "モード"
253 | 	},
254 | 	"mutedWordsMode_0": {
255 | 		"message": "オフ"
256 | 	},
257 | 	"mutedWordsMode_1": {
258 | 		"message": "メッセージ全体を非表示にする"
259 | 	},
260 | 	"mutedWordsMode_2": {
261 | 		"message": "キーワードを非表示にする/置換する"
262 | 	},
263 | 	"mutedWordsMode_3": {
264 | 		"message": "文字を伏字にする"
265 | 	},
266 | 	"mutedWordsReplacement": {
267 | 		"message": "置換文字"
268 | 	},
269 | 	"placeholder_mutedWordsReplacement": {
270 | 		"message": "未指定で非表示になります"
271 | 	},
272 | 	"tooltip_mutedWordsReplacement": {
273 | 		"message": "最初の1文字のみが伏字に使用されます"
274 | 	},
275 | 	"mutedWordsGrammer": {
276 | 		"message": "文法"
277 | 	},
278 | 	"regexp": {
279 | 		"message": "正規表現を使用する"
280 | 	},
281 | 	"placeholder_mutedWordsList": {
282 | 		"message": "改行で複数のキーワードを設定できます"
283 | 	},
284 | 	"user_defined_css_shortcut": {
285 | 		"message": "ショートカット"
286 | 	},
287 | 	"font_helper_select": {
288 | 		"message": "フォントを選択してください..."
289 | 	},
290 | 	"up": {
291 | 		"message": "上へ"
292 | 	},
293 | 	"down": {
294 | 		"message": "下へ"
295 | 	},
296 | 	"delete": {
297 | 		"message": "削除"
298 | 	},
299 | 	"add": {
300 | 		"message": "追加"
301 | 	},
302 | 	"confirm": {
303 | 		"message": "決定"
304 | 	},
305 | 	"cancel": {
306 | 		"message": "キャンセル"
307 | 	},
308 | 	"addUserStyle": {
309 | 		"message": "ユーザー別スタイルを追加"
310 | 	},
311 | 	"label": {
312 | 		"message": "ラベル"
313 | 	},
314 | 	"Channel_ID": {
315 | 		"message": "チャンネルID\n(各行ごと)"
316 | 	},
317 | 	"displayStyle": {
318 | 		"message": "表示スタイル"
319 | 	},
320 | 	"fontFactor": {
321 | 		"message": "フォント倍率"
322 | 	},
323 | 	"placeholder_channelId": {
324 | 		"message": "UCから始まる24文字のチャンネルID"
325 | 	},
326 | 	"validation_channelId": {
327 | 		"message": "各行ともUCから始まる24文字を入力してください。\n（$1行目が不正です。）"
328 | 	},
329 | 	"placeholder_userStyleTextArea": {
330 | 		"message": "/* ここにCSSのプレビューが表示されます */"
331 | 	},
332 | 	"translation": {
333 | 		"message": "メッセージ翻訳"
334 | 	},
335 | 	"targetLanguage": {
336 | 		"message": "翻訳先"
337 | 	},
338 | 	"prefixOriginalLanguage": {
339 | 		"message": "元の言語を文頭につける"
340 | 	},
341 | 	"exception": {
342 | 		"message": "除外"
343 | 	},
344 | 	"addableByBrowserLanguageSettings": {
345 | 		"message": "項目はブラウザの言語設定から追加可"
346 | 	},
347 | 	"traslationTiming": {
348 | 		"message": "タイミング"
349 | 	},
350 | 	"translation_eagerMode": {
351 | 		"message": "翻訳してから流す"
352 | 	},
353 | 	"translation_lazyMode": {
354 | 		"message": "流しながら翻訳する"
355 | 	},
356 | 	"suffixOriginalMessage": {
357 | 		"message": "翻訳前のメッセージを併記する"
358 | 	},
359 | 	"translationBlacklist": {
360 | 		"message": "翻訳NGリスト"
361 | 	},
362 | 	"translationUrl": {
363 | 		"message": "翻訳URL (GET)"
364 | 	},
365 | 	"timeshift": {
366 | 		"message": "タイムシフト"
367 | 	},
368 | 	"timeshift_note": {
369 | 		"message": "※ アーカイブでのみ有効"
370 | 	},
371 | 	"otherConfig": {
372 | 		"message": "その他の設定"
373 | 	},
374 | 	"aboutAddon": {
375 | 		"message": "拡張機能について"
376 | 	},
377 | 	"version": {
378 | 		"message": "バージョン"
379 | 	},
380 | 	"configFile": {
381 | 		"message": "設定ファイル"
382 | 	},
383 | 	"export": {
384 | 		"message": "エクスポート"
385 | 	},
386 | 	"import": {
387 | 		"message": "インポート"
388 | 	},
389 | 	"init": {
390 | 		"message": "リセット"
391 | 	},
392 | 	"commonSettings": {
393 | 		"message": "共通設定"
394 | 	},
395 | 	"loadingMode": {
396 | 		"message": "チャットの読み込みモード"
397 | 	},
398 | 	"livestream": {
399 | 		"message": "ライブ"
400 | 	},
401 | 	"replay": {
402 | 		"message": "アーカイブ"
403 | 	},
404 | 	"mode_option_chatframe_dependent": {
405 | 		"message": "チャット欄に依存"
406 | 	},
407 | 	"mode_option_chatframe_independent": {
408 | 		"message": "チャット欄に非依存"
409 | 	},
410 | 	"description_chatframe_dependent_1": {
411 | 		"message": "チャット欄を開いた状態でのみ動作します。"
412 | 	},
413 | 	"description_chatframe_dependent_2": {
414 | 		"message": "ライブ配信では投票結果も表示されます。"
415 | 	},
416 | 	"description_chatframe_independent_1": {
417 | 		"message": "チャット欄を閉じた状態でも動作します。"
418 | 	},
419 | 	"description_chatframe_independent_2": {
420 | 		"message": "アーカイブではタイムシフト機能が利用可能（コメントを流すタイミングを調整可能）です。"
421 | 	},
422 | 	"description_chatframe_independent_3": {
423 | 		"message": "特に長時間の動画では動作が不安定な場合があります。"
424 | 	},
425 | 	"autostart": {
426 | 		"message": "チャット欄の自動オープン（アーカイブ再生時）"
427 | 	},
428 | 	"message_pause": {
429 | 		"message": "右クリックでメッセージを一時停止"
430 | 	},
431 | 	"disabled": {
432 | 		"message": "しない"
433 | 	},
434 | 	"enabled": {
435 | 		"message": "する"
436 | 	},
437 | 	"hotkey": {
438 | 		"message": "キーボードショートカット"
439 | 	},
440 | 	"hotkey_layer": {
441 | 		"message": "チャットレイヤ"
442 | 	},
443 | 	"hotkey_panel": {
444 | 		"message": "設定パネル"
445 | 	},
446 | 	"save": {
447 | 		"message": "保存"
448 | 	},
449 | 	"warn_notSaved": {
450 | 		"message": "保存するとYouTubeを開いているすべてのタブが再読み込みされます"
451 | 	},
452 | 	"pip_marker": {
453 | 		"message": "この動画はピクチャーインピクチャーで再生されています"
454 | 	},
455 | 	"menu_resumeAnimation": {
456 | 		"message": "アニメーションを再開"
457 | 	},
458 | 	"menu_moveMessage": {
459 | 		"message": "メッセージを移動"
460 | 	},
461 | 	"menu_copyAuthorId": {
462 | 		"message": "ユーザーIDをコピー"
463 | 	},
464 | 	"menu_hideAuthor": {
465 | 		"message": "このユーザーを非表示"
466 | 	}
467 | }


--------------------------------------------------------------------------------
/src/modules/chat_actions.js:
--------------------------------------------------------------------------------
  1 | /// <reference path="../../types/extends.d.ts" />
  2 | /// <reference path="../../types/ytlivechatrenderer.d.ts" />
  3 | 
  4 | /**
  5 |  * Fetches the chat actions from the page response.
  6 |  * @param {any} response response of the video watching page
  7 |  * @param {Map<number, Set<string>>} outMap (mutating) container of chat actions stringified as JSON
  8 |  * @param {AbortSignal} signal signal for aborting fetching
  9 |  * @return {Promise<boolean>} if video has chat
 10 |  */
 11 | export async function fetchChatActions(response, outMap, signal) {
 12 | 	const liveChatRenderer = response?.contents?.twoColumnWatchNextResults?.conversationBar?.liveChatRenderer
 13 | 		?? response?.contents?.singleColumnWatchNextResults?.results?.results;
 14 | 	/** @type {boolean} */
 15 | 	const isReplay = liveChatRenderer?.isReplay ?? (response?.playerOverlays?.playerOverlayRenderer?.liveIndicatorText ? false : true);
 16 | 	/** @type {string?} */
 17 | 	const continuation = liveChatRenderer?.continuations?.at(0)?.reloadContinuationData?.continuation;
 18 | 	if (continuation) {
 19 | 		outMap.clear();
 20 | 		const generator = isReplay
 21 | 			? getReplayChatActionsAsyncIterable(signal, continuation)
 22 | 			: getLiveChatActionsAsyncIterable(signal, continuation);
 23 | 		for await (const actions of generator) {
 24 | 			for (const container of actions) {
 25 | 				const action = container?.replayChatItemAction;
 26 | 				const key = Number.parseInt(action.videoOffsetTimeMsec);
 27 | 				if (outMap.has(key)) {
 28 | 					for (const a of action.actions) {
 29 | 						outMap.get(key)?.add(JSON.stringify(a));
 30 | 					}
 31 | 				} else {
 32 | 					outMap.set(key, new Set(action.actions.map(a => JSON.stringify(a))));
 33 | 				}
 34 | 			}
 35 | 		}
 36 | 		return true;
 37 | 	} else {
 38 | 		throw 'This video has no chat.';
 39 | 	}
 40 | }
 41 | 
 42 | /**
 43 |  * Generates the replay chat actions from the response of InnerTube API.
 44 |  * @param {AbortSignal} signal signal for aborting fetching
 45 |  * @param {string} initialContinuation initial continuation token
 46 |  * @returns {AsyncGenerator<LiveChat.ReplayChatItemAction[]>} chat actions generator
 47 |  */
 48 | async function* getReplayChatActionsAsyncIterable(signal, initialContinuation) {
 49 | 	const url = new URL('/youtubei/v1/live_chat/get_live_chat_replay', location.origin);
 50 | 	url.searchParams.set('prettyPrint', 'false');
 51 | 
 52 | 	/** @type {Map<string, string>} */
 53 | 	const continuations = new Map();
 54 | 	/** @type { { continuation: string } } */
 55 | 	let body = { continuation: initialContinuation };
 56 | 	/** @type { { actions: LiveChat.ReplayChatItemAction[] } } */
 57 | 	let contents = { actions: [] };
 58 | 	
 59 | 	/** @type { { offset: number } | undefined } */
 60 | 	let seekInfo;
 61 | 	let controller = new AbortController();
 62 | 	signal.addEventListener('ytlcf-seek', e => {
 63 | 		// @ts-ignore
 64 | 		seekInfo = /** @type { { offset: number } } */ (e.detail);
 65 | 		controller.abort();
 66 | 	}, { passive: true });
 67 | 
 68 | 	let prev = body.continuation;
 69 | 	let prevOffset = 0;
 70 | 	while (!signal.aborted && prev) {
 71 | 		let i = 0;
 72 | 		while (continuations.has(prev) && ++i < continuations.size) {
 73 | 			if (isRecursiveMap(continuations)) return [];
 74 | 			prev = continuations.get(prev) || '';
 75 | 			body = { continuation: prev };
 76 | 		}
 77 | 		contents = await getContentsAsync(url, body);
 78 | 		let sleepMs = 250;
 79 | 		if (contents.actions) yield contents.actions;
 80 | 		if (seekInfo) {
 81 | 			body = getContinuation(contents, true, seekInfo.offset);
 82 | 			prevOffset = seekInfo.offset;
 83 | 			seekInfo = undefined;
 84 | 			controller.abort();
 85 | 		} else {
 86 | 			body = getContinuation(contents, true);
 87 | 			if (prev !== initialContinuation) continuations.set(prev, body.continuation);
 88 | 			const offset = Number.parseInt(contents.actions?.at(-1)?.replayChatItemAction.videoOffsetTimeMsec || '-1');
 89 | 			if (offset >= prevOffset) {
 90 | 				const playbackRate = JSON.parse(sessionStorage.getItem('yt-player-playback-rate') || `{"data":"1"}`).data || '1';
 91 | 				const offsetDiff = (offset - prevOffset) / Number.parseFloat(playbackRate) - 250 | 0;
 92 | 				sleepMs = Math.max(250, offsetDiff);
 93 | 				prevOffset = offset;
 94 | 			} else {
 95 | 				sleepMs = Infinity;
 96 | 				continuations.clear();
 97 | 			}
 98 | 		}
 99 | 		prev = body.continuation;
100 | 		controller = new AbortController();
101 | 		await sleep(sleepMs, { signal: controller.signal });
102 | 	}
103 | }
104 | 
105 | /**
106 |  * Generates the live chat actions from the response of InnerTube API.
107 |  * @param {AbortSignal} signal signal for aborting fetching
108 |  * @param {string} initialContinuation initial continuation token
109 |  * @returns {AsyncGenerator<never>} empty generator
110 |  */
111 | async function* getLiveChatActionsAsyncIterable(signal, initialContinuation) {
112 | 	const url = new URL('/youtubei/v1/live_chat/get_live_chat', location.origin);
113 | 	url.searchParams.set('prettyPrint', 'false');
114 | 
115 | 	/** @type { { continuation: string } } */
116 | 	let body = { continuation: initialContinuation };
117 | 	/** @type { { actions: LiveChat.LiveChatItemAction[] } } */
118 | 	let contents = { actions: [] };
119 | 	let lastTimestamp = 0;
120 | 	/** @type { (a: any) => number } */
121 | 	const getTimestamp = a => {
122 | 		/** @type {LiveChat.RendererContent} */
123 | 		const renderer = Object.values(a.addChatItemAction.item).at(0);
124 | 		return Number.parseInt(renderer?.timestampUsec);
125 | 	}
126 | 	while (!signal.aborted && body.continuation) {
127 | 		contents = await getContentsAsync(url, body);
128 | 		if (contents.actions) {
129 | 			// Fire actions directly.
130 | 			const filtered = contents.actions.filter(a => !('addChatItemAction' in a) || getTimestamp(a) > lastTimestamp);
131 | 			const ev = new CustomEvent('ytlcf-actions', { detail: filtered });
132 | 			self.dispatchEvent(ev);
133 | 			const lastIndex = filtered.findLastIndex(a => 'addChatItemAction' in a);
134 | 			if (lastIndex > 0) lastTimestamp = getTimestamp(filtered[lastIndex]);
135 | 		}
136 | 		body = getContinuation(contents, false);
137 | 		await sleep(250);
138 | 	}
139 | }
140 | 
141 | const defaultClient = {
142 | 	clientName: 'WEB',
143 | 	clientVersion: '2.20251022.01.00',
144 | 	mainAppWebInfo: { graftUrl: location.href },
145 | };
146 | 
147 | /**
148 |  * Fetches the value of Authorization header.
149 |  * @param {Record<string, string>} data stored data
150 |  * @returns {Promise<string>} authorization value
151 |  */
152 | async function getAuthoricationAsync(data) {
153 | 	const datasyncId = data['DATASYNC_ID'].split('||')[0];
154 | 	const timestamp = Math.floor(Date.now() / 1e3);
155 | 	const cookies = new Map(document.cookie.split(/;\s*/).map(kv => {
156 | 		const pos = kv.indexOf('=');
157 | 		return pos >= 0 ? [ kv.substring(0, pos), kv.substring(pos + 1) ] : [ '', '' ];
158 | 	}));
159 | 	const sApisId = cookies.get('SAPISID');
160 | 	const bytes = new TextEncoder().encode([datasyncId, timestamp, sApisId, location.origin].join(' '));
161 | 	const digested = new Uint8Array(await crypto.subtle.digest('SHA-1', bytes));
162 | 	const hash = Array.from(digested, b => b.toString(16).padStart(2, '0')).join('');
163 | 	return ['SAPISIDHASH', 'SAPISID1PHASH', 'SAPISID3PHASH'].map(k => `${k} ${timestamp}_${hash}_u`).join(' ');
164 | }
165 | 
166 | /**
167 |  * Fetches the livechat contents object from the given URL and continuation token.
168 |  * @param {URL} url URL
169 |  * @param { { continuation: string } } body continuation token container
170 |  * @returns {Promise<any>} livechat contents object
171 |  */
172 | async function getContentsAsync(url, body) {
173 | 	const stored = sessionStorage.getItem('ytlcf-cfg');
174 | 	const data = stored ? JSON.parse(stored) : null;
175 | 	const client = data?.['INNERTUBE_CONTEXT']?.client || defaultClient;
176 | 	const headers = new Headers();
177 | 	headers.set('Content-Type', 'application/json');
178 | 	if (data) headers.set('Authorization', await getAuthoricationAsync(data));
179 | 	try {
180 | 		const res = await fetch(url, {
181 | 			method: 'post',
182 | 			headers,
183 | 			body: JSON.stringify({
184 | 				context: { client },
185 | 				...body,
186 | 			}),
187 | 		});
188 | 		const json = res.ok ? await res.json() : null;
189 | 		if (!json) throw 'Request failed.';
190 | 		return json.continuationContents?.liveChatContinuation;
191 | 	} catch (reason) {
192 | 		console.error(reason);
193 | 		const c = {
194 | 			liveChatReplayContinuationData: body,
195 | 			invalidationContinuationData: body,
196 | 		};
197 | 		return { continuations: [ c ] };
198 | 	}
199 | }
200 | 
201 | /**
202 |  * Gets the continuation token from the livechat contents object.
203 |  * @param {any} contents livechat contents object
204 |  * @param {boolean} isReplay if is replay
205 |  * @param {number} [offset] player offset (milliseconds)
206 |  * @returns { { continuation: string, currentPlayerState?: { playerOffsetMs: string } } } continuation token
207 |  */
208 | function getContinuation(contents, isReplay, offset) {
209 | 	const c = contents?.continuations?.at(offset ? -1 : 0);
210 | 	if ('playerSeekContinuationData' in c) {
211 | 		return {
212 | 			continuation: c?.playerSeekContinuationData?.continuation,
213 | 			currentPlayerState: { playerOffsetMs: (offset || 0).toString() },
214 | 		};
215 | 	} else {
216 | 		const continuation = isReplay
217 | 			? c?.liveChatReplayContinuationData?.continuation
218 | 			: c?.invalidationContinuationData?.continuation || c?.timedContinuationData?.continuation;
219 | 		return { continuation };
220 | 	}
221 | }
222 | 
223 | /**
224 |  * Waits for the given number of milliseconds.
225 |  * @param {number} ms milliseconds
226 |  * @param {object} [options] options
227 |  * @param {AbortSignal} [options.signal] signal for aborting sleep
228 |  * @returns {Promise<void>} void promise
229 |  */
230 | function sleep(ms, options = {}) {
231 | 	/** @type {Promise<void>} */
232 | 	return new Promise(resolve => {
233 | 		const timer = Number.isFinite(ms) ? setTimeout(() => resolve(), ms) : 0;
234 | 		if (options.signal) {
235 | 			options.signal.onabort = () => {
236 | 				clearTimeout(timer);
237 | 				resolve();
238 | 			};
239 | 		}
240 | 	});
241 | }
242 | 
243 | /**
244 |  * Determines whether the map is recursive.
245 |  * @param {Map<any, any>} map map object
246 |  * @returns {boolean} if the map is recursive
247 |  */
248 | function isRecursiveMap(map) {
249 | 	const keys = Array.from(map.keys());
250 | 	const values = Array.from(map.values());
251 | 	values.unshift(values.pop());
252 | 	for (let i = 0; i < keys.length; i++) {
253 | 		if (keys[i] !== values[i]) return false;
254 | 	}
255 | 	return true;
256 | };


--------------------------------------------------------------------------------
/src/modules/utils.js:
--------------------------------------------------------------------------------
  1 | /// <reference path="../../types/browser.d.ts" />
  2 | /// <reference path="../../types/ytlivechatrenderer.d.ts" />
  3 | 
  4 | self.browser ??= chrome;
  5 | 
  6 | /**
  7 |  * Gets string from a message object.
  8 |  * @param { LiveChat.Runs | LiveChat.SimpleText | undefined } message message object: Runs or SimpleText
  9 |  * @returns {string} message string
 10 |  */
 11 | export function getText(message) {
 12 | 	if (!message) return '';
 13 | 	if ('simpleText' in message) return message.simpleText;
 14 | 	const rslt = [];
 15 | 	for (const r of message.runs) {
 16 | 		if ('text' in r) {
 17 | 			rslt.push(r.text);
 18 | 		} else {
 19 | 			rslt.push(r.emoji.shortcuts?.[0] || r.emoji.emojiId || '');
 20 | 		}
 21 | 	}
 22 | 	return rslt.join('');
 23 | }
 24 | 
 25 | /**
 26 |  * Checks whether two flowing messages collide.
 27 |  * @param {Element} before preceding message
 28 |  * @param {Element} after following message
 29 |  * @param {boolean} [reversed=false] if direction is reversed
 30 |  * @returns whether the following message collides against the preceding message
 31 |  */
 32 | export function isCatchable(before, after, reversed = false) {
 33 | 	const [b, a] = [before, after].map(elm => elm.getBoundingClientRect());
 34 | 	if (b.top <= a.top && a.top < b.bottom) {
 35 | 		if (reversed ? b.left <= a.right : a.left <= b.right) {
 36 | 			return true;
 37 | 		} else {
 38 | 			const [bDur, aDur] = [before, after].map(elm => {
 39 | 				const dur = getComputedStyle(elm).animationDuration;
 40 | 				const [_, num, unit] = dur.match(/([\d\.]+)(\D+)/) || [];
 41 | 				if (num && unit) switch (unit) {
 42 | 					case 'ms': return Number.parseFloat(num);
 43 | 					case 's': return Number.parseFloat(num) * 1000;
 44 | 				}
 45 | 				return 4000;
 46 | 			});
 47 | 			if (bDur <= aDur && b.width >= a.width) {
 48 | 				return false;
 49 | 			} else {
 50 | 				const speedDiff = a.width / aDur - b.width / bDur;
 51 | 				const posDiff = reversed ? b.left - a.right : a.left - b.right;
 52 | 				return posDiff < speedDiff * Math.min(bDur, aDur);
 53 | 			}
 54 | 		}
 55 | 	} else {
 56 | 		return false;
 57 | 	}
 58 | }
 59 | 
 60 | /**
 61 |  * Checks whether an element's position exceeds the size of its parent.
 62 |  * @param {Element} parent parent element
 63 |  * @param {Element} child child element
 64 |  * @returns whether child element is overflowing the parent
 65 |  */
 66 | export function isOverflow(parent, child) {
 67 | 	const p = parent.getBoundingClientRect();
 68 | 	const c = child.getBoundingClientRect();
 69 | 	return c.bottom > p.top + p.height;
 70 | }
 71 | 
 72 | /**
 73 |  * Gets message filtered according to the rules.
 74 |  * @param {string} str original message
 75 |  * @param {object} [options] filtering options
 76 |  * @param {number} [options.mode] `0` for no filtering, `1` for all removal, `2` for word replacement, or `3` for character replacement
 77 |  * @param {RegExp[]} [options.rules] filtering rules
 78 |  * @param {string} [options.replacement] replacement string
 79 |  * @returns {IteratorResult<string, string>} filtering result
 80 |  */
 81 | export function filterMessage(str, options = {}) {
 82 | 	let done = false;
 83 | 	const mode = options.mode || 0;
 84 | 	const rules = options.rules || [];
 85 | 	const replacement = options.replacement || '';
 86 | 	switch (mode) {
 87 | 		// g.index.mutedWords.all
 88 | 		case 1: {
 89 | 			for (const rule of rules) {
 90 | 				if (rule.test(str)) {
 91 | 					rule.lastIndex = 0;
 92 | 					return { value: '', done: true };
 93 | 				}
 94 | 			}
 95 | 			break;
 96 | 		}
 97 | 		// g.index.mutedWords.word
 98 | 		case 2: {
 99 | 			for (const rule of rules) {
100 | 				if (rule.test(str)) {
101 | 					str = str.replace(rule, replacement);
102 | 					done = true;
103 | 				}
104 | 			}
105 | 			break;
106 | 		}
107 | 		// g.index.mutedWords.char
108 | 		case 3: {
109 | 			const char = [...replacement][0];
110 | 			for (const rule of rules) {
111 | 				if (rule.test(str)) {
112 | 					str = char ? str.replace(rule, m => {
113 | 						const len = [...m].length;
114 | 						return char.repeat(len);
115 | 					}) : str.replace(rule, '');
116 | 					done = true;
117 | 				}
118 | 			}
119 | 			break;
120 | 		}
121 | 	}
122 | 	return { value: str, done };
123 | }
124 | 
125 | /**
126 |  * Checks if now in PiP-mode
127 |  * @returns {boolean} if not PiP-mode now
128 |  */
129 | export function isNotPip() {
130 | 	return !self.documentPictureInPicture?.window;
131 | }
132 | 
133 | /**
134 |  * Converts color from long integer to array of integer.
135 |  * @param {number} long integer of color `0xAARRGGBB`
136 |  * @returns {number[]} array of integer `[RR, GG, BB]`
137 |  */
138 | export function getColorRGB(long) {
139 | 	/** @type {string[]} */ 
140 | 	const separated = long.toString(16).match(/[0-9a-f]{2}/g) || [];
141 | 	return separated.map(hex => Number.parseInt(hex, 16)).slice(1);
142 | }
143 | 
144 | /**
145 |  * Converts CSS color value from short hex-format or rgb()-format to normal hex-format.
146 |  * @param {string} css short hex-format or rgb()-format color value (e.g. `#abc`, `rgb(0, 128, 255)`)
147 |  * @param {string} [inherit='#ffffff'] default value
148 |  * @returns {string} normal hex-format color (e.g. `#123456`)
149 |  */
150 | export function formatHexColor(css, inherit = '#ffffff') {
151 | 	const color = css.trim();
152 | 	if (color.startsWith('#')) {
153 | 		if (color.length > 6) {
154 | 			return color.slice(0, 7);
155 | 		} else if (color.length > 3) {
156 | 			const [_, r, g, b] = color;
157 | 			return '#' + [r, g, b].map(s => s + s).join('');
158 | 		}
159 | 	} else if (color.startsWith('rgb')) {
160 | 		const [_, r, g, b] = color.match(/(\d+),?\s*(\d+),?\s*(\d+)/) || [];
161 | 		if (_) {
162 | 			return '#' + [r, g, b].map(s => Number.parseInt(s).toString(16).padStart(2, '0')).join('');
163 | 		}
164 | 	}
165 | 	return inherit;
166 | }
167 | 
168 | /**
169 |  * @typedef PartStyle
170 |  * @prop {boolean} photo
171 |  * @prop {boolean} name
172 |  * @prop {boolean} [message]
173 |  * @prop {boolean} [amount]
174 |  * @prop {boolean} [sticker]
175 |  * @prop {boolean} [months]
176 |  * @prop {string?} [color]
177 |  */
178 | 
179 | /**
180 |  * @typedef StorageSchema
181 |  * @prop {Record<string, string>} styles
182 |  * @prop {Record<string, number>} others
183 |  * @prop {Record<string, PartStyle>} parts
184 |  * @prop {Record<string, string>} cssTexts
185 |  * @prop {Record<string, string>} hotkeys
186 |  * @prop {object} mutedWords
187 |  * @prop {number} mutedWords.mode
188 |  * @prop {string} mutedWords.replacement
189 |  * @prop {boolean} mutedWords.regexp
190 |  * @prop {string[]} mutedWords.plainList
191 |  * @prop {object} translation
192 |  * @prop {string} translation.url
193 |  * @prop {boolean} translation.regexp
194 |  * @prop {string[]} translation.plainList
195 |  */
196 | 
197 | export const Storage = {
198 | 	/** @type {StorageSchema} */
199 | 	DEFAULT: {
200 | 		styles: {
201 | 			animation_duration: '8s',
202 | 			font_size: '32px',
203 | 			line_height: '1.4',
204 | 			font_family: 'sans-serif',
205 | 			font_weight: '500',
206 | 			stroke_color: '#000000',
207 | 			stroke_offset: '1px',
208 | 			stroke_blur: '0px',
209 | 			layer_opacity: '1',
210 | 			background_opacity: '0.5',
211 | 			max_width: '100%',
212 | 			sticker_size: '3em',
213 | 			layer_css: '',
214 | 		},
215 | 		others: {
216 | 			disabled: 0,
217 | 			px_per_sec: 0,
218 | 			number_of_lines: 0,
219 | 			type_of_lines: 0,
220 | 			wrap: 1,
221 | 			limit: 0,
222 | 			container_limit: 0,
223 | 			simultaneous: 2,
224 | 			emoji: 1,
225 | 			overlapping: 0,
226 | 			direction: 0,
227 | 			translation: 0,
228 | 			except_lang: 0,
229 | 			translation_timing: 0,
230 | 			suffix_original: 0,
231 | 			time_shift: 0,
232 | 			mode_livestream: 0,
233 | 			mode_replay: 1,
234 | 			autostart: 0,
235 | 			message_pause: 1,
236 | 		},
237 | 		parts: {
238 | 			normal: { photo: false, name: false, message: true, color: '' },
239 | 			verified: { photo: true, name: true, message: true, color: '' },
240 | 			member: { photo: false, name: false, message: true, color: '' },
241 | 			moderator: { photo: true, name: true, message: true, color: '' },
242 | 			owner: { photo: true, name: true, message: true, color: '' },
243 | 			you: { photo: false, name: false, message: true, color: '' },
244 | 			paid_message: { photo: true, name: true, amount: true, message: true, color: '' },
245 | 			paid_sticker: { photo: true, name: true, amount: true, sticker: true },
246 | 			membership: { photo: true, name: false, message: true, color: '' },
247 | 			milestone: { photo: true, name: true, months: true, message: true, color: '' },
248 | 		},
249 | 		cssTexts: {
250 | 			'.normal': '',
251 | 			'.verified': '',
252 | 			'.member': '',
253 | 			'.moderator': '',
254 | 			'.owner': '',
255 | 			'.you': '',
256 | 			'.paid_message': '',
257 | 			'.paid_sticker': '',
258 | 			'.membership': '',
259 | 			'.milestone': '',
260 | 			'': '',
261 | 		},
262 | 		hotkeys: {
263 | 			layer: '',
264 | 			panel: '',
265 | 		},
266 | 		mutedWords: {
267 | 			mode: 0,
268 | 			replacement: '',
269 | 			regexp: false,
270 | 			plainList: [],
271 | 		},
272 | 		translation: {
273 | 			url: 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=$sl&tl=$tl&dt=t&dt=bd&dj=1&q=$q',
274 | 			regexp: false,
275 | 			/** @type {string[]} */
276 | 			plainList: [],
277 | 		},
278 | 	},
279 | 
280 | 	/**
281 | 	 * @param {string[]} [keys] 
282 | 	 * @returns {Promise<Record<string, any>>}
283 | 	 */
284 | 	async get(keys) {
285 | 		const store = await browser.storage.local.get(keys);
286 | 		return store;
287 | 	},
288 | 
289 | 	/**
290 | 	 * @param {Record<string, any>} store 
291 | 	 * @returns {Promise<void>}
292 | 	 */
293 | 	async set(store = Object.create(null)) {
294 | 		const assigned = structuredClone(Storage.DEFAULT);
295 | 		for (const k of Object.keys(assigned)) {
296 | 			// @ts-ignore
297 | 			Object.assign(assigned[k], store[k]);
298 | 		}
299 | 		await browser.storage.local.set(assigned);
300 | 	},
301 | 
302 | 	async export() {
303 | 		const store = Storage.get()
304 | 		const blob = new Blob([ JSON.stringify(store) ], { type: 'application/json' });
305 | 		const url = URL.createObjectURL(blob);
306 | 		const a = document.createElement('a');
307 | 		a.download = `ytlcf-config-${Date.now()}.json`;
308 | 		a.href = url;
309 | 		a.click();
310 | 	},
311 | 
312 | 	async import() {
313 | 		const input = document.createElement('input');
314 | 		input.type = 'file';
315 | 		input.accept = 'application/json';
316 | 		input.addEventListener('cancel', () => {
317 | 			console.log('Config file import is canceled.');
318 | 		}, { passive: true });
319 | 		input.addEventListener('change', e => {
320 | 			const files = input.files;
321 | 			if (files && files.length > 0) {
322 | 				console.log('Config file selected: ' + files[0].name);
323 | 				const reader = new FileReader();
324 | 				reader.onload = async e => {
325 | 					const json = JSON.parse(/** @type {string} */ (e.target?.result));
326 | 					await Storage.set(json).then(refreshPage);
327 | 				};
328 | 				reader.readAsText(files[0]);
329 | 			}
330 | 		}, { passive: true });
331 | 		input.click();
332 | 	},
333 | 
334 | 	async init() {
335 | 		await Storage.set().then(refreshPage);
336 | 	}
337 | };
338 | 
339 | /**
340 |  * Sends a signal to refresh all tabs running this extension.
341 |  * @returns {Promise<void>}
342 |  */
343 | async function refreshPage() {
344 | 	await browser.runtime.sendMessage({ fire: 'reload' });
345 | }


--------------------------------------------------------------------------------
/src/_locales/en/messages.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"manifestName": {
  3 | 		"message": "YouTube LiveChat Flusher (Danmaku Chat)"
  4 | 	},
  5 | 	"manifestDescription": {
  6 | 		"message": "Provides bullet chatting (danmaku) on YouTube Live, like niconico or bilibili."
  7 | 	},
  8 | 	"ytp_menuitem_label_switch": {
  9 | 		"message": "Flush LiveChat"
 10 | 	},
 11 | 	"ytp_menuitem_label_config": {
 12 | 		"message": "Configure Flusher"
 13 | 	},
 14 | 	"ytp_menuitem_label_pip": {
 15 | 		"message": "PiP w/ chat (beta)"
 16 | 	},
 17 | 	"close": {
 18 | 		"message": "close"
 19 | 	},
 20 | 	"displayTab": {
 21 | 		"message": "Basic"
 22 | 	},
 23 | 	"byTypeTab": {
 24 | 		"message": "By Type"
 25 | 	},
 26 | 	"mutedWordsTab": {
 27 | 		"message": "Words Filter"
 28 | 	},
 29 | 	"userDefinedCssTab": {
 30 | 		"message": "User CSS"
 31 | 	},
 32 | 	"othersTab": {
 33 | 		"message": "Others"
 34 | 	},
 35 | 	"animationDuration": {
 36 | 		"message": "Animation Duration"
 37 | 	},
 38 | 	"fontSize": {
 39 | 		"message": "Font Size"
 40 | 	},
 41 | 	"lines": {
 42 | 		"message": "lines"
 43 | 	},
 44 | 	"typeOfLines_0": {
 45 | 		"message": "fixed"
 46 | 	},
 47 | 	"typeOfLines_1": {
 48 | 		"message": "max"
 49 | 	},
 50 | 	"typeOfLines_2": {
 51 | 		"message": "min"
 52 | 	},
 53 | 	"lineHeight": {
 54 | 		"message": "Line Height"
 55 | 	},
 56 | 	"fontFamily_fontWeight": {
 57 | 		"message": "Font Family/Weight"
 58 | 	},
 59 | 	"fontFamily_select_from_local": {
 60 | 		"message": "Select from local fonts"
 61 | 	},
 62 | 	"strokeStyle": {
 63 | 		"message": "Stroke Style"
 64 | 	},
 65 | 	"strokeColor": {
 66 | 		"message": "Color"
 67 | 	},
 68 | 	"strokeOffset": {
 69 | 		"message": "Offset"
 70 | 	},
 71 | 	"strokeBlur": {
 72 | 		"message": "Blur"
 73 | 	},
 74 | 	"layerOpacity": {
 75 | 		"message": "Chat Layer Opacity"
 76 | 	},
 77 | 	"backgroundOpacity": {
 78 | 		"message": "Background Opacity"
 79 | 	},
 80 | 	"opacity_0": {
 81 | 		"message": "0"
 82 | 	},
 83 | 	"opacity_1": {
 84 | 		"message": "1"
 85 | 	},
 86 | 	"maxWidth_wordWrap": {
 87 | 		"message": "Max Width/Wrap"
 88 | 	},
 89 | 	"wordWrap_0": {
 90 | 		"message": "No Wrap"
 91 | 	},
 92 | 	"wordWrap_1": {
 93 | 		"message": "Wrap Mode 1"
 94 | 	},
 95 | 	"wordWrap_2": {
 96 | 		"message": "Wrap Mode 2"
 97 | 	},
 98 | 	"displayLimit": {
 99 | 		"message": "Flow Disp. Limit"
100 | 	},
101 | 	"containerLimit": {
102 | 		"message": "Container Disp. Limit"
103 | 	},
104 | 	"unlimited": {
105 | 		"message": "Unlimited"
106 | 	},
107 | 	"simultaneousMessage": {
108 | 		"message": "Simultaneous Msg."
109 | 	},
110 | 	"simultaneousMessage_0": {
111 | 		"message": "Flush all messages"
112 | 	},
113 | 	"simultaneousMessage_1": {
114 | 		"message": "Flush only first message per load"
115 | 	},
116 | 	"simultaneousMessage_2": {
117 | 		"message": "Merge same messages"
118 | 	},
119 | 	"simultaneousMessage_3": {
120 | 		"message": "Merge same messages including last one"
121 | 	},
122 | 	"emojiExpression": {
123 | 		"message": "Emoji Expression"
124 | 	},
125 | 	"emojiExpression_0": {
126 | 		"message": "Hide all"
127 | 	},
128 | 	"emojiExpression_1": {
129 | 		"message": "Show all"
130 | 	},
131 | 	"emojiExpression_2": {
132 | 		"message": "Replace with labels"
133 | 	},
134 | 	"emojiExpression_3": {
135 | 		"message": "Replace with shortcuts"
136 | 	},
137 | 	"overlapping": {
138 | 		"message": "Overlapping"
139 | 	},
140 | 	"overlapping_transparent": {
141 | 		"message": "Make transparent"
142 | 	},
143 | 	"overlapping_translate": {
144 | 		"message": "Shift"
145 | 	},
146 | 	"overlapping_hidden": {
147 | 		"message": "Hide"
148 | 	},
149 | 	"direction": {
150 | 		"message": "Direction"
151 | 	},
152 | 	"direction_bottom_to_top": {
153 | 		"message": "Bottom to top"
154 | 	},
155 | 	"direction_left_to_right": {
156 | 		"message": "Left to right"
157 | 	},
158 | 	"layerCSS": {
159 | 		"message": "Layer CSS"
160 | 	},
161 | 	"resizeLayer": {
162 | 		"message": "Resize layer"
163 | 	},
164 | 	"normal": {
165 | 		"message": "Normal"
166 | 	},
167 | 	"member": {
168 | 		"message": "Member"
169 | 	},
170 | 	"moderator": {
171 | 		"message": "Moderator"
172 | 	},
173 | 	"owner": {
174 | 		"message": "Owner"
175 | 	},
176 | 	"verified": {
177 | 		"message": "Verified"
178 | 	},
179 | 	"you": {
180 | 		"message": "You"
181 | 	},
182 | 	"superchat": {
183 | 		"message": "Super Chat"
184 | 	},
185 | 	"sticker": {
186 | 		"message": "Super Sticker"
187 | 	},
188 | 	"membership": {
189 | 		"message": "Membership"
190 | 	},
191 | 	"milestone": {
192 | 		"message": "Milestone"
193 | 	},
194 | 	"displaySettings": {
195 | 		"message": "Display Settings"
196 | 	},
197 | 	"tooltip_authorPhoto": {
198 | 		"message": "Author Photo"
199 | 	},
200 | 	"tooltip_authorName": {
201 | 		"message": "Author Name"
202 | 	},
203 | 	"display_authorName": {
204 | 		"message": "Name"
205 | 	},
206 | 	"tooltip_purchaseAmount": {
207 | 		"message": "Purchase Amount"
208 | 	},
209 | 	"display_purchaseAmount": {
210 | 		"message": "$0"
211 | 	},
212 | 	"tooltip_milestoneMonths": {
213 | 		"message": "Milestone Months"
214 | 	},
215 | 	"display_milestoneMonths": {
216 | 		"message": "mths"
217 | 	},
218 | 	"tooltip_chatMessage": {
219 | 		"message": "Chat Message"
220 | 	},
221 | 	"display_chatMessage": {
222 | 		"message": "Message"
223 | 	},
224 | 	"tooltip_membershipMessage": {
225 | 		"message": "New/Upgraded Membership Message"
226 | 	},
227 | 	"display_membershipMessage": {
228 | 		"message": "Message"
229 | 	},
230 | 	"tooltip_sticker": {
231 | 		"message": "Sticker"
232 | 	},
233 | 	"display_sticker": {
234 | 		"message": "Sticker"
235 | 	},
236 | 	"tooltip_stickerSize": {
237 | 		"message": "Sticker size"
238 | 	},
239 | 	"display_stickerSize": {
240 | 		"message": "Size"
241 | 	},
242 | 	"tooltip_customColor": {
243 | 		"message": "Custom Color"
244 | 	},
245 | 	"display_customColor": {
246 | 		"message": "Custom Color"
247 | 	},
248 | 	"placeholder_customCSS": {
249 | 		"message": "Custom CSS"
250 | 	},
251 | 	"mutedWordsMode": {
252 | 		"message": "Mode"
253 | 	},
254 | 	"mutedWordsMode_0": {
255 | 		"message": "Off"
256 | 	},
257 | 	"mutedWordsMode_1": {
258 | 		"message": "Hide messages containing the keyword"
259 | 	},
260 | 	"mutedWordsMode_2": {
261 | 		"message": "Hide/replace the keyword"
262 | 	},
263 | 	"mutedWordsMode_3": {
264 | 		"message": "Replace the character"
265 | 	},
266 | 	"mutedWordsReplacement": {
267 | 		"message": "Repl. Word/Char"
268 | 	},
269 | 	"placeholder_mutedWordsReplacement": {
270 | 		"message": "Empty means hidden"
271 | 	},
272 | 	"tooltip_mutedWordsReplacement": {
273 | 		"message": "Only the first character is used for replacement"
274 | 	},
275 | 	"mutedWordsGrammer": {
276 | 		"message": "Grammar"
277 | 	},
278 | 	"regexp": {
279 | 		"message": "Use regular expression"
280 | 	},
281 | 	"placeholder_mutedWordsList": {
282 | 		"message": "Multiple keywords can be prohibited in a new line."
283 | 	},
284 | 	"user_defined_css_shortcut": {
285 | 		"message": "Shortcut"
286 | 	},
287 | 	"font_helper_select": {
288 | 		"message": "Select font family..."
289 | 	},
290 | 	"up": {
291 | 		"message": "Up"
292 | 	},
293 | 	"down": {
294 | 		"message": "Down"
295 | 	},
296 | 	"delete": {
297 | 		"message": "Delete"
298 | 	},
299 | 	"add": {
300 | 		"message": "Add"
301 | 	},
302 | 	"confirm": {
303 | 		"message": "Confirm"
304 | 	},
305 | 	"cancel": {
306 | 		"message": "Cancel"
307 | 	},
308 | 	"addUserStyle": {
309 | 		"message": "Add per-user styling"
310 | 	},
311 | 	"label": {
312 | 		"message": "Label"
313 | 	},
314 | 	"Channel_ID": {
315 | 		"message": "Channel ID\n(Each line)"
316 | 	},
317 | 	"displayStyle": {
318 | 		"message": "Display style"
319 | 	},
320 | 	"fontFactor": {
321 | 		"message": "Font size factor"
322 | 	},
323 | 	"placeholder_channelId": {
324 | 		"message": "24 letters beginning with &quot;UC&quot;"
325 | 	},
326 | 	"validation_channelId": {
327 | 		"message": "Enter 24 characters beginning with &quot;UC&quot; for each line:\nLine #$1 is invalid."
328 | 	},
329 | 	"placeholder_userStyleTextArea": {
330 | 		"message": "/* Preview of CSS is displayed in this area. */"
331 | 	},
332 | 	"translation": {
333 | 		"message": "Message Translation"
334 | 	},
335 | 	"targetLanguage": {
336 | 		"message": "Target language"
337 | 	},
338 | 	"prefixOriginalLanguage": {
339 | 		"message": "Prefix original language"
340 | 	},
341 | 	"exception": {
342 | 		"message": "except"
343 | 	},
344 | 	"addableByBrowserLanguageSettings": {
345 | 		"message": "You can add more options \nvia browser's language settings."
346 | 	},
347 | 	"traslationTiming": {
348 | 		"message": ""
349 | 	},
350 | 	"translation_eagerMode": {
351 | 		"message": "Translates before starting animation"
352 | 	},
353 | 	"translation_lazyMode": {
354 | 		"message": "Translates after starting animation"
355 | 	},
356 | 	"suffixOriginalMessage": {
357 | 		"message": "Suffix original message"
358 | 	},
359 | 	"translationBlacklist": {
360 | 		"message": "Translation Exclusion List"
361 | 	},
362 | 	"translationUrl": {
363 | 		"message": "Translation URL (GET)"
364 | 	},
365 | 	"timeshift": {
366 | 		"message": "Time-shift"
367 | 	},
368 | 	"timeshift_note": {
369 | 		"message": "(Only available in replay)"
370 | 	},
371 | 	"otherConfig": {
372 | 		"message": "Open Other Options"
373 | 	},
374 | 	"aboutAddon": {
375 | 		"message": "About Extension"
376 | 	},
377 | 	"version": {
378 | 		"message": "Version"
379 | 	},
380 | 	"configFile": {
381 | 		"message": "Config File"
382 | 	},
383 | 	"export": {
384 | 		"message": "Export"
385 | 	},
386 | 	"import": {
387 | 		"message": "Import"
388 | 	},
389 | 	"init": {
390 | 		"message": "Reset"
391 | 	},
392 | 	"commonSettings": {
393 | 		"message": "Common Settings"
394 | 	},
395 | 	"loadingMode": {
396 | 		"message": "Chat Loading Mode"
397 | 	},
398 | 	"livestream": {
399 | 		"message": "Live"
400 | 	},
401 | 	"replay": {
402 | 		"message": "Replay"
403 | 	},
404 | 	"mode_option_chatframe_dependent": {
405 | 		"message": "Dependent on chat frame"
406 | 	},
407 | 	"mode_option_chatframe_independent": {
408 | 		"message": "Independent of chat frame"
409 | 	},
410 | 	"description_chatframe_dependent_1": {
411 | 		"message": "It only works when the chat frame is open."
412 | 	},
413 | 	"description_chatframe_dependent_2": {
414 | 		"message": "Voting results will also be displayed during the livestream."
415 | 	},
416 | 	"description_chatframe_independent_1": {
417 | 		"message": "It works even when the chat frame is closed."
418 | 	},
419 | 	"description_chatframe_independent_2": {
420 | 		"message": "The time-shift function is available for replays; you can adjust the timing of chat flowing."
421 | 	},
422 | 	"description_chatframe_independent_3": {
423 | 		"message": "The operation may be unstable, especially for long videos."
424 | 	},
425 | 	"autostart": {
426 | 		"message": "Automatically open chat frame when watching replays"
427 | 	},
428 | 	"message_pause": {
429 | 		"message": "Animation pausing by right-clicking a message"
430 | 	},
431 | 	"disabled": {
432 | 		"message": "Disable"
433 | 	},
434 | 	"enabled": {
435 | 		"message": "Enable"
436 | 	},
437 | 	"hotkey": {
438 | 		"message": "Hotkeys (Keyboard Shortcuts)"
439 | 	},
440 | 	"hotkey_layer": {
441 | 		"message": "Chat Layer"
442 | 	},
443 | 	"hotkey_panel": {
444 | 		"message": "Config Panel"
445 | 	},
446 | 	"save": {
447 | 		"message": "Save"
448 | 	},
449 | 	"warn_notSaved": {
450 | 		"message": "If saved, all tabs opening YouTube will be refreshed automatically."
451 | 	},
452 | 	"pip_marker": {
453 | 		"message": "Now playing in picture-in-picture mode"
454 | 	},
455 | 	"menu_resumeAnimation": {
456 | 		"message": "Resume the animation"
457 | 	},
458 | 	"menu_moveMessage": {
459 | 		"message": "Move this message"
460 | 	},
461 | 	"menu_copyAuthorId": {
462 | 		"message": "Copy the user ID of this message"
463 | 	},
464 | 	"menu_hideAuthor": {
465 | 		"message": "Hide all messages by this user"
466 | 	}
467 | }


--------------------------------------------------------------------------------
/src/styles/content.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--yt-lcf-checkbox-unchecked-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"%3E%3Cpath d="M1.5,0.5h8q1,0,1,1v8q0,1,-1,1h-8q-1,0,-1,-1v-8q0,-1,1,-1z" fill="none" stroke="currentColor"/%3E%3C/svg%3E');
  3 | 	--yt-lcf-checkbox-checked-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"%3E%3Cpath d="M1.5,0.5h8q1,0,1,1v8q0,1,-1,1h-8q-1,0,-1,-1v-8q0,-1,1,-1z" fill="none" stroke="currentColor"/%3E%3Cpath d="M2.5,6l2,2,4,-5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/%3E%3C/svg%3E');
  4 | 	--yt-lcf-red-dot-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 8 8"><circle r="3" fill="rgba(225,0,45,0.9)"/></svg>');
  5 | }
  6 | 
  7 | .html5-video-player {
  8 | 	font-family: inherit !important;
  9 | }
 10 | #yt-lcf-layer {
 11 | 	--yt-lcf-animation-duration: 8s;
 12 | 	--yt-lcf-font-size: 32px;
 13 | 	--yt-lcf-line-height: 1.25;
 14 | 	--yt-lcf-font-family: inherit;
 15 | 	--yt-lcf-font-weight: 500;
 16 | 	--yt-lcf-stroke-color: #000;
 17 | 	--yt-lcf-stroke-offset: 1px;
 18 | 	--yt-lcf-stroke-blur: 0px;
 19 | 	--yt-lcf-layer-opacity: 1;
 20 | 	--yt-lcf-background-opacity: .5;
 21 | 	--yt-lcf-max-width: 100%;
 22 | 	--yt-lcf-message-hyphens: auto;
 23 | 	--yt-lcf-message-word-break: break-all;
 24 | 	--yt-lcf-message-white-space: pre-line;
 25 | 	--yt-lcf-sticker-size: 3em;
 26 | 	--yt-lcf-normal-color: inherit;
 27 | 	--yt-lcf-normal-display: block;
 28 | 	--yt-lcf-normal-display-photo: none;
 29 | 	--yt-lcf-normal-display-name: none;
 30 | 	--yt-lcf-normal-display-message: inline;
 31 | 	--yt-lcf-member-color: var(--yt-live-chat-sponsor-color);
 32 | 	--yt-lcf-member-display: block;
 33 | 	--yt-lcf-member-display-photo: none;
 34 | 	--yt-lcf-member-display-name: none;
 35 | 	--yt-lcf-member-display-message: inline;
 36 | 	--yt-lcf-moderator-color: var(--yt-live-chat-moderator-color);
 37 | 	--yt-lcf-moderator-display: block;
 38 | 	--yt-lcf-moderator-display-photo: inline;
 39 | 	--yt-lcf-moderator-display-name: inline;
 40 | 	--yt-lcf-moderator-display-message: inline;
 41 | 	--yt-lcf-owner-color: var(--yt-live-chat-owner-color);
 42 | 	--yt-lcf-owner-display: block;
 43 | 	--yt-lcf-owner-display-photo: inline;
 44 | 	--yt-lcf-owner-display-name: inline;
 45 | 	--yt-lcf-owner-display-message: inline;
 46 | 	--yt-lcf-verified-color: var(--yt-live-chat-author-chip-verified-background-color);
 47 | 	--yt-lcf-verified-display: block;
 48 | 	--yt-lcf-verified-display-photo: inline;
 49 | 	--yt-lcf-verified-display-name: inline;
 50 | 	--yt-lcf-verified-display-message: inline;
 51 | 	--yt-lcf-you-color: var(--yt-live-chat-mention-background-color);
 52 | 	--yt-lcf-you-display: block;
 53 | 	--yt-lcf-you-display-photo: none;
 54 | 	--yt-lcf-you-display-name: none;
 55 | 	--yt-lcf-you-display-message: inline;
 56 | 	--yt-lcf-paid-message-display: block;
 57 | 	--yt-lcf-paid-message-display-photo: initial;
 58 | 	--yt-lcf-paid-message-display-name: initial;
 59 | 	--yt-lcf-paid-message-display-amount: initial;
 60 | 	--yt-lcf-paid-message-display-message: initial;
 61 | 	--yt-lcf-paid-sticker-display: block;
 62 | 	--yt-lcf-paid-sticker-display-photo: initial;
 63 | 	--yt-lcf-paid-sticker-display-name: initial;
 64 | 	--yt-lcf-paid-sticker-display-amount: initial;
 65 | 	--yt-lcf-paid-sticker-display-sticker: initial;
 66 | 	--yt-lcf-new-membership-display: block;
 67 | 	--yt-lcf-new-membership-display-photo: initial;
 68 | 	--yt-lcf-new-membership-display-name: initial;
 69 | 	--yt-lcf-new-membership-display-message: initial;
 70 | 	--yt-lcf-milestone-display: block;
 71 | 	--yt-lcf-milestone-display-photo: initial;
 72 | 	--yt-lcf-milestone-display-name: initial;
 73 | 	--yt-lcf-milestone-display-months: initial;
 74 | 	--yt-lcf-milestone-display-message: initial;
 75 | 	--yt-lcf-animation-play-state: running;
 76 | 	box-sizing: border-box;
 77 | 	color: #fff;
 78 | 	contain: strict;
 79 | 	font-size: var(--yt-lcf-font-size);
 80 | 	font-family: var(--yt-lcf-font-family);
 81 | 	font-weight: var(--yt-lcf-font-weight);
 82 | 	height: 100%;
 83 | 	line-height: 1.25;
 84 | 	max-height: 100%;
 85 | 	max-width: 100%;
 86 | 	opacity: var(--yt-lcf-layer-opacity);
 87 | 	overflow: hidden;
 88 | 	pointer-events: none;
 89 | 	position: absolute;
 90 | 	resize: none;
 91 | 	white-space: pre;
 92 | 	width: 100%;
 93 | 	z-index: 12;
 94 | }
 95 | .html5-video-player.unstarted-mode > #yt-lcf-layer,
 96 | .html5-video-player.ended-mode > #yt-lcf-layer {
 97 | 	z-index: 25;
 98 | }
 99 | .paused-mode > #yt-lcf-layer {
100 | 	--yt-lcf-animation-play-state: paused;
101 | }
102 | #yt-lcf-layer.resize-mode {
103 | 	background: rgba(255, 255, 255, .1);
104 | 	border: thick dashed var(--accent-color, currentColor);
105 | 	display: block !important;
106 | 	pointer-events: auto;
107 | 	resize: both;
108 | 	z-index: 1024;
109 | 	&::before {
110 | 		content: "Press Enter key to apply changes.\0aPress Esc key to cancel.";
111 | 		cursor: move;
112 | 		position: absolute;
113 | 		text-align: center;
114 | 		text-shadow: 
115 | 		var(--yt-lcf-stroke-color) calc(var(--yt-lcf-stroke-offset) * -1) calc(var(--yt-lcf-stroke-offset) * -1) var(--yt-lcf-stroke-blur),
116 | 		var(--yt-lcf-stroke-color) calc(var(--yt-lcf-stroke-offset) * -1) 0 var(--yt-lcf-stroke-blur),
117 | 		var(--yt-lcf-stroke-color) calc(var(--yt-lcf-stroke-offset) * -1) var(--yt-lcf-stroke-offset) var(--yt-lcf-stroke-blur),
118 | 		var(--yt-lcf-stroke-color) 0 calc(var(--yt-lcf-stroke-offset) * -1) var(--yt-lcf-stroke-blur),
119 | 		var(--yt-lcf-stroke-color) 0 var(--yt-lcf-stroke-offset) var(--yt-lcf-stroke-blur),
120 | 		var(--yt-lcf-stroke-color) var(--yt-lcf-stroke-offset) calc(var(--yt-lcf-stroke-offset) * -1) var(--yt-lcf-stroke-blur),
121 | 		var(--yt-lcf-stroke-color) var(--yt-lcf-stroke-offset) 0 var(--yt-lcf-stroke-blur),
122 | 		var(--yt-lcf-stroke-color) var(--yt-lcf-stroke-offset) var(--yt-lcf-stroke-offset) var(--yt-lcf-stroke-blur);
123 | 		top: calc(50% - 1em);
124 | 		white-space: pre-line;
125 | 		width: 100%;
126 | 	}
127 | 	&:lang(ja)::before {
128 | 		content: "変更を適用するにはEnterキーを押してください\0aキャンセルするにはEscキーを押してください";
129 | 	}
130 | }
131 | 
132 | /*
133 | 	Config panel
134 | */
135 | #yt-lcf-panel {
136 | 	background: transparent;
137 | 	max-height: calc(100% - 20px);
138 | 	max-width: calc(100% - 20px);
139 | 	user-select: none;
140 | 	[data-browser="chrome"] & {
141 | 		overflow: hidden auto;
142 | 	}
143 | 	[data-browser="firefox"] & {
144 | 		overflow: scroll;
145 | 		scrollbar-width: none;
146 | 	}
147 | 	&:active {
148 | 		will-change: left, top;
149 | 	}
150 | 	.ytp-sfn-close {
151 | 		background: rgba(28, 28, 28, .8);
152 | 	}
153 | 	[role="tablist"] {
154 | 		display: flex;
155 | 		padding: 0 8px;
156 | 	}
157 | 	[role="tab"] {
158 | 		background: rgba(28, 28, 28, .8);
159 | 		border: 1px solid;
160 | 		border-radius: 1em 1em 0 0;
161 | 		padding: 8px 8px 7px;
162 | 		&[aria-selected="true"] {
163 | 			border-bottom-color: transparent;
164 | 		}
165 | 	}
166 | 	:disabled, :disabled + span {
167 | 		opacity: .4;
168 | 	}
169 | 	.ytp-sfn-content {
170 | 		background: rgba(28, 28, 28, .8);
171 | 		> div {
172 | 			margin: .5em 0;
173 | 			> div {
174 | 				padding: 0 .25em;
175 | 				margin: 0 .25em;
176 | 				text-align: start;
177 | 				vertical-align: middle;
178 | 				white-space: nowrap;
179 | 				&:first-child {
180 | 					text-align: end;
181 | 				}
182 | 				&[data-i18n], [data-i18n] {
183 | 					text-wrap: nowrap;
184 | 					white-space-collapse: preserve-breaks;
185 | 				}
186 | 			}
187 | 		}
188 | 	}
189 | 	label {
190 | 		cursor: pointer;
191 | 		&.toggle {
192 | 			display: inline-block;
193 | 			vertical-align: middle;
194 | 			> input[type="checkbox"] {
195 | 				display: none;
196 | 				& + * {
197 | 					opacity: .4;
198 | 				}
199 | 				&:checked + * {
200 | 					opacity: 1;
201 | 				}
202 | 			}
203 | 			+ br {
204 | 				margin-bottom: 0;
205 | 			}
206 | 		}
207 | 	}
208 | 	:disabled, :disabled + span {
209 | 		opacity: .4;
210 | 	}
211 | 	.photo > svg {
212 | 		height: 2em;
213 | 		width: 2em;
214 | 		vertical-align: -.5em;
215 | 		* {
216 | 			fill: none;
217 | 			stroke: currentColor;
218 | 		}
219 | 	}
220 | 	input {
221 | 		color: inherit;
222 | 		font: inherit;
223 | 		&[type="checkbox"] {
224 | 			appearance: none;
225 | 			background-color: currentColor;
226 | 			height: 1.25em;
227 | 			margin: 0 .25em;
228 | 			mask: var(--yt-lcf-checkbox-unchecked-mask-image) no-repeat center/1.25em;
229 | 			vertical-align: -.25em;
230 | 			width: 1.25em;
231 | 			&:checked {
232 | 				mask-image: var(--yt-lcf-checkbox-checked-mask-image);
233 | 			}
234 | 		}
235 | 		&[type="number"] {
236 | 			background-color: inherit;
237 | 			border: 1px solid currentColor;
238 | 			border-radius: 2px;
239 | 			margin: 0 .25em;
240 | 			padding: 2px 0 2px .25em;
241 | 		}
242 | 		&[type="range"] {
243 | 			appearance: none;
244 | 			background-color: var(--yt-spec-static-brand-red, red);
245 | 			height: 3px;
246 | 			vertical-align: middle;
247 | 			&::-webkit-slider-thumb {
248 | 				appearance: none;
249 | 				background-color: var(--yt-spec-static-brand-white, white);
250 | 				border: 0;
251 | 				border-radius: 50%;
252 | 				box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .6);
253 | 				height: 1em;
254 | 				width: 1em;
255 | 			}
256 | 			&::-moz-range-thumb {
257 | 				background-color: var(--yt-spec-static-brand-white, white);
258 | 				border: 0;
259 | 				box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .6);
260 | 			}
261 | 		}
262 | 		&[type="color"] {
263 | 			appearance: none;
264 | 			padding: 0;
265 | 			height: 1.5em;
266 | 			width: 2em;
267 | 			[data-browser="firefox"] & {
268 | 				border: 1px outset currentColor;
269 | 				width: 1.5em;
270 | 				vertical-align: -.25em;
271 | 			}
272 | 		}
273 | 		&:not([type="number"]):enabled {
274 | 			cursor: pointer;
275 | 		}
276 | 		&:invalid {
277 | 			box-shadow: 0 0 1px 1px var(--yt-spec-static-brand-red, red);
278 | 		}
279 | 		&[name^="hotkey"] {
280 | 			text-align: center;
281 | 		}
282 | 		[data-browser="chrome"] & {
283 | 			&[type="text"][size="3"] {
284 | 				width: 2em;
285 | 			}
286 | 		}
287 | 		&[data-size="3"] {
288 | 			width: 4em;
289 | 		}
290 | 		&[data-size="5"] {
291 | 			width: 5em;
292 | 		}
293 | 		&[data-size="8"] {
294 | 			width: 7em;
295 | 		}
296 | 	}
297 | 	select {
298 | 		appearance: none;
299 | 		background-color: transparent;
300 | 		border: 0;
301 | 		border-bottom: 1px solid currentColor;
302 | 		filter: invert(1);
303 | 		font: inherit;
304 | 		padding: 2px;
305 | 		&:enabled {
306 | 			cursor: pointer;
307 | 		}
308 | 	}
309 | 	input[type="text"], input[type="url"], textarea {
310 | 		background-color: inherit;
311 | 		border: 1px solid currentColor;
312 | 		border-radius: 2px;
313 | 		cursor: text !important;
314 | 		font-family: inherit;
315 | 		font-size: inherit;
316 | 		margin: 0 .25em;
317 | 		padding: 2px;
318 | 	}
319 | 	textarea {
320 | 		appearance: none;
321 | 		background-color: transparent;
322 | 		color: inherit;
323 | 		resize: vertical;
324 | 	}
325 | 	input[data-lang], textarea[data-lang] {
326 | 		font-family: Consolas, 'Courier New', monospace;
327 | 	}
328 | 	details input[type="text"] {
329 | 		margin: 2px 0 0 -1px;
330 | 		width: 100%;
331 | 	}
332 | 	br {
333 | 		content: '';
334 | 		margin-bottom: .5em;
335 | 		[data-browser="chrome"] & {
336 | 			display: block;
337 | 		}
338 | 	}
339 | 	hr {
340 | 		border-bottom: thin solid;
341 | 		margin: 1em 0;
342 | 	}
343 | 	dialog {
344 | 		border: none;
345 | 		&::backdrop {
346 | 			background: rgba(0, 0, 0, .6);
347 | 		}
348 | 		ol {
349 | 			margin-left: 1.5em;
350 | 		}
351 | 		.ytp-sfn-content {
352 | 			background: transparent;
353 | 		}
354 | 	}
355 | 	button[id|="ytlcf-config"] {
356 | 		display: inline-flex;
357 | 	}
358 | }
359 | #yt-lcf-panel-tabpanel-1, #ytlcf-dialog-user_css_helper > form {
360 | 	> div {
361 | 		display: flex;
362 | 		> :first-child {
363 | 			line-height: 20px;
364 | 		}
365 | 		> :last-child {
366 | 			flex-grow: 1;
367 | 			width: auto;
368 | 			> :first-child {
369 | 				display: flex;
370 | 				align-items: baseline;
371 | 				justify-content: space-between;
372 | 				> :last-child::before {
373 | 					content: '/';
374 | 				}
375 | 			}
376 | 		}
377 | 	}
378 | 	label {
379 | 		padding: 0 .5em 0 .25em;
380 | 	}
381 | 	div {
382 | 		&.outlined, &.superchat {
383 | 			outline: 1px solid;
384 | 			border-radius: .5em;
385 | 		}
386 | 		input[name$="_css"] {
387 | 			margin: .25em 0;
388 | 			width: 20.5em;
389 | 		}
390 | 	}
391 | }
392 | 
393 | #ytlcf-dialog-user_css_helper {
394 | 	textarea, input[type="text"] {
395 | 		[data-browser="chrome"] & {
396 | 			width: -webkit-fill-available;
397 | 		}
398 | 		[data-browser="firefox"] & {
399 | 			width: -moz-available;
400 | 		}
401 | 	}
402 | }
403 | 
404 | /*
405 | 	Settings button
406 | */
407 | .ytp-settings-menu:has(#yt-lcf-cb[aria-checked="true"]) ~ .ytp-chrome-bottom .ytp-settings-button {
408 | 	background: var(--yt-lcf-red-dot-image) no-repeat 20% 20%/8px;
409 | }
410 | #yt-lcf-cb[aria-checked="true"] > .ytp-menuitem-icon {
411 | 	background: var(--yt-lcf-red-dot-image) no-repeat 10% 25%/8px;
412 | }
413 | 
414 | /*
415 | 	PiP
416 | */
417 | #yt-lcf-pip-marker {
418 | 	position: absolute;
419 | 	top: 12px;
420 | 	left: 12px;
421 | 	font-size: 2em;
422 | 	color: var(--yt-spec-text-primary);
423 | }
424 | :fullscreen #yt-lcf-pp {
425 | 	display: none;
426 | }
427 | 
428 | /*
429 | 	Context menu
430 | */
431 | #yt-lcf-contextmenu {
432 | 	white-space: nowrap;
433 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | Mozilla Public License Version 2.0
  2 | ==================================
  3 | 
  4 | 1. Definitions
  5 | --------------
  6 | 
  7 | 1.1. "Contributor"
  8 |     means each individual or legal entity that creates, contributes to
  9 |     the creation of, or owns Covered Software.
 10 | 
 11 | 1.2. "Contributor Version"
 12 |     means the combination of the Contributions of others (if any) used
 13 |     by a Contributor and that particular Contributor's Contribution.
 14 | 
 15 | 1.3. "Contribution"
 16 |     means Covered Software of a particular Contributor.
 17 | 
 18 | 1.4. "Covered Software"
 19 |     means Source Code Form to which the initial Contributor has attached
 20 |     the notice in Exhibit A, the Executable Form of such Source Code
 21 |     Form, and Modifications of such Source Code Form, in each case
 22 |     including portions thereof.
 23 | 
 24 | 1.5. "Incompatible With Secondary Licenses"
 25 |     means
 26 | 
 27 |     (a) that the initial Contributor has attached the notice described
 28 |         in Exhibit B to the Covered Software; or
 29 | 
 30 |     (b) that the Covered Software was made available under the terms of
 31 |         version 1.1 or earlier of the License, but not also under the
 32 |         terms of a Secondary License.
 33 | 
 34 | 1.6. "Executable Form"
 35 |     means any form of the work other than Source Code Form.
 36 | 
 37 | 1.7. "Larger Work"
 38 |     means a work that combines Covered Software with other material, in
 39 |     a separate file or files, that is not Covered Software.
 40 | 
 41 | 1.8. "License"
 42 |     means this document.
 43 | 
 44 | 1.9. "Licensable"
 45 |     means having the right to grant, to the maximum extent possible,
 46 |     whether at the time of the initial grant or subsequently, any and
 47 |     all of the rights conveyed by this License.
 48 | 
 49 | 1.10. "Modifications"
 50 |     means any of the following:
 51 | 
 52 |     (a) any file in Source Code Form that results from an addition to,
 53 |         deletion from, or modification of the contents of Covered
 54 |         Software; or
 55 | 
 56 |     (b) any new file in Source Code Form that contains any Covered
 57 |         Software.
 58 | 
 59 | 1.11. "Patent Claims" of a Contributor
 60 |     means any patent claim(s), including without limitation, method,
 61 |     process, and apparatus claims, in any patent Licensable by such
 62 |     Contributor that would be infringed, but for the grant of the
 63 |     License, by the making, using, selling, offering for sale, having
 64 |     made, import, or transfer of either its Contributions or its
 65 |     Contributor Version.
 66 | 
 67 | 1.12. "Secondary License"
 68 |     means either the GNU General Public License, Version 2.0, the GNU
 69 |     Lesser General Public License, Version 2.1, the GNU Affero General
 70 |     Public License, Version 3.0, or any later versions of those
 71 |     licenses.
 72 | 
 73 | 1.13. "Source Code Form"
 74 |     means the form of the work preferred for making modifications.
 75 | 
 76 | 1.14. "You" (or "Your")
 77 |     means an individual or a legal entity exercising rights under this
 78 |     License. For legal entities, "You" includes any entity that
 79 |     controls, is controlled by, or is under common control with You. For
 80 |     purposes of this definition, "control" means (a) the power, direct
 81 |     or indirect, to cause the direction or management of such entity,
 82 |     whether by contract or otherwise, or (b) ownership of more than
 83 |     fifty percent (50%) of the outstanding shares or beneficial
 84 |     ownership of such entity.
 85 | 
 86 | 2. License Grants and Conditions
 87 | --------------------------------
 88 | 
 89 | 2.1. Grants
 90 | 
 91 | Each Contributor hereby grants You a world-wide, royalty-free,
 92 | non-exclusive license:
 93 | 
 94 | (a) under intellectual property rights (other than patent or trademark)
 95 |     Licensable by such Contributor to use, reproduce, make available,
 96 |     modify, display, perform, distribute, and otherwise exploit its
 97 |     Contributions, either on an unmodified basis, with Modifications, or
 98 |     as part of a Larger Work; and
 99 | 
100 | (b) under Patent Claims of such Contributor to make, use, sell, offer
101 |     for sale, have made, import, and otherwise transfer either its
102 |     Contributions or its Contributor Version.
103 | 
104 | 2.2. Effective Date
105 | 
106 | The licenses granted in Section 2.1 with respect to any Contribution
107 | become effective for each Contribution on the date the Contributor first
108 | distributes such Contribution.
109 | 
110 | 2.3. Limitations on Grant Scope
111 | 
112 | The licenses granted in this Section 2 are the only rights granted under
113 | this License. No additional rights or licenses will be implied from the
114 | distribution or licensing of Covered Software under this License.
115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
116 | Contributor:
117 | 
118 | (a) for any code that a Contributor has removed from Covered Software;
119 |     or
120 | 
121 | (b) for infringements caused by: (i) Your and any other third party's
122 |     modifications of Covered Software, or (ii) the combination of its
123 |     Contributions with other software (except as part of its Contributor
124 |     Version); or
125 | 
126 | (c) under Patent Claims infringed by Covered Software in the absence of
127 |     its Contributions.
128 | 
129 | This License does not grant any rights in the trademarks, service marks,
130 | or logos of any Contributor (except as may be necessary to comply with
131 | the notice requirements in Section 3.4).
132 | 
133 | 2.4. Subsequent Licenses
134 | 
135 | No Contributor makes additional grants as a result of Your choice to
136 | distribute the Covered Software under a subsequent version of this
137 | License (see Section 10.2) or under the terms of a Secondary License (if
138 | permitted under the terms of Section 3.3).
139 | 
140 | 2.5. Representation
141 | 
142 | Each Contributor represents that the Contributor believes its
143 | Contributions are its original creation(s) or it has sufficient rights
144 | to grant the rights to its Contributions conveyed by this License.
145 | 
146 | 2.6. Fair Use
147 | 
148 | This License is not intended to limit any rights You have under
149 | applicable copyright doctrines of fair use, fair dealing, or other
150 | equivalents.
151 | 
152 | 2.7. Conditions
153 | 
154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
155 | in Section 2.1.
156 | 
157 | 3. Responsibilities
158 | -------------------
159 | 
160 | 3.1. Distribution of Source Form
161 | 
162 | All distribution of Covered Software in Source Code Form, including any
163 | Modifications that You create or to which You contribute, must be under
164 | the terms of this License. You must inform recipients that the Source
165 | Code Form of the Covered Software is governed by the terms of this
166 | License, and how they can obtain a copy of this License. You may not
167 | attempt to alter or restrict the recipients' rights in the Source Code
168 | Form.
169 | 
170 | 3.2. Distribution of Executable Form
171 | 
172 | If You distribute Covered Software in Executable Form then:
173 | 
174 | (a) such Covered Software must also be made available in Source Code
175 |     Form, as described in Section 3.1, and You must inform recipients of
176 |     the Executable Form how they can obtain a copy of such Source Code
177 |     Form by reasonable means in a timely manner, at a charge no more
178 |     than the cost of distribution to the recipient; and
179 | 
180 | (b) You may distribute such Executable Form under the terms of this
181 |     License, or sublicense it under different terms, provided that the
182 |     license for the Executable Form does not attempt to limit or alter
183 |     the recipients' rights in the Source Code Form under this License.
184 | 
185 | 3.3. Distribution of a Larger Work
186 | 
187 | You may create and distribute a Larger Work under terms of Your choice,
188 | provided that You also comply with the requirements of this License for
189 | the Covered Software. If the Larger Work is a combination of Covered
190 | Software with a work governed by one or more Secondary Licenses, and the
191 | Covered Software is not Incompatible With Secondary Licenses, this
192 | License permits You to additionally distribute such Covered Software
193 | under the terms of such Secondary License(s), so that the recipient of
194 | the Larger Work may, at their option, further distribute the Covered
195 | Software under the terms of either this License or such Secondary
196 | License(s).
197 | 
198 | 3.4. Notices
199 | 
200 | You may not remove or alter the substance of any license notices
201 | (including copyright notices, patent notices, disclaimers of warranty,
202 | or limitations of liability) contained within the Source Code Form of
203 | the Covered Software, except that You may alter any license notices to
204 | the extent required to remedy known factual inaccuracies.
205 | 
206 | 3.5. Application of Additional Terms
207 | 
208 | You may choose to offer, and to charge a fee for, warranty, support,
209 | indemnity or liability obligations to one or more recipients of Covered
210 | Software. However, You may do so only on Your own behalf, and not on
211 | behalf of any Contributor. You must make it absolutely clear that any
212 | such warranty, support, indemnity, or liability obligation is offered by
213 | You alone, and You hereby agree to indemnify every Contributor for any
214 | liability incurred by such Contributor as a result of warranty, support,
215 | indemnity or liability terms You offer. You may include additional
216 | disclaimers of warranty and limitations of liability specific to any
217 | jurisdiction.
218 | 
219 | 4. Inability to Comply Due to Statute or Regulation
220 | ---------------------------------------------------
221 | 
222 | If it is impossible for You to comply with any of the terms of this
223 | License with respect to some or all of the Covered Software due to
224 | statute, judicial order, or regulation then You must: (a) comply with
225 | the terms of this License to the maximum extent possible; and (b)
226 | describe the limitations and the code they affect. Such description must
227 | be placed in a text file included with all distributions of the Covered
228 | Software under this License. Except to the extent prohibited by statute
229 | or regulation, such description must be sufficiently detailed for a
230 | recipient of ordinary skill to be able to understand it.
231 | 
232 | 5. Termination
233 | --------------
234 | 
235 | 5.1. The rights granted under this License will terminate automatically
236 | if You fail to comply with any of its terms. However, if You become
237 | compliant, then the rights granted under this License from a particular
238 | Contributor are reinstated (a) provisionally, unless and until such
239 | Contributor explicitly and finally terminates Your grants, and (b) on an
240 | ongoing basis, if such Contributor fails to notify You of the
241 | non-compliance by some reasonable means prior to 60 days after You have
242 | come back into compliance. Moreover, Your grants from a particular
243 | Contributor are reinstated on an ongoing basis if such Contributor
244 | notifies You of the non-compliance by some reasonable means, this is the
245 | first time You have received notice of non-compliance with this License
246 | from such Contributor, and You become compliant prior to 30 days after
247 | Your receipt of the notice.
248 | 
249 | 5.2. If You initiate litigation against any entity by asserting a patent
250 | infringement claim (excluding declaratory judgment actions,
251 | counter-claims, and cross-claims) alleging that a Contributor Version
252 | directly or indirectly infringes any patent, then the rights granted to
253 | You by any and all Contributors for the Covered Software under Section
254 | 2.1 of this License shall terminate.
255 | 
256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all
257 | end user license agreements (excluding distributors and resellers) which
258 | have been validly granted by You or Your distributors under this License
259 | prior to termination shall survive termination.
260 | 
261 | ************************************************************************
262 | *                                                                      *
263 | *  6. Disclaimer of Warranty                                           *
264 | *  -------------------------                                           *
265 | *                                                                      *
266 | *  Covered Software is provided under this License on an "as is"       *
267 | *  basis, without warranty of any kind, either expressed, implied, or  *
268 | *  statutory, including, without limitation, warranties that the       *
269 | *  Covered Software is free of defects, merchantable, fit for a        *
270 | *  particular purpose or non-infringing. The entire risk as to the     *
271 | *  quality and performance of the Covered Software is with You.        *
272 | *  Should any Covered Software prove defective in any respect, You     *
273 | *  (not any Contributor) assume the cost of any necessary servicing,   *
274 | *  repair, or correction. This disclaimer of warranty constitutes an   *
275 | *  essential part of this License. No use of any Covered Software is   *
276 | *  authorized under this License except under this disclaimer.         *
277 | *                                                                      *
278 | ************************************************************************
279 | 
280 | ************************************************************************
281 | *                                                                      *
282 | *  7. Limitation of Liability                                          *
283 | *  --------------------------                                          *
284 | *                                                                      *
285 | *  Under no circumstances and under no legal theory, whether tort      *
286 | *  (including negligence), contract, or otherwise, shall any           *
287 | *  Contributor, or anyone who distributes Covered Software as          *
288 | *  permitted above, be liable to You for any direct, indirect,         *
289 | *  special, incidental, or consequential damages of any character      *
290 | *  including, without limitation, damages for lost profits, loss of    *
291 | *  goodwill, work stoppage, computer failure or malfunction, or any    *
292 | *  and all other commercial damages or losses, even if such party      *
293 | *  shall have been informed of the possibility of such damages. This   *
294 | *  limitation of liability shall not apply to liability for death or   *
295 | *  personal injury resulting from such party's negligence to the       *
296 | *  extent applicable law prohibits such limitation. Some               *
297 | *  jurisdictions do not allow the exclusion or limitation of           *
298 | *  incidental or consequential damages, so this exclusion and          *
299 | *  limitation may not apply to You.                                    *
300 | *                                                                      *
301 | ************************************************************************
302 | 
303 | 8. Litigation
304 | -------------
305 | 
306 | Any litigation relating to this License may be brought only in the
307 | courts of a jurisdiction where the defendant maintains its principal
308 | place of business and such litigation shall be governed by laws of that
309 | jurisdiction, without reference to its conflict-of-law provisions.
310 | Nothing in this Section shall prevent a party's ability to bring
311 | cross-claims or counter-claims.
312 | 
313 | 9. Miscellaneous
314 | ----------------
315 | 
316 | This License represents the complete agreement concerning the subject
317 | matter hereof. If any provision of this License is held to be
318 | unenforceable, such provision shall be reformed only to the extent
319 | necessary to make it enforceable. Any law or regulation which provides
320 | that the language of a contract shall be construed against the drafter
321 | shall not be used to construe this License against a Contributor.
322 | 
323 | 10. Versions of the License
324 | ---------------------------
325 | 
326 | 10.1. New Versions
327 | 
328 | Mozilla Foundation is the license steward. Except as provided in Section
329 | 10.3, no one other than the license steward has the right to modify or
330 | publish new versions of this License. Each version will be given a
331 | distinguishing version number.
332 | 
333 | 10.2. Effect of New Versions
334 | 
335 | You may distribute the Covered Software under the terms of the version
336 | of the License under which You originally received the Covered Software,
337 | or under the terms of any subsequent version published by the license
338 | steward.
339 | 
340 | 10.3. Modified Versions
341 | 
342 | If you create software not governed by this License, and you want to
343 | create a new license for such software, you may create and use a
344 | modified version of this License if you rename the license and remove
345 | any references to the name of the license steward (except to note that
346 | such modified license differs from this License).
347 | 
348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary
349 | Licenses
350 | 
351 | If You choose to distribute Source Code Form that is Incompatible With
352 | Secondary Licenses under the terms of this version of the License, the
353 | notice described in Exhibit B of this License must be attached.
354 | 
355 | Exhibit A - Source Code Form License Notice
356 | -------------------------------------------
357 | 
358 |   This Source Code Form is subject to the terms of the Mozilla Public
359 |   License, v. 2.0. If a copy of the MPL was not distributed with this
360 |   file, You can obtain one at http://mozilla.org/MPL/2.0/.
361 | 
362 | If it is not possible or desirable to put the notice in a particular
363 | file, then You may include the notice in a location (such as a LICENSE
364 | file in a relevant directory) where a recipient would be likely to look
365 | for such a notice.
366 | 
367 | You may add additional accurate notices of copyright ownership.
368 | 
369 | Exhibit B - "Incompatible With Secondary Licenses" Notice
370 | ---------------------------------------------------------
371 | 
372 |   This Source Code Form is "Incompatible With Secondary Licenses", as
373 |   defined by the Mozilla Public License, v. 2.0.
374 | 


--------------------------------------------------------------------------------
/src/templates/panel_form.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <title>popupmenu</title>
  3 | <form>
  4 | 	<div role=tablist>
  5 | 		<button type=button class=ytp-button id=yt-lcf-panel-tabbutton-0 role=tab aria-controls=yt-lcf-panel-tabpanel-0 aria-selected=true data-i18n=displayTab></button>
  6 | 		<button type=button class=ytp-button id=yt-lcf-panel-tabbutton-1 role=tab aria-controls=yt-lcf-panel-tabpanel-1 aria-selected=false data-i18n=byTypeTab></button>
  7 | 		<button type=button class=ytp-button id=yt-lcf-panel-tabbutton-2 role=tab aria-controls=yt-lcf-panel-tabpanel-2 aria-selected=false data-i18n=mutedWordsTab></button>
  8 | 		<button type=button class=ytp-button id=yt-lcf-panel-tabbutton-3 role=tab aria-controls=yt-lcf-panel-tabpanel-3 aria-selected=false data-i18n=userDefinedCssTab></button>
  9 | 		<button type=button class=ytp-button id=yt-lcf-panel-tabbutton-4 role=tab aria-controls=yt-lcf-panel-tabpanel-4 aria-selected=false data-i18n=othersTab></button>
 10 | 	</div>
 11 | 	<div class=ytp-sfn-content id=yt-lcf-panel-tabpanel-0 role=tabpanel aria-labelledby=yt-lcf-panel-tabbutton-0>
 12 | 		<div>
 13 | 			<div data-i18n=animationDuration></div>
 14 | 			<div>
 15 | 				<label>
 16 | 					<input type=number class=styles name=animation_duration min=1 step=0.1 data-unit=s data-size=5 value=8>
 17 | 					s
 18 | 				</label>
 19 | 				/
 20 | 				<input type=checkbox name=speed>
 21 | 				<label>
 22 | 					<input type=number name=px_per_sec min=1 data-unit=px/s data-size=5 value=400>
 23 | 					<span>px/s</span>
 24 | 				</label>
 25 | 			</div>
 26 | 			<div></div>
 27 | 		</div>
 28 | 		<div>
 29 | 			<div data-i18n=fontSize></div>
 30 | 			<div>
 31 | 				<label>
 32 | 					<input type=number class=styles name=font_size min=12 data-unit=px data-size=3>
 33 | 					px
 34 | 				</label>
 35 | 				/
 36 | 				<input type=checkbox name=lines>
 37 | 				<label>
 38 | 					<input type=number name=number_of_lines min=6 data-size=3 value=20>
 39 | 					<span data-i18n=lines></span>
 40 | 				</label>
 41 | 				<select name=type_of_lines>
 42 | 					<option value=0 data-i18n=typeOfLines_0>fixed</option>
 43 | 					<option value=1 data-i18n=typeOfLines_1>max</option>
 44 | 					<option value=2 data-i18n=typeOfLines_2>min</option>
 45 | 				</select>
 46 | 				<span>▼</span>
 47 | 			</div>
 48 | 		</div>
 49 | 		<div>
 50 | 			<div data-i18n=lineHeight></div>
 51 | 			<div>
 52 | 				<input type=number class=styles name=line_height min=1 step=0.05>
 53 | 			</div>
 54 | 		</div>
 55 | 		<div>
 56 | 			<div data-i18n=fontFamily_fontWeight></div>
 57 | 			<div>
 58 | 				<input type=text class=styles name=font_family>
 59 | 				<button type=button id=font_helper class=ytp-button>[?]</button>
 60 | 				/
 61 | 				<input type=number class=styles name=font_weight min=100 max=900 step=100 data-size=5>
 62 | 			</div>
 63 | 		</div>
 64 | 		<div>
 65 | 			<div data-i18n=strokeStyle></div>
 66 | 			<div>
 67 | 				<label>
 68 | 					<input type=color name=stroke_color>
 69 | 				</label>
 70 | 				/
 71 | 				<label>
 72 | 					<span data-i18n=strokeOffset></span>
 73 | 					<input type=number class=styles name=stroke_offset min=0 step=0.1 data-unit=px data-size=3>
 74 | 					px
 75 | 				</label>
 76 | 				/
 77 | 				<label>
 78 | 					<span data-i18n=strokeBlur></span>
 79 | 					<input type=number class=styles name=stroke_blur min=0 step=0.1 data-unit=px data-size=3>
 80 | 					px
 81 | 				</label>
 82 | 			</div>
 83 | 		</div>
 84 | 		<div>
 85 | 			<div data-i18n=layerOpacity></div>
 86 | 			<div>
 87 | 				<span data-i18n=opacity_0></span>
 88 | 				<input type=range class=styles name=layer_opacity min=0 max=1 step=0.05>
 89 | 				<span data-i18n=opacity_1></span>
 90 | 			</div>
 91 | 		</div>
 92 | 		<div>
 93 | 			<div data-i18n=backgroundOpacity></div>
 94 | 			<div>
 95 | 				<span data-i18n=opacity_0></span>
 96 | 				<input type=range class=styles name=background_opacity min=0 max=1 step=0.05>
 97 | 				<span data-i18n=opacity_1></span>
 98 | 			</div>
 99 | 		</div>
100 | 		<div>
101 | 			<div data-i18n=maxWidth_wordWrap></div>
102 | 			<div>
103 | 				<label>
104 | 					<input type=number class=styles name=max_width min=50 data-unit=% data-size=8>
105 | 					<span>%</span>
106 | 				</label>
107 | 				/
108 | 				<select name=wrap>
109 | 					<option value=0 data-i18n=wordWrap_0>none</option>
110 | 					<option value=1 data-i18n=wordWrap_1>normal</option>
111 | 					<option value=2 data-i18n=wordWrap_2>auto</option>
112 | 				</select>
113 | 				▼
114 | 			</div>
115 | 		</div>
116 | 		<div>
117 | 			<div data-i18n=displayLimit></div>
118 | 			<div>
119 | 				<input type=number class=others name=limit_number min=1 data-size=8>
120 | 				<label>
121 | 					<input type=checkbox name=unlimited>
122 | 					<span data-i18n=unlimited></span>
123 | 				</label>
124 | 			</div>
125 | 		</div>
126 | 		<div hidden>
127 | 			<div data-i18n=containerLimit></div>
128 | 			<div>
129 | 				<input type=number class=others name=container_limit_number min=1 data-size=8>
130 | 				<label>
131 | 					<input type=checkbox name=container_unlimited>
132 | 					<span data-i18n=unlimited></span>
133 | 				</label>
134 | 			</div>
135 | 		</div>
136 | 		<div>
137 | 			<div data-i18n=simultaneousMessage></div>
138 | 			<div>
139 | 				<select name=simultaneous>
140 | 					<option value=0 data-i18n=simultaneousMessage_0>all</option>
141 | 					<option value=1 data-i18n=simultaneousMessage_1>first</option>
142 | 					<option value=2 data-i18n=simultaneousMessage_2>merge</option>
143 | 					<option value=3 data-i18n=simultaneousMessage_3>last_merge</option>
144 | 				</select>
145 | 				▼
146 | 			</div>
147 | 		</div>
148 | 		<div>
149 | 			<div data-i18n=emojiExpression></div>
150 | 			<div>
151 | 				<select name=emoji>
152 | 					<option value=0 data-i18n=emojiExpression_0>none</option>
153 | 					<option value=1 data-i18n=emojiExpression_1>all</option>
154 | 					<option value=2 data-i18n=emojiExpression_2>label</option>
155 | 					<option value=3 data-i18n=emojiExpression_3>shortcut</option>
156 | 				</select>
157 | 				▼
158 | 			</div>
159 | 		</div>
160 | 		<div>
161 | 			<div data-i18n=overlapping></div>
162 | 			<div>
163 | 				<label>
164 | 					<input type=checkbox name=overlapping value=0>
165 | 					<span data-i18n=overlapping_transparent></span>
166 | 				</label>
167 | 				<label>
168 | 					<input type=checkbox name=overlapping value=1>
169 | 					<span data-i18n=overlapping_translate></span>
170 | 				</label>
171 | 			</div>
172 | 		</div>
173 | 		<div>
174 | 			<div data-i18n=direction></div>
175 | 			<div>
176 | 				<label>
177 | 					<input type=checkbox name=direction value=0>
178 | 					<span data-i18n=direction_bottom_to_top></span>
179 | 				</label>
180 | 				<label>
181 | 					<input type=checkbox name=direction value=1>
182 | 					<span data-i18n=direction_left_to_right></span>
183 | 				</label>
184 | 			</div>
185 | 		</div>
186 | 		<div>
187 | 			<div data-i18n=layerCSS></div>
188 | 			<div>
189 | 				<input type=text name=layer_css placeholder="property: value;" style=width:20.5em data-lang=text/css>
190 | 				<br>
191 | 				<button type=button id=layer_resize_helper class data-i18n-title=resizeLayer data-i18n=resizeLayer></button>
192 | 			</div>
193 | 		</div>
194 | 	</div>
195 | 	<div class=ytp-sfn-content id=yt-lcf-panel-tabpanel-1 role=tabpanel aria-labelledby=yt-lcf-panel-tabbutton-1 hidden>
196 | 		<div>
197 | 			<div data-i18n=normal></div>
198 | 			<div>
199 | 				<div>
200 | 					<div>
201 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
202 | 							<input type=checkbox name=normal_display value=photo>
203 | 							<svg viewBox="-8 -8 16 16">
204 | 								<g id="yt-lcf-photo">
205 | 									<circle r="7"/>
206 | 									<ellipse rx="2.5" ry="3.5" cy="-1"/>
207 | 									<ellipse rx="4" ry="2" cy="4"/>
208 | 								</g>
209 | 							</svg>
210 | 						</label>
211 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
212 | 							<input type=checkbox name=normal_display value=name>
213 | 							<span data-i18n=display_authorName></span>
214 | 						</label>
215 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
216 | 							<input type=checkbox name=normal_display value=message>
217 | 							<span data-i18n=display_chatMessage></span>
218 | 						</label>
219 | 					</div>
220 | 					<div>
221 | 						<label data-i18n-title=tooltip_customColor>
222 | 							<input type=checkbox name=normal_display value=color>
223 | 							<span data-i18n=display_customColor></span>
224 | 						</label>
225 | 						<input type=color name=normal_color>
226 | 					</div>
227 | 				</div>
228 | 				<input type=text name=normal_css placeholder="property: value;" data-lang=text/css>
229 | 			</div>
230 | 		</div>
231 | 		<div>
232 | 			<div data-i18n=member></div>
233 | 			<div>
234 | 				<div>
235 | 					<div>
236 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
237 | 							<input type=checkbox name=member_display value=photo>
238 | 							<svg viewBox="-8 -8 16 16">
239 | 								<use xlink:href="#yt-lcf-photo" />
240 | 							</svg>
241 | 						</label>
242 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
243 | 							<input type=checkbox name=member_display value=name>
244 | 							<span data-i18n=display_authorName></span>
245 | 						</label>
246 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
247 | 							<input type=checkbox name=member_display value=message>
248 | 							<span data-i18n=display_chatMessage></span>
249 | 						</label>
250 | 					</div>
251 | 					<div>
252 | 						<label data-i18n-title=tooltip_customColor>
253 | 							<input type=checkbox name=member_display value=color>
254 | 							<span data-i18n=display_customColor></span>
255 | 						</label>
256 | 						<input type=color name=member_color>
257 | 					</div>
258 | 				</div>
259 | 				<input type=text name=member_css placeholder="property: value;" data-lang=text/css>
260 | 			</div>
261 | 		</div>
262 | 		<div>
263 | 			<div data-i18n=moderator></div>
264 | 			<div>
265 | 				<div>
266 | 					<div>
267 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
268 | 							<input type=checkbox name=moderator_display value=photo>
269 | 							<svg viewBox="-8 -8 16 16">
270 | 								<use xlink:href="#yt-lcf-photo" />
271 | 							</svg>
272 | 						</label>
273 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
274 | 							<input type=checkbox name=moderator_display value=name>
275 | 							<span data-i18n=display_authorName></span>
276 | 						</label>
277 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
278 | 							<input type=checkbox name=moderator_display value=message>
279 | 							<span data-i18n=display_chatMessage></span>
280 | 						</label>
281 | 					</div>
282 | 					<div>
283 | 						<label data-i18n-title=tooltip_customColor>
284 | 							<input type=checkbox name=moderator_display value=color>
285 | 							<span data-i18n=display_customColor></span>
286 | 						</label>
287 | 						<input type=color name=moderator_color>
288 | 					</div>
289 | 				</div>
290 | 				<input type=text name=moderator_css placeholder="property: value;" data-lang=text/css>
291 | 			</div>
292 | 		</div>
293 | 		<div>
294 | 			<div data-i18n=owner></div>
295 | 			<div>
296 | 				<div>
297 | 					<div>
298 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
299 | 							<input type=checkbox name=owner_display value=photo>
300 | 							<svg viewBox="-8 -8 16 16">
301 | 								<use xlink:href="#yt-lcf-photo" />
302 | 							</svg>
303 | 						</label>
304 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
305 | 							<input type=checkbox name=owner_display value=name>
306 | 							<span data-i18n=display_authorName></span>
307 | 						</label>
308 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
309 | 							<input type=checkbox name=owner_display value=message>
310 | 							<span data-i18n=display_chatMessage></span>
311 | 						</label>
312 | 					</div>
313 | 					<div>
314 | 						<label data-i18n-title=tooltip_customColor>
315 | 							<input type=checkbox name=owner_display value=color>
316 | 							<span data-i18n=display_customColor></span>
317 | 						</label>
318 | 						<input type=color name=owner_color>
319 | 					</div>
320 | 				</div>
321 | 				<input type=text name=owner_css placeholder="property: value;" data-lang=text/css>
322 | 			</div>
323 | 		</div>
324 | 		<div>
325 | 			<div data-i18n=verified></div>
326 | 			<div>
327 | 				<div>
328 | 					<div>
329 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
330 | 							<input type=checkbox name=verified_display value=photo>
331 | 							<svg viewBox="-8 -8 16 16">
332 | 								<use xlink:href="#yt-lcf-photo" />
333 | 							</svg>
334 | 						</label>
335 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
336 | 							<input type=checkbox name=verified_display value=name>
337 | 							<span data-i18n=display_authorName></span>
338 | 						</label>
339 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
340 | 							<input type=checkbox name=verified_display value=message>
341 | 							<span data-i18n=display_chatMessage></span>
342 | 						</label>
343 | 					</div>
344 | 					<div>
345 | 						<label data-i18n-title=tooltip_customColor>
346 | 							<input type=checkbox name=verified_display value=color>
347 | 							<span data-i18n=display_customColor></span>
348 | 						</label>
349 | 						<input type=color name=verified_color>
350 | 					</div>
351 | 				</div>
352 | 				<input type=text name=verified_css placeholder="property: value;" data-lang=text/css>
353 | 			</div>
354 | 		</div>
355 | 		<div>
356 | 			<div data-i18n=you></div>
357 | 			<div>
358 | 				<div>
359 | 					<div>
360 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
361 | 							<input type=checkbox name=you_display value=photo>
362 | 							<svg viewBox="-8 -8 16 16">
363 | 								<use xlink:href="#yt-lcf-photo" />
364 | 							</svg>
365 | 						</label>
366 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
367 | 							<input type=checkbox name=you_display value=name>
368 | 							<span data-i18n=display_authorName></span>
369 | 						</label>
370 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
371 | 							<input type=checkbox name=you_display value=message>
372 | 							<span data-i18n=display_chatMessage></span>
373 | 						</label>
374 | 					</div>
375 | 					<div>
376 | 						<label data-i18n-title=tooltip_customColor>
377 | 							<input type=checkbox name=you_display value=color>
378 | 							<span data-i18n=display_customColor></span>
379 | 						</label>
380 | 						<input type=color name=you_color>
381 | 					</div>
382 | 				</div>
383 | 				<input type=text name=you_css placeholder="property: value;" data-lang=text/css>
384 | 			</div>
385 | 		</div>
386 | 		<div>
387 | 			<div data-i18n=superchat></div>
388 | 			<div>
389 | 				<div>
390 | 					<div class=superchat>
391 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
392 | 							<input type=checkbox name=paid_message_display value=photo>
393 | 							<svg viewBox="-8 -8 16 16">
394 | 								<use xlink:href="#yt-lcf-photo" />
395 | 							</svg>
396 | 						</label>
397 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
398 | 							<input type=checkbox name=paid_message_display value=name>
399 | 							<span data-i18n=display_authorName></span>
400 | 						</label>
401 | 						<label class="toggle amount" data-i18n-title=tooltip_purchaseAmount>
402 | 							<input type=checkbox name=paid_message_display value=amount>
403 | 							<span data-i18n=display_purchaseAmount></span>
404 | 						</label>
405 | 						<br>
406 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
407 | 							<input type=checkbox name=paid_message_display value=message>
408 | 							<span data-i18n=display_chatMessage></span>
409 | 						</label>
410 | 					</div>
411 | 					<div>
412 | 						<label data-i18n-title=tooltip_customColor>
413 | 							<input type=checkbox name=paid_message_display value=color>
414 | 							<span data-i18n=display_customColor></span>
415 | 						</label>
416 | 						<input type=color name=paid_message_color>
417 | 					</div>
418 | 				</div>
419 | 				<input type=text name=paid_message_css placeholder="property: value;" data-lang=text/css>
420 | 			</div>
421 | 		</div>
422 | 		<div>
423 | 			<div data-i18n=sticker></div>
424 | 			<div>
425 | 				<div>
426 | 					<div class=superchat>
427 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
428 | 							<input type=checkbox name=paid_sticker_display value=photo>
429 | 							<svg viewBox="-8 -8 16 16">
430 | 								<use xlink:href="#yt-lcf-photo" />
431 | 							</svg>
432 | 						</label>
433 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
434 | 							<input type=checkbox name=paid_sticker_display value=name>
435 | 							<span data-i18n=display_authorName></span>
436 | 						</label>
437 | 						<label class="toggle amount" data-i18n-title=tooltip_purchaseAmount>
438 | 							<input type=checkbox name=paid_sticker_display value=amount>
439 | 							<span data-i18n=display_purchaseAmount></span>
440 | 						</label>
441 | 						<br>
442 | 						<label class="toggle body" data-i18n-title=tooltip_sticker>
443 | 							<input type=checkbox name=paid_sticker_display value=sticker>
444 | 							<span data-i18n=display_sticker></span>
445 | 						</label>
446 | 					</div>
447 | 					<div>
448 | 						<label data-i18n-title=tooltip_stickerSize style="padding:0 0 0 4px">
449 | 							<span data-i18n=display_stickerSize></span>
450 | 							: x
451 | 							<input type=number class=styles name=sticker_size min=1 max=10 step=0.1 data-size=5 data-unit=em>
452 | 						</label>
453 | 					</div>
454 | 				</div>
455 | 			</div>
456 | 		</div>
457 | 		<div>
458 | 			<div data-i18n=membership></div>
459 | 			<div>
460 | 				<div>
461 | 					<div class=superchat>
462 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
463 | 							<input type=checkbox name=membership_display value=photo>
464 | 							<svg viewBox="-8 -8 16 16">
465 | 								<use xlink:href="#yt-lcf-photo" />
466 | 							</svg>
467 | 						</label>
468 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
469 | 							<input type=checkbox name=membership_display value=name>
470 | 							<span data-i18n=display_authorName></span>
471 | 						</label>
472 | 						<label class="toggle body" data-i18n-title=tooltip_membershipMessage>
473 | 							<input type=checkbox name=membership_display value=message>
474 | 							<span data-i18n=display_membershipMessage></span>
475 | 						</label>
476 | 					</div>
477 | 					<div>
478 | 						<label data-i18n-title=tooltip_customColor>
479 | 							<input type=checkbox name=membership_display value=color>
480 | 							<span data-i18n=display_customColor></span>
481 | 						</label>
482 | 						<input type=color name=membership_color>
483 | 					</div>
484 | 				</div>
485 | 				<input type=text name=membership_css placeholder="property: value;" data-lang=text/css>
486 | 			</div>
487 | 		</div>
488 | 		<div>
489 | 			<div data-i18n=milestone></div>
490 | 			<div>
491 | 				<div>
492 | 					<div class=superchat>
493 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
494 | 							<input type=checkbox name=milestone_display value=photo>
495 | 							<svg viewBox="-8 -8 16 16">
496 | 								<use xlink:href="#yt-lcf-photo" />
497 | 							</svg>
498 | 						</label>
499 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
500 | 							<input type=checkbox name=milestone_display value=name>
501 | 							<span data-i18n=display_authorName></span>
502 | 						</label>
503 | 						<label class="toggle amount" data-i18n-title=tooltip_milestoneMonths>
504 | 							<input type=checkbox name=milestone_display value=months>
505 | 							<span data-i18n=display_milestoneMonths></span>
506 | 						</label>
507 | 						<br>
508 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
509 | 							<input type=checkbox name=milestone_display value=message>
510 | 							<span data-i18n=display_chatMessage></span>
511 | 						</label>
512 | 					</div>
513 | 					<div>
514 | 						<label data-i18n-title=tooltip_customColor>
515 | 							<input type=checkbox name=milestone_display value=color>
516 | 							<span data-i18n=display_customColor></span>
517 | 						</label>
518 | 						<input type=color name=milestone_color>
519 | 					</div>
520 | 				</div>
521 | 				<input type=text name=milestone_css placeholder="property: value;" data-lang=text/css>
522 | 			</div>
523 | 		</div>
524 | 	</div>
525 | 	<div class=ytp-sfn-content id=yt-lcf-panel-tabpanel-2 role=tabpanel aria-labelledby=yt-lcf-panel-tabbutton-2 hidden>
526 | 		<div>
527 | 			<div data-i18n=mutedWordsMode></div>
528 | 			<div>
529 | 				<select name=muted_words_mode>
530 | 					<option value=0 data-i18n=mutedWordsMode_0>none</option>
531 | 					<option value=1 data-i18n=mutedWordsMode_1>all</option>
532 | 					<option value=2 data-i18n=mutedWordsMode_2>word</option>
533 | 					<option value=3 data-i18n=mutedWordsMode_3>char</option>
534 | 				</select>
535 | 				▼
536 | 			</div>
537 | 		</div>
538 | 		<div>
539 | 			<div data-i18n=mutedWordsReplacement></div>
540 | 			<div>
541 | 				<input type=text name=muted_words_replacement style=width:20.5em data-i18n-placeholder=placeholder_mutedWordsReplacement>
542 | 			</div>
543 | 		</div>
544 | 		<div>
545 | 			<div data-i18n=mutedWordsGrammer></div>
546 | 			<div>
547 | 				<label>
548 | 					<input type=checkbox name=muted_words_regexp>
549 | 					<span data-i18n=regexp></span>
550 | 				</label>
551 | 			</div>
552 | 		</div>
553 | 		<textarea name=muted_words_list rows=20 style=width:32em data-i18n-placeholder=placeholder_mutedWordsList></textarea>
554 | 	</div>
555 | 	<div class=ytp-sfn-content id=yt-lcf-panel-tabpanel-3 role=tabpanel aria-labelledby=yt-lcf-panel-tabbutton-3 hidden>
556 | 		<div>
557 | 			<div data-i18n=user_defined_css_shortcut></div>
558 | 			<div>
559 | 				<button type=button id=user_css_helper class data-i18n-title=addUserStyle data-i18n=addUserStyle></button>
560 | 			</div>
561 | 		</div>
562 | 		<textarea name=user_defined_css rows=30 placeholder=".name::after {&#x0a;  content: '\a';&#x0a;}" style=width:32em data-lang=text/css></textarea>
563 | 	</div>
564 | 	<div class=ytp-sfn-content id=yt-lcf-panel-tabpanel-4 role=tabpanel aria-labelledby=yt-lcf-panel-tabbutton-4 hidden>
565 | 		<div>
566 | 			<div data-i18n=translation></div>
567 | 			<div>
568 | 				<span data-i18n=targetLanguage></span>
569 | 				<select name=translation>
570 | 					<option value=0 data-i18n=disabled>disabled</option>
571 | 				</select>
572 | 				▼
573 | 				<br>
574 | 				<span id=language_exception_marker data-i18n=exception></span>
575 | 				<br>
576 | 				<span data-i18n=addableByBrowserLanguageSettings></span>
577 | 				<br>
578 | 				<span data-i18n=traslationTiming></span>
579 | 				<select name=translation_timing>
580 | 					<option value=0 data-i18n=translation_eagerMode></option>
581 | 					<option value=1 data-i18n=translation_lazyMode></option>
582 | 				</select>
583 | 				▼
584 | 				<br>
585 | 				<label>
586 | 					<input type=checkbox name=prefix_lang>
587 | 					<span data-i18n=prefixOriginalLanguage></span>
588 | 				</label>
589 | 				<br>
590 | 				<label>
591 | 					<input type=checkbox name=suffix_original>
592 | 					<span data-i18n=suffixOriginalMessage></span>
593 | 				</label>
594 | 			</div>
595 | 			<div></div>
596 | 		</div>
597 | 		<div>
598 | 			<div data-i18n=timeshift></div>
599 | 			<div>
600 | 				<input type=number name=time_shift step=0.1 data-size=5>
601 | 				s
602 | 				<span data-i18n=timeshift_note></span>
603 | 			</div>
604 | 		</div>
605 | 		<div>
606 | 			<div></div>
607 | 			<div>
608 | 				<button type=button id=ytlcf-config-others class data-i18n-title=otherConfig>
609 | 					<span data-i18n=otherConfig></span>
610 | 					/
611 | 					<span data-i18n=aboutAddon></span>
612 | 				</button>
613 | 			</div>
614 | 		</div>
615 | 	</div>
616 | </form>
617 | <dialog id=ytlcf-dialog-font_helper class=ytp-sfn>
618 | 	<form method=dialog>
619 | 		<ol></ol>
620 | 		<div class="top-level-buttons ytd-menu-renderer">
621 | 			<select>
622 | 				<option value=sans-serif selected data-i18n=font_helper_select>sans-serif</option>
623 | 			</select>
624 | 			<button type=button data-i18n=add data-i18n-title=add>add</button>
625 | 		</div>
626 | 		<div class="top-level-buttons ytd-menu-renderer" style=margin-top:12px>
627 | 			<button data-i18n=confirm data-i18n-title=confirm>confirm</button>
628 | 			<button type=button data-i18n=cancel data-i18n-title=cancel>cancel</button>
629 | 		</div>
630 | 	</form>
631 | </dialog>
632 | <dialog id=ytlcf-dialog-user_css_helper class=ytp-sfn>
633 | 	<form method=dialog id=ytlcf-form-user_css_helper class=ytp-sfn-content autocomplete=off spellcheck=false>
634 | 		<div>
635 | 			<div data-i18n=label></div>
636 | 			<div>
637 | 				<input name=label type=text>
638 | 			</div>
639 | 		</div>
640 | 		<div>
641 | 			<div data-i18n=Channel_ID></div>
642 | 			<div>
643 | 				<textarea name=channel_id rows=3 required data-i18n-placeholder=placeholder_channelId data-lang=text/plain></textarea>
644 | 			</div>
645 | 		</div>
646 | 		<div>
647 | 			<div data-i18n=displayStyle></div>
648 | 			<div>
649 | 				<div>
650 | 					<div>
651 | 						<label class="toggle photo" data-i18n-title=tooltip_authorPhoto>
652 | 							<input type=checkbox name=this_display_ value=photo checked>
653 | 							<svg viewBox="-8 -8 16 16">
654 | 								<use xlink:href="#yt-lcf-photo" />
655 | 							</svg>
656 | 						</label>
657 | 						<label class="toggle name" data-i18n-title=tooltip_authorName>
658 | 							<input type=checkbox name=this_display_ value=name checked>
659 | 							<span data-i18n=display_authorName></span>
660 | 						</label>
661 | 						<label class="toggle body" data-i18n-title=tooltip_chatMessage>
662 | 							<input type=checkbox name=this_display_ value=body checked>
663 | 							<span data-i18n=display_chatMessage></span>
664 | 						</label>
665 | 					</div>
666 | 					<div>
667 | 						<label data-i18n-title=tooltip_customColor>
668 | 							<input type=checkbox name=this_color_display_ value=color checked>
669 | 							<span data-i18n=display_customColor></span>
670 | 						</label>
671 | 						<input type=color name=this_color_ value=#ffffff>
672 | 					</div>
673 | 				</div>
674 | 			</div>
675 | 		</div>
676 | 		<div>
677 | 			<div data-i18n=fontFactor></div>
678 | 			<div>
679 | 				x
680 | 				<input name=font_factor type=number step=0.1 min=0.1 value=1 required  data-size=5>
681 | 			</div>
682 | 			<div></div>
683 | 		</div>
684 | 	</form>
685 | 	<textarea id=ytlcf-textarea-user_css_helper form=ytlcf-form-user_css_helper readonly rows=9 data-i18n-placeholder=placeholder_userStyleTextArea data-lang=text/css></textarea>
686 | 	<div class="top-level-buttons ytd-menu-renderer" style=margin-top:12px>
687 | 		<button form=ytlcf-form-user_css_helper class data-i18n=add>add</button>
688 | 		<button type=button class data-i18n=cancel>cancel</button>
689 | 	</div>
690 | </dialog>


--------------------------------------------------------------------------------