Greasy Fork is available in English.

Flow Youtube Chat

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

< Flow Youtube Chatについてのフィードバック

レート:良 – スクリプトは良好に動作する

§
投稿日: 2023/04/15

個人的に気になっているだけですが、コントロールバーに追加される「チャットを非表示にする」ボタンを縦方向にも中央に表示するようにスタイルを書き換えています。

ソースコードは以下になるのでしょうか、気が向いたら適用してもらえると嬉しいです。
一応720p、FHD、4Kの画面でアイコンの高さがそろっていることは確認してあります。

flow-youtube-chat/src/toggleChatButton/index.ts

export default (setConfig: UserConfigSetter): RootComponent<State> => pipe(
  'button',
  makeComponent((tag) => (state: State) => pipe(
    getText(
      state.displayChats ? 'hideChats' : 'showChats',
    )(state.lang),
    (label) => h(tag, {
      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',
+        width: '48px',
+        display: 'flex',
+        alignItems: 'center',
      },
      type: 'button',
      'aria-label': label,
      title: label,
      onclick: (s: State) => pipe(
        !s.displayChats,
        (displayChats) => [
          {
            ...s,
            displayChats,
          },
          () => Z.runPromise(setConfig.displayChats(displayChats)),
        ],
      ),
    }, [
      h('svg', {
        style: {
-          width: '100%',
+          width: '36px',
        },
        viewBox: '0 0 36 36',
      }, [
        h('path', {
          class: 'chat-button-path',
          d: 'm11 12h17q1 0 1 1v9q0 1-1 1h-1v2l-4-2h-12q-1 0-1-1v-9q0-1 1-1z',
          fill: '#fff',
          'fill-opacity': state.displayChats ? '1' : '0',
          stroke: '#fff',
          'stroke-width': '2',
        }),
      ]),
    ]),
  )),
);
testFox作者
§
投稿日: 2023/04/15

フィードバックありがとうございます!

最新版(1.16.1)にて、ご要望の変更を追加いたしました。皆様のご協力に感謝いたします。

返信を投稿

返信を投稿するにはログインしてください。