Flow Youtube Chat

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

< Feedback on Flow Youtube Chat

Review: Good - script works

§
Posted: 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',
        }),
      ]),
    ]),
  )),
);
testFoxAuthor
§
Posted: 2023-04-15

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

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

Post reply

Sign in to post a reply.