Flow Youtube Chat Fix

Youtubeのチャットをニコニコ風に画面上へ流す(再アップ) Make youtube chats move in danmaku-style.

Author
@Ginoa AI
Daily installs
2
Total installs
937
Ratings
1 0 0
Version
1.15.17.2
Created
2022-06-17
Updated
2022-11-22
License
AGPL-3.0-or-later
Applies to

本家：Flow Youtube Chat（emble jp）https://greasyfork.org/ja/scripts/377491-flow-youtube-chat/
再Up版：https://greasyfork.org/ja/scripts/411442-flow-youtube-chat/
※当スクリプトは再Up版のバージョン1.15.17を元に作成しています。
※当スクリプトについてのディスカッションはココで行われています。

既に殆どの修正が再Up版で行われているので、以下の変更点を求めていない場合は再Up版の使用を推奨します。

主な変更点
・設定ボタンのデザインの変更
・チャット表示/非表示ボタンの位置を変更

変更箇所
5. 2263行目、上（変更前）から下（変更後）へ
　　設定ボタンの色を白色に変更

mainCss = function_pipe(
	() => document.createElement("style"),
	IO_chainFirst(x => () => {
		x.innerHTML =
			".fyc_chat {\n  line-height: 1;\n  z-index: 30;\n  position: absolute;\n  user-select: none;\n  white-space: nowrap;\n  will-change: transform;\n}\n.fyc_button {\n  display: inline-block;\n  border-style: none;\n  z-index: 4;\n  font-weight: 500;\n  color: var(--yt-spec-text-secondary);\n}"
	})
),
mainCss = function_pipe(
	() => document.createElement("style"),
	IO_chainFirst(x => () => {
		x.innerHTML =
			".fyc_chat {\n  line-height: 1;\n  z-index: 30;\n  position: absolute;\n  user-select: none;\n  white-space: nowrap;\n  will-change: transform;\n}\n.fyc_button {\n  display: inline-block;\n  border-style: none;\n  z-index: 4;\n  font-weight: 500;\n  color: #fff;\n}"
	})
),
6. 4812行目、上（変更前）から下（変更後）へ
　　チャット表示/非表示ボタンの場所をわずかに変更
class: "ytp-button",
style: {
	background: "none",
	border: "none",
	cursor: "pointer",
	float: "left",
	fontSize: "1em",
	height: "4em",
	outline: "none",
	overflow: "visible",
	padding: "0 0 0em",
	position: "relative",
	width: "3em",
},
class: "ytp-button",
style: {
	float: "left",
	margin: "2px 5px 0px 0px",
},
7. 4624行目、上（変更前）から下（変更後）へ
　　設定ボタンをYoutubeのスタイルに合わせる
"button",
{
	class: "fyc_button",
	style: {
		background: "rgba(0,0,0,0)",
		marginLeft: "10px",
		whiteSpace: "nowrap",
	},
	onclick: toggle,
},
[
	h(
		"svg",
		{
			preserveAspectRatio: "xMidYMid meet",
			viewBox: "0 0 640 640",
			width: "15",
			height: "15",
			style: { position: "relative", top: "1px" },
		},
"button",
{
	class: "fyc_button yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m",
	style: {
		width: "70px",
		padding: "0",
		marginLeft: "8px",
		whiteSpace: "nowrap",
	},
	onclick: toggle,
},
[
	h(
		"svg",
		{
			preserveAspectRatio: "xMidYMid meet",
			viewBox: "0 0 640 640",
			width: "15",
			height: "15",
			style: { position: "relative", top: "2px" },
		},
8. 4662行目、上（変更前）から下（変更後）へ
　　設定ボタンをYoutubeのスタイルに合わせる
"span",
{
	style: {
		position: "relative",
		top: "-2px",
		marginLeft: "8px,",
	},
},
"span",
{
	style: {
		position: "relative",
		top: "-1px",
		marginLeft: "8px,",
	},
},