Merge branch 'dev'

.gitignore

@@ -106,3 +106,4 @@ venv.bak/
 
 .idea/
 data/database.db
+*.log*

README.md

@@ -34,7 +34,7 @@
 ### 二、公共服务器
 请优先在本地使用，使用公共服务器会有更大的弹幕延迟，而且服务器故障时可能发生直播事故
 
-* [第三方公共服务器](http://chat.bilisc.com/)
+* [公共服务器](http://chat.bilisc.com/)
 * [仅样式生成器](https://style.vtbs.moe/)
 
 ### 三、源代码版（自建服务器或在Windows以外平台）

api/chat.py

@@ -12,6 +12,7 @@ from typing import *
 import aiohttp
 import tornado.websocket
 
+import api.base
 import blivedm.blivedm as blivedm
 import config
 import models.avatar
@@ -100,6 +101,10 @@ class Room(blivedm.BLiveClient):
         self.clients: List['ChatHandler'] = []
         self.auto_translate_count = 0
 
+    async def init_room(self):
+        await super().init_room()
+        return True
+
     def stop_and_close(self):
         if self.is_running:
             future = self.stop()
@@ -246,13 +251,10 @@ class Room(blivedm.BLiveClient):
             return
         self.send_message_if(
             lambda client: client.auto_translate,
-            Command.UPDATE_TRANSLATION,
-            [
-                # 0: id
+            Command.UPDATE_TRANSLATION, make_translation_message(
                 msg_id,
-                # 1: translation
                 translation
-            ]
+            )
         )
 
 
@@ -289,6 +291,15 @@ def make_text_message(avatar_url, timestamp, author_name, author_type, content,
     ]
 
 
+def make_translation_message(msg_id, translation):
+    return [
+        # 0: id
+        msg_id,
+        # 1: translation
+        translation
+    ]
+
+
 class RoomManager:
     def __init__(self):
         self._rooms: Dict[int, Room] = {}
@@ -506,3 +517,92 @@ class ChatHandler(tornado.websocket.WebSocketHandler):
         gift_data['totalCoin'] = 1245000
         gift_data['giftName'] = '小电视飞船'
         self.send_message(Command.ADD_GIFT, gift_data)
+
+
+# noinspection PyAbstractClass
+class RoomInfoHandler(api.base.ApiHandler):
+    _host_server_list_cache = blivedm.DEFAULT_DANMAKU_SERVER_LIST
+
+    async def get(self):
+        room_id = int(self.get_query_argument('roomId'))
+        logger.info('Client %s is getting room info %d', self.request.remote_ip, room_id)
+        room_id, owner_uid = await self._get_room_info(room_id)
+        host_server_list = await self._get_server_host_list(room_id)
+        if owner_uid == 0:
+            # 缓存3分钟
+            self.set_header('Cache-Control', 'private, max-age=180')
+        else:
+            # 缓存1天
+            self.set_header('Cache-Control', 'private, max-age=86400')
+        self.write({
+            'roomId': room_id,
+            'ownerUid': owner_uid,
+            'hostServerList': host_server_list
+        })
+
+    @staticmethod
+    async def _get_room_info(room_id):
+        try:
+            async with _http_session.get(blivedm.ROOM_INIT_URL, params={'room_id': room_id}
+                                         ) as res:
+                if res.status != 200:
+                    logger.warning('room %d _get_room_info failed: %d %s', room_id,
+                                   res.status, res.reason)
+                    return room_id, 0
+                data = await res.json()
+        except aiohttp.ClientConnectionError:
+            logger.exception('room %d _get_room_info failed', room_id)
+            return room_id, 0
+
+        if data['code'] != 0:
+            logger.warning('room %d _get_room_info failed: %s', room_id, data['msg'])
+            return room_id, 0
+
+        room_info = data['data']['room_info']
+        return room_info['room_id'], room_info['uid']
+
+    @classmethod
+    async def _get_server_host_list(cls, _room_id):
+        return cls._host_server_list_cache
+
+        # 连接其他host必须要key
+        # try:
+        #     async with _http_session.get(blivedm.DANMAKU_SERVER_CONF_URL, params={'id': room_id, 'type': 0}
+        #                                  ) as res:
+        #         if res.status != 200:
+        #             logger.warning('room %d _get_server_host_list failed: %d %s', room_id,
+        #                            res.status, res.reason)
+        #             return cls._host_server_list_cache
+        #         data = await res.json()
+        # except aiohttp.ClientConnectionError:
+        #     logger.exception('room %d _get_server_host_list failed', room_id)
+        #     return cls._host_server_list_cache
+        #
+        # if data['code'] != 0:
+        #     logger.warning('room %d _get_server_host_list failed: %s', room_id, data['msg'])
+        #     return cls._host_server_list_cache
+        #
+        # host_server_list = data['data']['host_list']
+        # if not host_server_list:
+        #     logger.warning('room %d _get_server_host_list failed: host_server_list is empty')
+        #     return cls._host_server_list_cache
+        #
+        # cls._host_server_list_cache = host_server_list
+        # return host_server_list
+
+
+# noinspection PyAbstractClass
+class AvatarHandler(api.base.ApiHandler):
+    async def get(self):
+        uid = int(self.get_query_argument('uid'))
+        avatar_url = await models.avatar.get_avatar_url_or_none(uid)
+        if avatar_url is None:
+            avatar_url = models.avatar.DEFAULT_AVATAR_URL
+            # 缓存3分钟
+            self.set_header('Cache-Control', 'private, max-age=180')
+        else:
+            # 缓存1天
+            self.set_header('Cache-Control', 'private, max-age=86400')
+        self.write({
+            'avatarUrl': avatar_url
+        })

api/main.py

@@ -7,6 +7,7 @@ import config
 import update
 
 
+# noinspection PyAbstractClass
 class MainHandler(tornado.web.StaticFileHandler):
     """为了使用Vue Router的history模式，把不存在的文件请求转发到index.html"""
     async def get(self, path, include_body=True):

blivedm

@@ -1 +1 @@
-Subproject commit 4c64c1bd1e9fe634894d7b781eab1fef0e753907
+Subproject commit 3156142011c31343fb8acc0c14233c2b7ae0070f

frontend/package.json

@@ -13,6 +13,7 @@
     "downloadjs": "^1.4.7",
     "element-ui": "^2.9.1",
     "lodash": "^4.17.19",
+    "pako": "^1.0.11",
     "vue": "^2.6.10",
     "vue-i18n": "^8.11.2",
     "vue-router": "^3.0.6"

frontend/src/api/chat/ChatClientDirect.js

@@ -0,0 +1,343 @@
+import axios from 'axios'
+import {inflate} from 'pako'
+
+import {getUuid4Hex} from '@/utils'
+import * as avatar from './avatar'
+
+const HEADER_SIZE = 16
+
+// const WS_BODY_PROTOCOL_VERSION_NORMAL = 0
+// const WS_BODY_PROTOCOL_VERSION_INT = 1 // 用于心跳包
+const WS_BODY_PROTOCOL_VERSION_DEFLATE = 2
+
+// const OP_HANDSHAKE = 0
+// const OP_HANDSHAKE_REPLY = 1
+const OP_HEARTBEAT = 2
+const OP_HEARTBEAT_REPLY = 3
+// const OP_SEND_MSG = 4
+const OP_SEND_MSG_REPLY = 5
+// const OP_DISCONNECT_REPLY = 6
+const OP_AUTH = 7
+const OP_AUTH_REPLY = 8
+// const OP_RAW = 9
+// const OP_PROTO_READY = 10
+// const OP_PROTO_FINISH = 11
+// const OP_CHANGE_ROOM = 12
+// const OP_CHANGE_ROOM_REPLY = 13
+// const OP_REGISTER = 14
+// const OP_REGISTER_REPLY = 15
+// const OP_UNREGISTER = 16
+// const OP_UNREGISTER_REPLY = 17
+// B站业务自定义OP
+// const MinBusinessOp = 1000
+// const MaxBusinessOp = 10000
+
+let textEncoder = new TextEncoder()
+let textDecoder = new TextDecoder()
+
+export default class ChatClientDirect {
+  constructor (roomId) {
+    // 调用initRoom后初始化，如果失败，使用这里的默认值
+    this.roomId = roomId
+    this.roomOwnerUid = 0
+    this.hostServerList = [
+      {host: "broadcastlv.chat.bilibili.com", port: 2243, wss_port: 443, ws_port: 2244}
+    ]
+
+    this.onAddText = null
+    this.onAddGift = null
+    this.onAddMember = null
+    this.onAddSuperChat = null
+    this.onDelSuperChat = null
+    this.onUpdateTranslation = null
+
+    this.websocket = null
+    this.retryCount = 0
+    this.isDestroying = false
+    this.heartbeatTimerId = null
+  }
+
+  async start () {
+    await this.initRoom()
+    this.wsConnect()
+  }
+
+  stop () {
+    this.isDestroying = true
+    if (this.websocket) {
+      this.websocket.close()
+    }
+  }
+
+  async initRoom () {
+    let res
+    try {
+      res = (await axios.get('/api/room_info', {params: {
+        roomId: this.roomId
+      }})).data
+    } catch {
+      return
+    }
+    this.roomId = res.roomId
+    this.roomOwnerUid = res.ownerUid
+    if (res.hostServerList.length !== 0) {
+      this.hostServerList = res.hostServerList
+    }
+  }
+
+  makePacket (data, operation) {
+    let body = textEncoder.encode(JSON.stringify(data))
+    let header = new ArrayBuffer(HEADER_SIZE)
+    let headerView = new DataView(header)
+    headerView.setUint32(0, HEADER_SIZE + body.byteLength)   // pack_len
+    headerView.setUint16(4, HEADER_SIZE)                     // raw_header_size
+    headerView.setUint16(6, 1)                               // ver
+    headerView.setUint32(8, operation)                       // operation
+    headerView.setUint32(12, 1)                              // seq_id
+    return new Blob([header, body])
+  }
+
+  sendAuth () {
+    let authParams = {
+      uid: 0,
+      roomid: this.roomId,
+      protover: 2,
+      platform: 'web',
+      clientver: '1.14.3',
+      type: 2
+    }
+    this.websocket.send(this.makePacket(authParams, OP_AUTH))
+  }
+
+  wsConnect () {
+    if (this.isDestroying) {
+      return
+    }
+    let hostServer = this.hostServerList[this.retryCount % this.hostServerList.length]
+    const url = `wss://${hostServer.host}:${hostServer.wss_port}/sub`
+    this.websocket = new WebSocket(url)
+    this.websocket.binaryType = 'arraybuffer'
+    this.websocket.onopen = this.onWsOpen.bind(this)
+    this.websocket.onclose = this.onWsClose.bind(this)
+    this.websocket.onmessage = this.onWsMessage.bind(this)
+    this.heartbeatTimerId = window.setInterval(this.sendHeartbeat.bind(this), 10 * 1000)
+  }
+
+  sendHeartbeat () {
+    this.websocket.send(this.makePacket({}, OP_HEARTBEAT))
+  }
+
+  onWsOpen () {
+    this.sendAuth()
+  }
+
+  onWsClose () {
+    this.websocket = null
+    if (this.heartbeatTimerId) {
+      window.clearInterval(this.heartbeatTimerId)
+      this.heartbeatTimerId = null
+    }
+    if (this.isDestroying) {
+      return
+    }
+    window.console.log(`掉线重连中${++this.retryCount}`)
+    window.setTimeout(this.wsConnect.bind(this), 1000)
+  }
+
+  onWsMessage (event) {
+    this.retryCount = 0
+    if (!(event.data instanceof ArrayBuffer)) {
+      window.console.warn('未知的websocket消息：', event.data)
+      return
+    }
+    let data = new Uint8Array(event.data)
+    this.handlerMessage(data)
+  }
+
+  handlerMessage (data) {
+    let offset = 0
+    while (offset < data.byteLength) {
+      let dataView = new DataView(data.buffer, offset)
+      let packLen = dataView.getUint32(0)
+      // let rawHeaderSize = dataView.getUint16(4)
+      let ver = dataView.getUint16(6)
+      let operation = dataView.getUint32(8)
+      // let seqId = dataView.getUint32(12)
+      
+      switch (operation) {
+      case OP_HEARTBEAT_REPLY: {
+        // 人气值没用
+        break
+      }
+      case OP_SEND_MSG_REPLY: {
+        let body = new Uint8Array(data.buffer, offset + HEADER_SIZE, packLen - HEADER_SIZE)
+        if (ver == WS_BODY_PROTOCOL_VERSION_DEFLATE) {
+          body = inflate(body)
+          this.handlerMessage(body)
+        } else {
+          try {
+            body = JSON.parse(textDecoder.decode(body))
+            this.handlerCommand(body)
+          } catch (e) {
+            window.console.warn('body:', body)
+            throw e
+          }
+        }
+        break
+      }
+      case OP_AUTH_REPLY: {
+        this.sendHeartbeat()
+        break
+      }
+      default: {
+        let body = new Uint8Array(data.buffer, offset + HEADER_SIZE, packLen - HEADER_SIZE)
+        window.console.warn('未知包类型：operation=', operation, body)
+        break
+      }
+      }
+
+      offset += packLen
+    }
+  }
+
+  handlerCommand (command) {
+    if (command instanceof Array) {
+      for (let oneCommand of command) {
+        this.handlerCommand(oneCommand)
+      }
+      return
+    }
+
+    let cmd = command.cmd || ''
+    let pos = cmd.indexOf(':')
+    if (pos != -1) {
+      cmd = cmd.substr(0, pos)
+    }
+    let handler = COMMAND_HANDLERS[cmd]
+    if (handler) {
+      handler.call(this, command)
+    }
+  }
+
+  async onReceiveDanmaku (command) {
+    if (!this.onAddText) {
+      return
+    }
+    let info = command.info
+
+    let roomId, medalLevel
+    if (info[3]) {
+      roomId = info[3][3]
+      medalLevel = info[3][0]
+    } else {
+      roomId = medalLevel = 0
+    }
+
+    let uid = info[2][0]
+    let isAdmin = info[2][2]
+    let privilegeType = info[7]
+    let authorType
+    if (uid === this.roomOwnerUid) {
+      authorType = 3
+    } else if (isAdmin) {
+      authorType = 2
+    } else if (privilegeType !== 0) {
+      authorType = 1
+    } else {
+      authorType = 0
+    }
+
+    let urank = info[2][5]
+    let data = {
+      avatarUrl: await avatar.getAvatarUrl(uid),
+      timestamp: info[0][4] / 1000,
+      authorName: info[2][1],
+      authorType: authorType,
+      content: info[1],
+      privilegeType: privilegeType,
+      isGiftDanmaku: !!info[0][9],
+      authorLevel: info[4][0],
+      isNewbie: urank < 10000,
+      isMobileVerified: !!info[2][6],
+      medalLevel: roomId === this.roomId ? medalLevel : 0,
+      id: getUuid4Hex(),
+      translation: ''
+    }
+    this.onAddText(data)
+  }
+
+  onReceiveGift (command) {
+    if (!this.onAddGift) {
+      return
+    }
+    let data = command.data
+    if (data.coin_type !== 'gold') { // 丢人
+      return
+    }
+
+    data = {
+      id: getUuid4Hex(),
+      avatarUrl: avatar.processAvatarUrl(data.face),
+      timestamp: data.timestamp,
+      authorName: data.uname,
+      totalCoin: data.total_coin,
+      giftName: data.giftName,
+      num: data.num
+    }
+    this.onAddGift(data)
+  }
+
+  async onBuyGuard (command) {
+    if (!this.onAddMember) {
+      return
+    }
+
+    let data = command.data
+    data = {
+      id: getUuid4Hex(),
+      avatarUrl: await avatar.getAvatarUrl(data.uid),
+      timestamp: data.start_time,
+      authorName: data.username,
+      privilegeType: data.guard_level
+    }
+    this.onAddMember(data)
+  }
+
+  onSuperChat (command) {
+    if (!this.onAddSuperChat) {
+      return
+    }
+
+    let data = command.data
+    data = {
+      id: data.id.toString(),
+      avatarUrl: avatar.processAvatarUrl(data.user_info.face),
+      timestamp: data.start_time,
+      authorName: data.user_info.uname,
+      price: data.price,
+      content: data.message,
+      translation: ''
+    }
+    this.onAddSuperChat(data)
+  }
+
+  onSuperChatDelete (command) {
+    if (!this.onDelSuperChat) {
+      return
+    }
+
+    let ids = []
+    for (let id of command.data.ids) {
+      ids.push(id.toString())
+    }
+    this.onDelSuperChat({ids})
+  }
+}
+
+const COMMAND_HANDLERS = {
+  DANMU_MSG: ChatClientDirect.prototype.onReceiveDanmaku,
+  SEND_GIFT: ChatClientDirect.prototype.onReceiveGift,
+  GUARD_BUY: ChatClientDirect.prototype.onBuyGuard,
+  SUPER_CHAT_MESSAGE: ChatClientDirect.prototype.onSuperChat,
+  SUPER_CHAT_MESSAGE_DELETE: ChatClientDirect.prototype.onSuperChatDelete
+}

frontend/src/api/chat/ChatClientRelay.js

@@ -0,0 +1,148 @@
+const COMMAND_HEARTBEAT = 0
+const COMMAND_JOIN_ROOM = 1
+const COMMAND_ADD_TEXT = 2
+const COMMAND_ADD_GIFT = 3
+const COMMAND_ADD_MEMBER = 4
+const COMMAND_ADD_SUPER_CHAT = 5
+const COMMAND_DEL_SUPER_CHAT = 6
+const COMMAND_UPDATE_TRANSLATION = 7
+
+export default class ChatClientRelay {
+  constructor (roomId, autoTranslate) {
+    this.roomId = roomId
+    this.autoTranslate = autoTranslate
+
+    this.onAddText = null
+    this.onAddGift = null
+    this.onAddMember = null
+    this.onAddSuperChat = null
+    this.onDelSuperChat = null
+    this.onUpdateTranslation = null
+
+    this.websocket = null
+    this.retryCount = 0
+    this.isDestroying = false
+    this.heartbeatTimerId = null
+  }
+
+  start () {
+    this.wsConnect()
+  }
+
+  stop () {
+    this.isDestroying = true
+    if (this.websocket) {
+      this.websocket.close()
+    }
+  }
+
+  wsConnect () {
+    if (this.isDestroying) {
+      return
+    }
+    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+    // 开发时使用localhost:12450
+    const host = process.env.NODE_ENV === 'development' ? 'localhost:12450' : window.location.host
+    const url = `${protocol}://${host}/api/chat`
+    this.websocket = new WebSocket(url)
+    this.websocket.onopen = this.onWsOpen.bind(this)
+    this.websocket.onclose = this.onWsClose.bind(this)
+    this.websocket.onmessage = this.onWsMessage.bind(this)
+    this.heartbeatTimerId = window.setInterval(this.sendHeartbeat.bind(this), 10 * 1000)
+  }
+
+  sendHeartbeat () {
+    this.websocket.send(JSON.stringify({
+      cmd: COMMAND_HEARTBEAT
+    }))
+  }
+
+  onWsOpen () {
+    this.retryCount = 0
+    this.websocket.send(JSON.stringify({
+      cmd: COMMAND_JOIN_ROOM,
+      data: {
+        roomId: this.roomId,
+        config: {
+          autoTranslate: this.autoTranslate
+        }
+      }
+    }))
+  }
+
+  onWsClose () {
+    this.websocket = null
+    if (this.heartbeatTimerId) {
+      window.clearInterval(this.heartbeatTimerId)
+      this.heartbeatTimerId = null
+    }
+    if (this.isDestroying) {
+      return
+    }
+    window.console.log(`掉线重连中${++this.retryCount}`)
+    window.setTimeout(this.wsConnect.bind(this), 1000)
+  }
+
+  onWsMessage (event) {
+    let {cmd, data} = JSON.parse(event.data)
+    switch (cmd) {
+    case COMMAND_ADD_TEXT: {
+      if (!this.onAddText) {
+        break
+      }
+      data = {
+        avatarUrl: data[0],
+        timestamp: data[1],
+        authorName: data[2],
+        authorType: data[3],
+        content: data[4],
+        privilegeType: data[5],
+        isGiftDanmaku: !!data[6],
+        authorLevel: data[7],
+        isNewbie: !!data[8],
+        isMobileVerified: !!data[9],
+        medalLevel: data[10],
+        id: data[11],
+        translation: data[12]
+      }
+      this.onAddText(data)
+      break
+    }
+    case COMMAND_ADD_GIFT: {
+      if (this.onAddGift) {
+        this.onAddGift(data)
+      }
+      break
+    }
+    case COMMAND_ADD_MEMBER: {
+      if (this.onAddMember) {
+        this.onAddMember(data)
+      }
+      break
+    }
+    case COMMAND_ADD_SUPER_CHAT: {
+      if (this.onAddSuperChat) {
+        this.onAddSuperChat(data)
+      }
+      break
+    }
+    case COMMAND_DEL_SUPER_CHAT: {
+      if (this.onDelSuperChat) {
+        this.onDelSuperChat(data)
+      }
+      break
+    }
+    case COMMAND_UPDATE_TRANSLATION: {
+      if (!this.onUpdateTranslation) {
+        break
+      }
+      data = {
+        id: data[0],
+        translation: data[1]
+      }
+      this.onUpdateTranslation(data)
+      break
+    }
+    }
+  }
+}

frontend/src/api/chat/avatar.js

@@ -0,0 +1,28 @@
+import axios from 'axios'
+
+export const DEFAULT_AVATAR_URL = '//static.hdslb.com/images/member/noface.gif'
+
+export function processAvatarUrl (avatarUrl) {
+  // 去掉协议，兼容HTTP、HTTPS
+  let m = avatarUrl.match(/(?:https?:)?(.*)/)
+  if (m) {
+    avatarUrl = m[1]
+  }
+  // 缩小图片加快传输
+  if (!avatarUrl.endsWith('noface.gif')) {
+    avatarUrl += '@48w_48h'
+  }
+  return avatarUrl
+}
+
+export async function getAvatarUrl (uid) {
+  let res
+  try {
+    res = (await axios.get('/api/avatar_url', {params: {
+      uid: uid
+    }})).data
+  } catch {
+    return DEFAULT_AVATAR_URL
+  }
+  return res.avatarUrl
+}

frontend/src/api/chatConfig.js

@@ -17,6 +17,7 @@ export const DEFAULT_CONFIG = {
   blockUsers: '',
   blockMedalLevel: 0,
 
+  relayMessagesByServer: false,
   autoTranslate: false
 }
 

frontend/src/assets/css/youtube/yt-html.css

@@ -0,0 +1,362 @@
+html:not(.style-scope) {
+  --yt-live-chat-background-color: hsl(0, 0%, 100%);
+  --yt-live-chat-action-panel-background-color: hsla(0, 0%, 93.3%, .4);
+  --yt-live-chat-action-panel-background-color-transparent: hsla(0, 0%, 97%, .8);
+  --yt-live-chat-mode-change-background-color: hsla(0, 0%, 93.3%, .4);
+  --yt-live-chat-primary-text-color: hsl(0, 0%, 6.7%);
+  --yt-live-chat-secondary-text-color: hsla(0, 0%, 6.7%, .6);
+  --yt-live-chat-tertiary-text-color: hsla(0, 0%, 6.7%, .4);
+  --yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8;
+  --yt-live-chat-text-input-field-placeholder-color: hsla(0, 0%, 6.7%, .6);
+  --yt-live-chat-icon-button-color: hsla(0, 0%, 6.7%, .4);
+  --yt-live-chat-enabled-send-button-color: #4285f4;
+  --yt-live-chat-disabled-icon-button-color: hsla(0, 0%, 6.7%, .2);
+  --yt-live-chat-picker-button-color: hsla(0, 0%, 6.7%, .4);
+  --yt-live-chat-picker-button-active-color: hsla(0, 0%, 6.7%, .8);
+  --yt-live-chat-picker-button-disabled-color: var(--yt-live-chat-disabled-icon-button-color);
+  --yt-live-chat-picker-button-hover-color: hsla(0, 0%, 6.7%, .6);
+  --yt-live-chat-mention-background-color: #ff5722;
+  --yt-live-chat-mention-text-color: hsl(0, 0%, 100%);
+  --yt-live-chat-deleted-message-color: rgba(0, 0, 0, .5);
+  --yt-live-chat-deleted-message-bar-color: rgba(11, 11, 11, .2);
+  --yt-live-chat-disabled-button-background-color: hsl(0, 0%, 93.3%);
+  --yt-live-chat-disabled-button-text-color: hsla(0, 0%, 6.7%, .4);
+  --yt-live-chat-sub-panel-background-color: hsl(0, 0%, 93.3%);
+  --yt-live-chat-sub-panel-background-color-transparent: hsla(0, 0%, 93%, .7);
+  --yt-live-chat-header-background-color: hsla(0, 0%, 93.3%, .4);
+  --yt-live-chat-header-button-color: hsl(0, 0%, 6.7%);
+  --yt-live-chat-error-message-color: hsl(10, 51%, 49%);
+  --yt-live-chat-reconnect-message-color: hsla(0, 0%, 7%, 0.2);
+  --yt-live-chat-moderator-color: hsl(225, 84%, 66%);
+  --yt-live-chat-owner-color: hsl(40, 76%, 55%);
+  --yt-live-chat-author-chip-owner-text-color: rgba(0,0,0,0.87);
+  --yt-live-chat-author-chip-verified-background-color: #CCCCCC;
+  --yt-live-chat-author-chip-verified-text-color: #606060;
+  --yt-live-chat-message-highlight-background-color: #f8f8f8;
+  --yt-live-chat-sponsor-color: #107516;
+  --yt-live-chat-overlay-color: hsla(0, 0%, 0%, 0.6);
+  --yt-live-chat-dialog-background-color: hsl(0, 0%, 100%);
+  --yt-live-chat-dialog-text-color: hsla(0, 0%, 6.7%, .6);
+  --yt-live-chat-poll-choice-text-color: var(--yt-spec-text-secondary);
+  --yt-live-chat-poll-choice-border-color: var(--yt-spec-10-percent-layer);
+  --yt-live-chat-poll-choice-vote-bar-background-color: hsla(0, 0%, 93.3%, .8);
+  --yt-live-chat-poll-choice-vote-bar-background-color-selected: #F2F8FF;
+  --yt-live-chat-poll-choice-color-selected: #065FD4;
+  --yt-live-chat-moderation-mode-hover-background-color: hsla(0, 0%, 6.7%, .2);
+  --yt-live-chat-additional-inline-action-button-color: hsl(0, 0%, 100%);
+  --yt-live-chat-additional-inline-action-button-background-color: hsla(0, 0%, 26%, 0.8);
+  --yt-live-chat-additional-inline-action-button-background-color-hover: hsla(0, 0%, 26%, 1.0);
+  --yt-formatted-string-emoji-size: 24px;
+  --yt-live-chat-emoji-size: 24px;
+  --yt-live-chat-text-input-field-suggestion-background-color: hsl(0, 0%, 100%);
+  --yt-live-chat-text-input-field-suggestion-background-color-hover: #eee;
+  --yt-live-chat-text-input-field-suggestion-text-color: #666;
+  --yt-live-chat-text-input-field-suggestion-text-color-hover: #333;
+  --yt-live-chat-ticker-arrow-background: hsl(0, 0%, 97.3%);
+  --yt-emoji-picker-category-background-color: var(--yt-live-chat-action-panel-background-color-transparent);
+  --yt-emoji-picker-category-color: var(--yt-live-chat-secondary-text-color);
+  --yt-emoji-picker-category-button-color: var(--yt-live-chat-picker-button-color);
+  --yt-emoji-picker-search-background-color: hsla(0, 0%, 100%, .6);
+  --yt-emoji-picker-search-color: hsla(0, 0%, 6.7%, .8);
+  --yt-emoji-picker-search-placeholder-color: hsla(0, 0%, 6.7%, .6);
+  --yt-live-chat-slider-active-color: #2196f3;
+  --yt-live-chat-slider-container-color: #c8c8c8;
+  --yt-live-chat-slider-markers-color: #505050;
+  --yt-live-chat-toast-background-color: hsl(0, 0%, 20%);
+  --yt-live-chat-toast-text-color: hsl(0, 0%, 100%);
+  --yt-live-chat-automod-button-background-color: hsl(0, 0%, 93.3%);
+  --yt-live-chat-automod-button-background-color-hover: hsla(0, 0%, 6.7%, .2);
+  --yt-live-chat-countdown-opacity: 0.3;
+  --yt-live-chat-shimmer-background-color: rgba(136, 136, 136, 0.2);
+  --yt-live-chat-shimmer-linear-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 65%);
+  --yt-live-chat-vem-background-color: hsl(0, 0%, 93.3%);
+  --yt-live-chat-upsell-dialog-renderer-button-padding: 10px 16px;
+  --yt-live-chat-product-picker-icon-color: rgba(17, 17, 17, 0.6);
+  --yt-live-chat-product-picker-hover-color: rgba(17, 17, 16, 0.1);
+  --yt-live-chat-product-picker-disabled-icon-color: rgba(17, 17, 17, 0.4);
+  --yt-pdg-paid-stickers-tab-selection-bar-color: #065FD4;
+  --yt-pdg-paid-stickers-author-name-font-size: 13px;
+  --yt-pdg-paid-stickers-margin-left: 38px;
+}
+
+html:not(.style-scope) {
+  --layout_-_display: flex;
+  ;
+
+  --layout-inline_-_display: inline-flex;
+  ;
+
+  --layout-horizontal_-_display: var(--layout_-_display);
+  --layout-horizontal_-_-ms-flex-direction: row;
+  --layout-horizontal_-_-webkit-flex-direction: row;
+  --layout-horizontal_-_flex-direction: row;
+  ;
+
+  --layout-horizontal-reverse_-_display: var(--layout_-_display);
+  --layout-horizontal-reverse_-_-ms-flex-direction: row-reverse;
+  --layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse;
+  --layout-horizontal-reverse_-_flex-direction: row-reverse;
+  ;
+
+  --layout-vertical_-_display: var(--layout_-_display);
+  --layout-vertical_-_-ms-flex-direction: column;
+  --layout-vertical_-_-webkit-flex-direction: column;
+  --layout-vertical_-_flex-direction: column;
+  ;
+
+  --layout-vertical-reverse_-_display: var(--layout_-_display);
+  --layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
+  --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
+  --layout-vertical-reverse_-_flex-direction: column-reverse;
+  ;
+
+  --layout-wrap_-_-ms-flex-wrap: wrap;
+  --layout-wrap_-_-webkit-flex-wrap: wrap;
+  --layout-wrap_-_flex-wrap: wrap;
+  ;
+
+  --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse;
+  --layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse;
+  --layout-wrap-reverse_-_flex-wrap: wrap-reverse;
+  ;
+
+  --layout-flex-auto_-_-ms-flex: 1 1 auto;
+  --layout-flex-auto_-_-webkit-flex: 1 1 auto;
+  --layout-flex-auto_-_flex: 1 1 auto;
+  ;
+
+  --layout-flex-none_-_-ms-flex: none;
+  --layout-flex-none_-_-webkit-flex: none;
+  --layout-flex-none_-_flex: none;
+  ;
+
+  --layout-flex_-_-ms-flex: 1 1 0.000000001px;
+  --layout-flex_-_-webkit-flex: 1;
+  --layout-flex_-_flex: 1;
+  --layout-flex_-_-webkit-flex-basis: 0.000000001px;
+  --layout-flex_-_flex-basis: 0.000000001px;
+  ;
+
+  --layout-flex-2_-_-ms-flex: 2;
+  --layout-flex-2_-_-webkit-flex: 2;
+  --layout-flex-2_-_flex: 2;
+  ;
+
+  --layout-flex-3_-_-ms-flex: 3;
+  --layout-flex-3_-_-webkit-flex: 3;
+  --layout-flex-3_-_flex: 3;
+  ;
+
+  --layout-flex-4_-_-ms-flex: 4;
+  --layout-flex-4_-_-webkit-flex: 4;
+  --layout-flex-4_-_flex: 4;
+  ;
+
+  --layout-flex-5_-_-ms-flex: 5;
+  --layout-flex-5_-_-webkit-flex: 5;
+  --layout-flex-5_-_flex: 5;
+  ;
+
+  --layout-flex-6_-_-ms-flex: 6;
+  --layout-flex-6_-_-webkit-flex: 6;
+  --layout-flex-6_-_flex: 6;
+  ;
+
+  --layout-flex-7_-_-ms-flex: 7;
+  --layout-flex-7_-_-webkit-flex: 7;
+  --layout-flex-7_-_flex: 7;
+  ;
+
+  --layout-flex-8_-_-ms-flex: 8;
+  --layout-flex-8_-_-webkit-flex: 8;
+  --layout-flex-8_-_flex: 8;
+  ;
+
+  --layout-flex-9_-_-ms-flex: 9;
+  --layout-flex-9_-_-webkit-flex: 9;
+  --layout-flex-9_-_flex: 9;
+  ;
+
+  --layout-flex-10_-_-ms-flex: 10;
+  --layout-flex-10_-_-webkit-flex: 10;
+  --layout-flex-10_-_flex: 10;
+  ;
+
+  --layout-flex-11_-_-ms-flex: 11;
+  --layout-flex-11_-_-webkit-flex: 11;
+  --layout-flex-11_-_flex: 11;
+  ;
+
+  --layout-flex-12_-_-ms-flex: 12;
+  --layout-flex-12_-_-webkit-flex: 12;
+  --layout-flex-12_-_flex: 12;
+  ;
+
+
+
+  --layout-start_-_-ms-flex-align: start;
+  --layout-start_-_-webkit-align-items: flex-start;
+  --layout-start_-_align-items: flex-start;
+  ;
+
+  --layout-center_-_-ms-flex-align: center;
+  --layout-center_-_-webkit-align-items: center;
+  --layout-center_-_align-items: center;
+  ;
+
+  --layout-end_-_-ms-flex-align: end;
+  --layout-end_-_-webkit-align-items: flex-end;
+  --layout-end_-_align-items: flex-end;
+  ;
+
+  --layout-baseline_-_-ms-flex-align: baseline;
+  --layout-baseline_-_-webkit-align-items: baseline;
+  --layout-baseline_-_align-items: baseline;
+  ;
+
+
+
+  --layout-start-justified_-_-ms-flex-pack: start;
+  --layout-start-justified_-_-webkit-justify-content: flex-start;
+  --layout-start-justified_-_justify-content: flex-start;
+  ;
+
+  --layout-center-justified_-_-ms-flex-pack: center;
+  --layout-center-justified_-_-webkit-justify-content: center;
+  --layout-center-justified_-_justify-content: center;
+  ;
+
+  --layout-end-justified_-_-ms-flex-pack: end;
+  --layout-end-justified_-_-webkit-justify-content: flex-end;
+  --layout-end-justified_-_justify-content: flex-end;
+  ;
+
+  --layout-around-justified_-_-ms-flex-pack: distribute;
+  --layout-around-justified_-_-webkit-justify-content: space-around;
+  --layout-around-justified_-_justify-content: space-around;
+  ;
+
+  --layout-justified_-_-ms-flex-pack: justify;
+  --layout-justified_-_-webkit-justify-content: space-between;
+  --layout-justified_-_justify-content: space-between;
+  ;
+
+  --layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align);
+  --layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items);
+  --layout-center-center_-_align-items: var(--layout-center_-_align-items);
+  --layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack);
+  --layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content);
+  --layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);
+  ;
+
+
+
+  --layout-self-start_-_-ms-align-self: flex-start;
+  --layout-self-start_-_-webkit-align-self: flex-start;
+  --layout-self-start_-_align-self: flex-start;
+  ;
+
+  --layout-self-center_-_-ms-align-self: center;
+  --layout-self-center_-_-webkit-align-self: center;
+  --layout-self-center_-_align-self: center;
+  ;
+
+  --layout-self-end_-_-ms-align-self: flex-end;
+  --layout-self-end_-_-webkit-align-self: flex-end;
+  --layout-self-end_-_align-self: flex-end;
+  ;
+
+  --layout-self-stretch_-_-ms-align-self: stretch;
+  --layout-self-stretch_-_-webkit-align-self: stretch;
+  --layout-self-stretch_-_align-self: stretch;
+  ;
+
+  --layout-self-baseline_-_-ms-align-self: baseline;
+  --layout-self-baseline_-_-webkit-align-self: baseline;
+  --layout-self-baseline_-_align-self: baseline;
+  ;
+
+
+
+  --layout-start-aligned_-_-ms-flex-line-pack: start;
+  --layout-start-aligned_-_-ms-align-content: flex-start;
+  --layout-start-aligned_-_-webkit-align-content: flex-start;
+  --layout-start-aligned_-_align-content: flex-start;
+  ;
+
+  --layout-end-aligned_-_-ms-flex-line-pack: end;
+  --layout-end-aligned_-_-ms-align-content: flex-end;
+  --layout-end-aligned_-_-webkit-align-content: flex-end;
+  --layout-end-aligned_-_align-content: flex-end;
+  ;
+
+  --layout-center-aligned_-_-ms-flex-line-pack: center;
+  --layout-center-aligned_-_-ms-align-content: center;
+  --layout-center-aligned_-_-webkit-align-content: center;
+  --layout-center-aligned_-_align-content: center;
+  ;
+
+  --layout-between-aligned_-_-ms-flex-line-pack: justify;
+  --layout-between-aligned_-_-ms-align-content: space-between;
+  --layout-between-aligned_-_-webkit-align-content: space-between;
+  --layout-between-aligned_-_align-content: space-between;
+  ;
+
+  --layout-around-aligned_-_-ms-flex-line-pack: distribute;
+  --layout-around-aligned_-_-ms-align-content: space-around;
+  --layout-around-aligned_-_-webkit-align-content: space-around;
+  --layout-around-aligned_-_align-content: space-around;
+  ;
+
+
+
+  --layout-block_-_display: block;
+  ;
+
+  --layout-invisible_-_visibility: hidden !important;
+  ;
+
+  --layout-relative_-_position: relative;
+  ;
+
+  --layout-fit_-_position: absolute;
+  --layout-fit_-_top: 0;
+  --layout-fit_-_right: 0;
+  --layout-fit_-_bottom: 0;
+  --layout-fit_-_left: 0;
+  ;
+
+  --layout-scroll_-_-webkit-overflow-scrolling: touch;
+  --layout-scroll_-_overflow: auto;
+  ;
+
+  --layout-fullbleed_-_margin: 0;
+  --layout-fullbleed_-_height: 100vh;
+  ;
+
+
+
+  --layout-fixed-top_-_position: fixed;
+  --layout-fixed-top_-_top: 0;
+  --layout-fixed-top_-_left: 0;
+  --layout-fixed-top_-_right: 0;
+  ;
+
+  --layout-fixed-right_-_position: fixed;
+  --layout-fixed-right_-_top: 0;
+  --layout-fixed-right_-_right: 0;
+  --layout-fixed-right_-_bottom: 0;
+  ;
+
+  --layout-fixed-bottom_-_position: fixed;
+  --layout-fixed-bottom_-_right: 0;
+  --layout-fixed-bottom_-_bottom: 0;
+  --layout-fixed-bottom_-_left: 0;
+  ;
+
+  --layout-fixed-left_-_position: fixed;
+  --layout-fixed-left_-_top: 0;
+  --layout-fixed-left_-_bottom: 0;
+  --layout-fixed-left_-_left: 0;
+  ;
+}

frontend/src/assets/css/youtube/yt-icon.css

@@ -0,0 +1,30 @@
+canvas.yt-icon, caption.yt-icon, center.yt-icon, cite.yt-icon, code.yt-icon, dd.yt-icon, del.yt-icon, dfn.yt-icon, div.yt-icon, dl.yt-icon, dt.yt-icon, em.yt-icon, embed.yt-icon, fieldset.yt-icon, font.yt-icon, form.yt-icon, h1.yt-icon, h2.yt-icon, h3.yt-icon, h4.yt-icon, h5.yt-icon, h6.yt-icon, hr.yt-icon, i.yt-icon, iframe.yt-icon, img.yt-icon, ins.yt-icon, kbd.yt-icon, label.yt-icon, legend.yt-icon, li.yt-icon, menu.yt-icon, object.yt-icon, ol.yt-icon, p.yt-icon, pre.yt-icon, q.yt-icon, s.yt-icon, samp.yt-icon, small.yt-icon, span.yt-icon, strike.yt-icon, strong.yt-icon, sub.yt-icon, sup.yt-icon, table.yt-icon, tbody.yt-icon, td.yt-icon, tfoot.yt-icon, th.yt-icon, thead.yt-icon, tr.yt-icon, tt.yt-icon, u.yt-icon, ul.yt-icon, var.yt-icon {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-icon[hidden] {
+  display: none !important;
+}
+
+yt-icon, .yt-icon-container.yt-icon {
+  display: inline-flex;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  vertical-align: middle;
+  fill: currentcolor;
+  stroke: none;
+  width: var(--iron-icon-width, 24px);
+  height: var(--iron-icon-height, 24px);
+}
+
+yt-icon.external-container {
+  display: none !important;
+}

frontend/src/assets/css/youtube/yt-img-shadow.css

@@ -0,0 +1,68 @@
+canvas.yt-img-shadow, caption.yt-img-shadow, center.yt-img-shadow, cite.yt-img-shadow, code.yt-img-shadow, dd.yt-img-shadow, del.yt-img-shadow, dfn.yt-img-shadow, div.yt-img-shadow, dl.yt-img-shadow, dt.yt-img-shadow, em.yt-img-shadow, embed.yt-img-shadow, fieldset.yt-img-shadow, font.yt-img-shadow, form.yt-img-shadow, h1.yt-img-shadow, h2.yt-img-shadow, h3.yt-img-shadow, h4.yt-img-shadow, h5.yt-img-shadow, h6.yt-img-shadow, hr.yt-img-shadow, i.yt-img-shadow, iframe.yt-img-shadow, img.yt-img-shadow, ins.yt-img-shadow, kbd.yt-img-shadow, label.yt-img-shadow, legend.yt-img-shadow, li.yt-img-shadow, menu.yt-img-shadow, object.yt-img-shadow, ol.yt-img-shadow, p.yt-img-shadow, pre.yt-img-shadow, q.yt-img-shadow, s.yt-img-shadow, samp.yt-img-shadow, small.yt-img-shadow, span.yt-img-shadow, strike.yt-img-shadow, strong.yt-img-shadow, sub.yt-img-shadow, sup.yt-img-shadow, table.yt-img-shadow, tbody.yt-img-shadow, td.yt-img-shadow, tfoot.yt-img-shadow, th.yt-img-shadow, thead.yt-img-shadow, tr.yt-img-shadow, tt.yt-img-shadow, u.yt-img-shadow, ul.yt-img-shadow, var.yt-img-shadow {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-img-shadow[hidden] {
+  display: none !important;
+}
+
+yt-img-shadow {
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 0.2s;
+  -ms-flex: none;
+  -webkit-flex: none;
+  flex: none;
+}
+
+yt-img-shadow.no-transition {
+  opacity: 1;
+  transition: none;
+}
+
+yt-img-shadow.with-placeholder {
+  background-color: transparent;
+  min-height: unset;
+  min-width: unset;
+}
+
+yt-img-shadow[loaded] {
+  opacity: 1;
+}
+
+yt-img-shadow.empty img.yt-img-shadow {
+  visibility: hidden;
+}
+
+yt-img-shadow[object-fit="FILL"] img.yt-img-shadow, yt-img-shadow[fit] img.yt-img-shadow {
+  width: 100%;
+  height: 100%;
+}
+
+yt-img-shadow[object-fit="COVER"] img.yt-img-shadow {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+yt-img-shadow[object-fit="CONTAIN"] img.yt-img-shadow {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+yt-img-shadow[object-position="LEFT"] img.yt-img-shadow {
+  object-position: left;
+}
+
+img.yt-img-shadow {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-height: none;
+  max-width: 100%;
+  border-radius: none;
+}

frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css

@@ -0,0 +1,36 @@
+canvas.yt-live-chat-author-badge-renderer, caption.yt-live-chat-author-badge-renderer, center.yt-live-chat-author-badge-renderer, cite.yt-live-chat-author-badge-renderer, code.yt-live-chat-author-badge-renderer, dd.yt-live-chat-author-badge-renderer, del.yt-live-chat-author-badge-renderer, dfn.yt-live-chat-author-badge-renderer, div.yt-live-chat-author-badge-renderer, dl.yt-live-chat-author-badge-renderer, dt.yt-live-chat-author-badge-renderer, em.yt-live-chat-author-badge-renderer, embed.yt-live-chat-author-badge-renderer, fieldset.yt-live-chat-author-badge-renderer, font.yt-live-chat-author-badge-renderer, form.yt-live-chat-author-badge-renderer, h1.yt-live-chat-author-badge-renderer, h2.yt-live-chat-author-badge-renderer, h3.yt-live-chat-author-badge-renderer, h4.yt-live-chat-author-badge-renderer, h5.yt-live-chat-author-badge-renderer, h6.yt-live-chat-author-badge-renderer, hr.yt-live-chat-author-badge-renderer, i.yt-live-chat-author-badge-renderer, iframe.yt-live-chat-author-badge-renderer, img.yt-live-chat-author-badge-renderer, ins.yt-live-chat-author-badge-renderer, kbd.yt-live-chat-author-badge-renderer, label.yt-live-chat-author-badge-renderer, legend.yt-live-chat-author-badge-renderer, li.yt-live-chat-author-badge-renderer, menu.yt-live-chat-author-badge-renderer, object.yt-live-chat-author-badge-renderer, ol.yt-live-chat-author-badge-renderer, p.yt-live-chat-author-badge-renderer, pre.yt-live-chat-author-badge-renderer, q.yt-live-chat-author-badge-renderer, s.yt-live-chat-author-badge-renderer, samp.yt-live-chat-author-badge-renderer, small.yt-live-chat-author-badge-renderer, span.yt-live-chat-author-badge-renderer, strike.yt-live-chat-author-badge-renderer, strong.yt-live-chat-author-badge-renderer, sub.yt-live-chat-author-badge-renderer, sup.yt-live-chat-author-badge-renderer, table.yt-live-chat-author-badge-renderer, tbody.yt-live-chat-author-badge-renderer, td.yt-live-chat-author-badge-renderer, tfoot.yt-live-chat-author-badge-renderer, th.yt-live-chat-author-badge-renderer, thead.yt-live-chat-author-badge-renderer, tr.yt-live-chat-author-badge-renderer, tt.yt-live-chat-author-badge-renderer, u.yt-live-chat-author-badge-renderer, ul.yt-live-chat-author-badge-renderer, var.yt-live-chat-author-badge-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-author-badge-renderer[hidden] {
+  display: none !important;
+}
+
+yt-live-chat-author-badge-renderer {
+  display: inline-block;
+}
+
+yt-live-chat-author-badge-renderer[type='moderator'] {
+  color: var(--yt-live-chat-moderator-color, #5e84f1);
+}
+
+yt-live-chat-author-badge-renderer[type='owner'] {
+  color: var(--yt-live-chat-owner-color, #ffd600);
+}
+
+yt-live-chat-author-badge-renderer[type='member'] {
+  color: var(--yt-live-chat-sponsor-color, #107516);
+}
+
+yt-live-chat-author-badge-renderer[type='verified'] {
+  color: #999;
+}
+
+img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer {
+  display: block;
+  width: 16px;
+  height: 16px;
+}

frontend/src/assets/css/youtube/yt-live-chat-author-chip.css

@@ -0,0 +1,64 @@
+canvas.yt-live-chat-author-chip, caption.yt-live-chat-author-chip, center.yt-live-chat-author-chip, cite.yt-live-chat-author-chip, code.yt-live-chat-author-chip, dd.yt-live-chat-author-chip, del.yt-live-chat-author-chip, dfn.yt-live-chat-author-chip, div.yt-live-chat-author-chip, dl.yt-live-chat-author-chip, dt.yt-live-chat-author-chip, em.yt-live-chat-author-chip, embed.yt-live-chat-author-chip, fieldset.yt-live-chat-author-chip, font.yt-live-chat-author-chip, form.yt-live-chat-author-chip, h1.yt-live-chat-author-chip, h2.yt-live-chat-author-chip, h3.yt-live-chat-author-chip, h4.yt-live-chat-author-chip, h5.yt-live-chat-author-chip, h6.yt-live-chat-author-chip, hr.yt-live-chat-author-chip, i.yt-live-chat-author-chip, iframe.yt-live-chat-author-chip, img.yt-live-chat-author-chip, ins.yt-live-chat-author-chip, kbd.yt-live-chat-author-chip, label.yt-live-chat-author-chip, legend.yt-live-chat-author-chip, li.yt-live-chat-author-chip, menu.yt-live-chat-author-chip, object.yt-live-chat-author-chip, ol.yt-live-chat-author-chip, p.yt-live-chat-author-chip, pre.yt-live-chat-author-chip, q.yt-live-chat-author-chip, s.yt-live-chat-author-chip, samp.yt-live-chat-author-chip, small.yt-live-chat-author-chip, span.yt-live-chat-author-chip, strike.yt-live-chat-author-chip, strong.yt-live-chat-author-chip, sub.yt-live-chat-author-chip, sup.yt-live-chat-author-chip, table.yt-live-chat-author-chip, tbody.yt-live-chat-author-chip, td.yt-live-chat-author-chip, tfoot.yt-live-chat-author-chip, th.yt-live-chat-author-chip, thead.yt-live-chat-author-chip, tr.yt-live-chat-author-chip, tt.yt-live-chat-author-chip, u.yt-live-chat-author-chip, ul.yt-live-chat-author-chip, var.yt-live-chat-author-chip {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-author-chip[hidden] {
+  display: none !important;
+}
+
+yt-live-chat-author-chip {
+  display: inline-flex;
+  -ms-flex-align: baseline;
+  -webkit-align-items: baseline;
+  align-items: baseline;
+}
+
+#author-name.yt-live-chat-author-chip {
+  box-sizing: border-box;
+  border-radius: 2px;
+  color: var(--yt-live-chat-secondary-text-color);
+  font-weight: 500;
+}
+
+yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip {
+  padding: 2px 4px;
+  color: var(--yt-live-chat-author-chip-verified-text-color);
+  background-color: var(--yt-live-chat-author-chip-verified-background-color);
+}
+
+#author-name.yt-live-chat-author-chip[type='moderator'] {
+  color: var(--yt-live-chat-moderator-color);
+}
+
+yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip[type='owner'], #author-name.yt-live-chat-author-chip[type='owner'] {
+  background-color: #ffd600;
+  color: var(--yt-live-chat-author-chip-owner-text-color);
+}
+
+#author-name.yt-live-chat-author-chip[type='member'] {
+  color: var(--yt-live-chat-sponsor-color);
+}
+
+#chip-badges.yt-live-chat-author-chip:empty {
+  display: none;
+}
+
+yt-live-chat-author-chip[is-highlighted] #chat-badges.yt-live-chat-author-chip:not(:empty) {
+  margin-left: 1px;
+}
+
+yt-live-chat-author-badge-renderer.yt-live-chat-author-chip {
+  margin: 0 0 0 2px;
+  vertical-align: sub;
+}
+
+yt-live-chat-author-chip[is-highlighted] #chip-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer.yt-live-chat-author-chip {
+  color: inherit;
+}
+
+#chip-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer.yt-live-chat-author-chip:last-of-type {
+  margin-right: -2px;
+}

frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css

@@ -0,0 +1,140 @@
+canvas.yt-live-chat-item-list-renderer, caption.yt-live-chat-item-list-renderer, center.yt-live-chat-item-list-renderer, cite.yt-live-chat-item-list-renderer, code.yt-live-chat-item-list-renderer, dd.yt-live-chat-item-list-renderer, del.yt-live-chat-item-list-renderer, dfn.yt-live-chat-item-list-renderer, div.yt-live-chat-item-list-renderer, dl.yt-live-chat-item-list-renderer, dt.yt-live-chat-item-list-renderer, em.yt-live-chat-item-list-renderer, embed.yt-live-chat-item-list-renderer, fieldset.yt-live-chat-item-list-renderer, font.yt-live-chat-item-list-renderer, form.yt-live-chat-item-list-renderer, h1.yt-live-chat-item-list-renderer, h2.yt-live-chat-item-list-renderer, h3.yt-live-chat-item-list-renderer, h4.yt-live-chat-item-list-renderer, h5.yt-live-chat-item-list-renderer, h6.yt-live-chat-item-list-renderer, hr.yt-live-chat-item-list-renderer, i.yt-live-chat-item-list-renderer, iframe.yt-live-chat-item-list-renderer, img.yt-live-chat-item-list-renderer, ins.yt-live-chat-item-list-renderer, kbd.yt-live-chat-item-list-renderer, label.yt-live-chat-item-list-renderer, legend.yt-live-chat-item-list-renderer, li.yt-live-chat-item-list-renderer, menu.yt-live-chat-item-list-renderer, object.yt-live-chat-item-list-renderer, ol.yt-live-chat-item-list-renderer, p.yt-live-chat-item-list-renderer, pre.yt-live-chat-item-list-renderer, q.yt-live-chat-item-list-renderer, s.yt-live-chat-item-list-renderer, samp.yt-live-chat-item-list-renderer, small.yt-live-chat-item-list-renderer, span.yt-live-chat-item-list-renderer, strike.yt-live-chat-item-list-renderer, strong.yt-live-chat-item-list-renderer, sub.yt-live-chat-item-list-renderer, sup.yt-live-chat-item-list-renderer, table.yt-live-chat-item-list-renderer, tbody.yt-live-chat-item-list-renderer, td.yt-live-chat-item-list-renderer, tfoot.yt-live-chat-item-list-renderer, th.yt-live-chat-item-list-renderer, thead.yt-live-chat-item-list-renderer, tr.yt-live-chat-item-list-renderer, tt.yt-live-chat-item-list-renderer, u.yt-live-chat-item-list-renderer, ul.yt-live-chat-item-list-renderer, var.yt-live-chat-item-list-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-item-list-renderer[hidden] {
+  display: none !important;
+}
+
+yt-live-chat-item-list-renderer {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  z-index: 0;
+}
+
+yt-live-chat-item-list-renderer[moderation-mode-enabled] {
+  --yt-live-chat-item-with-inline-actions-context-menu-display: none;
+  --yt-live-chat-inline-action-button-container-display: flex;
+}
+
+#contents.yt-live-chat-item-list-renderer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+#empty-state-message.yt-live-chat-item-list-renderer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+#empty-state-message.yt-live-chat-item-list-renderer>yt-live-chat-message-renderer.yt-live-chat-item-list-renderer {
+  color: var(--yt-live-chat-tertiary-text-color);
+  background: transparent;
+  font-size: 18px;
+  --yt-live-chat-message-renderer-text-align: center;
+}
+
+yt-icon-button.yt-live-chat-item-list-renderer {
+  background-color: #2196f3;
+  border-radius: 999px;
+  bottom: 0;
+  color: #fff;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  margin: 0 calc(50% - 16px) 8px calc(50% - 16px);
+  padding: 4px;
+  position: absolute;
+  transition-property: bottom;
+  transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+  transition-duration: 0.15s;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+yt-icon-button.yt-live-chat-item-list-renderer[disabled] {
+  bottom: -42px;
+  color: #fff;
+  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
+}
+
+#item-scroller.yt-live-chat-item-list-renderer {
+  -ms-flex: 1 1 0.000000001px;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-flex-basis: 0.000000001px;
+  flex-basis: 0.000000001px;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  padding-right: var(--scrollbar-width);
+}
+
+yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer {
+  overflow-y: scroll;
+  padding-right: 0;
+}
+
+#item-offset.yt-live-chat-item-list-renderer {
+  position: relative;
+}
+
+#item-scroller.animated.yt-live-chat-item-list-renderer #item-offset.yt-live-chat-item-list-renderer {
+  overflow: hidden;
+}
+
+#items.yt-live-chat-item-list-renderer {
+  -ms-flex: 1 1 0.000000001px;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-flex-basis: 0.000000001px;
+  flex-basis: 0.000000001px;
+  padding: var(--yt-live-chat-item-list-renderer-padding, 4px 0);
+}
+
+#items.yt-live-chat-item-list-renderer>*.yt-live-chat-item-list-renderer:not(:first-child) {
+  border-top: var(--yt-live-chat-item-list-item-border, none);
+}
+
+#item-scroller.animated.yt-live-chat-item-list-renderer #items.yt-live-chat-item-list-renderer {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  transform: translateY(0);
+}
+
+#docked-messages.yt-live-chat-item-list-renderer {
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer {
+  padding: 4px 24px;
+}
+
+yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer[dashboard-money-feed] {
+  padding: 8px 16px;
+}

frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css

@@ -0,0 +1,360 @@
+#timestamp.yt-live-chat-membership-item-renderer {
+  display: var(--yt-live-chat-item-timestamp-display, inline);
+  margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
+  color: var(--yt-live-chat-tertiary-text-color);
+  font-size: 11px;
+}
+
+#author-photo.yt-live-chat-membership-item-renderer {
+  display: block;
+  margin-right: 16px;
+
+  overflow: hidden;
+  border-radius: 50%;
+
+  -ms-flex: var(--layout-flex-none_-_-ms-flex);
+  -webkit-flex: var(--layout-flex-none_-_-webkit-flex);
+  flex: var(--layout-flex-none_-_flex);
+}
+
+#menu-button.yt-live-chat-membership-item-renderer {
+  width: var(--yt-live-chat-32px-icon-button_-_width);
+  height: var(--yt-live-chat-32px-icon-button_-_height);
+  padding: var(--yt-live-chat-32px-icon-button_-_padding);
+}
+
+#menu.yt-live-chat-membership-item-renderer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+
+
+  transform: translateX(100px);
+}
+
+yt-live-chat-membership-item-renderer:hover #menu.yt-live-chat-membership-item-renderer,
+yt-live-chat-membership-item-renderer[menu-visible] #menu.yt-live-chat-membership-item-renderer {
+  transform: none;
+}
+
+yt-live-chat-membership-item-renderer:focus-within #menu.yt-live-chat-membership-item-renderer {
+  transform: none;
+}
+
+#inline-action-button-container.yt-live-chat-membership-item-renderer {
+  position: absolute;
+  top: -4px;
+  right: 0;
+  bottom: -4px;
+  left: 0;
+
+  background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
+  display: none;
+
+  -ms-flex-align: var(--layout-center-center_-_-ms-flex-align);
+  -webkit-align-items: var(--layout-center-center_-_-webkit-align-items);
+  align-items: var(--layout-center-center_-_align-items);
+  -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack);
+  -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content);
+  justify-content: var(--layout-center-center_-_justify-content);
+}
+
+yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer {
+  display: var(--layout-horizontal_-_display);
+  -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
+  -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
+  flex-direction: var(--layout-horizontal_-_flex-direction);
+
+
+  display: var(--yt-live-chat-inline-action-button-container-display, none);
+}
+
+yt-live-chat-membership-item-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer {
+  display: none;
+}
+
+yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-membership-item-renderer {
+  display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
+}
+
+#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer,
+#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
+  --yt-button-icon-size: 36px;
+  --yt-button-icon-padding: 6px;
+
+  color: var(--yt-white);
+  border-radius: 2px;
+}
+
+#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
+  background: var(--yt-luna-black-opacity-lighten-1);
+}
+
+#inline-action-buttons.yt-live-chat-membership-item-renderer>.yt-live-chat-membership-item-renderer:hover {
+  background: var(--yt-luna-black);
+}
+
+#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
+  color: var(--yt-live-chat-additional-inline-action-button-color);
+  background: var(--yt-live-chat-additional-inline-action-button-background-color);
+}
+
+#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>.yt-live-chat-membership-item-renderer:hover {
+  background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
+}
+
+#additional-inline-action-buttons.yt-live-chat-membership-item-renderer:not(:empty) {
+  margin-left: 32px;
+}
+
+#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer:not(:first-child),
+#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer:not(:first-child) {
+  margin-left: 8px;
+}
+
+yt-live-chat-membership-item-renderer {
+  position: relative;
+  display: block;
+
+  --yt-live-chat-sponsor-header-color: #0a8043;
+  --yt-live-chat-sponsor-color: #0f9d58;
+  --yt-live-chat-sponsor-text-color: #fff;
+  --yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
+
+  padding: 4px 24px;
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] {
+  padding: 0;
+
+  --yt-live-chat-item-timestamp-display: block;
+}
+
+#card.yt-live-chat-membership-item-renderer {
+  overflow: hidden;
+  font-size: 14px;
+  border-radius: 4px;
+
+  display: var(--layout-vertical_-_display);
+  -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction);
+  -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction);
+  flex-direction: var(--layout-vertical_-_flex-direction);
+  box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] #card.yt-live-chat-membership-item-renderer {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+#header.yt-live-chat-membership-item-renderer {
+  position: relative;
+
+  background-color: var(--yt-live-chat-sponsor-header-color);
+  padding: 8px 16px;
+  color: #fff;
+  min-height: 20px;
+
+  display: var(--layout-horizontal_-_display);
+  -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
+  -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
+  flex-direction: var(--layout-horizontal_-_flex-direction);
+  -ms-flex-align: var(--layout-center_-_-ms-flex-align);
+  -webkit-align-items: var(--layout-center_-_-webkit-align-items);
+  align-items: var(--layout-center_-_align-items);
+}
+
+yt-live-chat-membership-item-renderer[show-only-header] #header.yt-live-chat-membership-item-renderer {
+  background-color: var(--yt-live-chat-sponsor-color);
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] #header.yt-live-chat-membership-item-renderer {
+  color: var(--yt-live-chat-secondary-text-color);
+  background-color: var(--yt-live-chat-background-color);
+  -ms-flex-align: var(--layout-start_-_-ms-flex-align);
+  -webkit-align-items: var(--layout-start_-_-webkit-align-items);
+  align-items: var(--layout-start_-_align-items);
+}
+
+#header-content.yt-live-chat-membership-item-renderer {
+  display: var(--layout-horizontal_-_display);
+  -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
+  -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
+  flex-direction: var(--layout-horizontal_-_flex-direction);
+  -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack);
+  -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content);
+  justify-content: var(--layout-justified_-_justify-content);
+  -ms-flex: var(--layout-flex_-_-ms-flex);
+  -webkit-flex: var(--layout-flex_-_-webkit-flex);
+  flex: var(--layout-flex_-_flex);
+  -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis);
+  flex-basis: var(--layout-flex_-_flex-basis);
+  -ms-flex-align: var(--layout-baseline_-_-ms-flex-align);
+  -webkit-align-items: var(--layout-baseline_-_-webkit-align-items);
+  align-items: var(--layout-baseline_-_align-items);
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content.yt-live-chat-membership-item-renderer {
+  display: var(--layout-vertical_-_display);
+  -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction);
+  -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction);
+  flex-direction: var(--layout-vertical_-_flex-direction);
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content-inner-column.yt-live-chat-membership-item-renderer {
+  margin-bottom: 4px;
+
+  display: var(--layout-horizontal_-_display);
+  -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
+  -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
+  flex-direction: var(--layout-horizontal_-_flex-direction);
+  -ms-flex-align: var(--layout-center_-_-ms-flex-align);
+  -webkit-align-items: var(--layout-center_-_-webkit-align-items);
+  align-items: var(--layout-center_-_align-items);
+  -ms-flex: var(--layout-flex-none_-_-ms-flex);
+  -webkit-flex: var(--layout-flex-none_-_-webkit-flex);
+  flex: var(--layout-flex-none_-_flex);
+}
+
+#author-photo.yt-live-chat-membership-item-renderer {
+  width: 40px;
+  height: 40px;
+}
+
+yt-icon#author-photo.yt-live-chat-membership-item-renderer {
+  display: none;
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-membership-item-renderer {
+  display: block;
+}
+
+yt-live-chat-membership-item-renderer:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
+  --yt-live-chat-sponsor-color: var(--yt-live-chat-sponsor-text-color);
+  --yt-live-chat-secondary-text-color: var(--yt-live-chat-sponsor-text-color);
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
+  margin-right: 8px;
+  font-weight: 500;
+  --yt-live-chat-sponsor-color: var(--yt-live-chat-secondary-text-color);
+}
+
+#header-subtext.yt-live-chat-membership-item-renderer {
+  margin-top: 2px;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 500;
+  font-size: 15px;
+}
+
+#header-subtext.yt-live-chat-membership-item-renderer:empty {
+  display: none;
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-subtext.yt-live-chat-membership-item-renderer {
+  margin: 4px 0 13px;
+  font-size: 11px;
+  font-weight: normal;
+  color: var(--yt-live-chat-secondary-text-color);
+}
+
+#header-primary-text.yt-live-chat-membership-item-renderer {
+  word-wrap: break-word;
+  word-break: break-word;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 1);
+}
+
+#header-primary-text.yt-live-chat-membership-item-renderer:empty {
+  display: none;
+}
+
+yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer,
+yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) #header-subtext.yt-live-chat-membership-item-renderer {
+  font-size: 12px;
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-primary-text.yt-live-chat-membership-item-renderer {
+  display: inline;
+  height: 24px;
+  min-width: 16px;
+  border-radius: 12px;
+  margin-right: 8px;
+  padding: 0 12px;
+  background-color: var(--yt-live-chat-sponsor-color);
+  color: var(--yt-white);
+  display: var(--layout-inline_-_display, inline);
+  -ms-flex-align: var(--layout-center-center_-_-ms-flex-align);
+  -webkit-align-items: var(--layout-center-center_-_-webkit-align-items);
+  align-items: var(--layout-center-center_-_align-items);
+  -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack);
+  -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content);
+  justify-content: var(--layout-center-center_-_justify-content);
+  font-size: var(--ytd-badge_-_font-size);
+  font-weight: var(--ytd-badge_-_font-weight);
+  line-height: var(--ytd-badge_-_line-height);
+}
+
+#content.yt-live-chat-membership-item-renderer {
+  background-color: var(--yt-live-chat-sponsor-color);
+  color: var(--yt-live-chat-sponsor-text-color);
+  padding: 8px 16px;
+  word-wrap: break-word;
+  word-break: break-word;
+  font-size: 15px;
+  line-height: 20px;
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] #content.yt-live-chat-membership-item-renderer {
+  background-color: unset;
+  font-size: unset;
+  color: var(--yt-live-chat-secondary-text-color);
+  padding: 0 0 16px 72px;
+}
+
+#content.yt-live-chat-membership-item-renderer img.yt-live-chat-membership-item-renderer {
+  width: var(--yt-live-chat-emoji-size);
+  height: var(--yt-live-chat-emoji-size);
+
+  margin: -1px 2px 1px 2px;
+  vertical-align: middle;
+}
+
+yt-live-chat-membership-item-renderer[show-only-header] #content.yt-live-chat-membership-item-renderer,
+#deleted-state.yt-live-chat-membership-item-renderer:empty {
+  display: none;
+}
+
+#deleted-state.yt-live-chat-membership-item-renderer {
+  display: block;
+  font-style: italic;
+  opacity: 0.7;
+}
+
+a.yt-live-chat-membership-item-renderer {
+  display: inline;
+  text-decoration: underline;
+}
+
+#message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer {
+  word-break: break-all;
+}
+
+#message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer .mention.yt-live-chat-membership-item-renderer {
+  text-decoration: underline;
+}
+
+#menu.yt-live-chat-membership-item-renderer {
+  background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-header-color) 100%);
+  border-radius: 0 4px 4px 0;
+}
+
+yt-live-chat-membership-item-renderer[show-only-header] #menu.yt-live-chat-membership-item-renderer {
+  background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-color) 100%);
+}
+
+yt-live-chat-membership-item-renderer[dashboard-money-feed] #menu.yt-live-chat-membership-item-renderer {
+  margin-top: 8px;
+  background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
+}

frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css

@@ -0,0 +1,378 @@
+canvas.yt-live-chat-paid-message-renderer, caption.yt-live-chat-paid-message-renderer, center.yt-live-chat-paid-message-renderer, cite.yt-live-chat-paid-message-renderer, code.yt-live-chat-paid-message-renderer, dd.yt-live-chat-paid-message-renderer, del.yt-live-chat-paid-message-renderer, dfn.yt-live-chat-paid-message-renderer, div.yt-live-chat-paid-message-renderer, dl.yt-live-chat-paid-message-renderer, dt.yt-live-chat-paid-message-renderer, em.yt-live-chat-paid-message-renderer, embed.yt-live-chat-paid-message-renderer, fieldset.yt-live-chat-paid-message-renderer, font.yt-live-chat-paid-message-renderer, form.yt-live-chat-paid-message-renderer, h1.yt-live-chat-paid-message-renderer, h2.yt-live-chat-paid-message-renderer, h3.yt-live-chat-paid-message-renderer, h4.yt-live-chat-paid-message-renderer, h5.yt-live-chat-paid-message-renderer, h6.yt-live-chat-paid-message-renderer, hr.yt-live-chat-paid-message-renderer, i.yt-live-chat-paid-message-renderer, iframe.yt-live-chat-paid-message-renderer, img.yt-live-chat-paid-message-renderer, ins.yt-live-chat-paid-message-renderer, kbd.yt-live-chat-paid-message-renderer, label.yt-live-chat-paid-message-renderer, legend.yt-live-chat-paid-message-renderer, li.yt-live-chat-paid-message-renderer, menu.yt-live-chat-paid-message-renderer, object.yt-live-chat-paid-message-renderer, ol.yt-live-chat-paid-message-renderer, p.yt-live-chat-paid-message-renderer, pre.yt-live-chat-paid-message-renderer, q.yt-live-chat-paid-message-renderer, s.yt-live-chat-paid-message-renderer, samp.yt-live-chat-paid-message-renderer, small.yt-live-chat-paid-message-renderer, span.yt-live-chat-paid-message-renderer, strike.yt-live-chat-paid-message-renderer, strong.yt-live-chat-paid-message-renderer, sub.yt-live-chat-paid-message-renderer, sup.yt-live-chat-paid-message-renderer, table.yt-live-chat-paid-message-renderer, tbody.yt-live-chat-paid-message-renderer, td.yt-live-chat-paid-message-renderer, tfoot.yt-live-chat-paid-message-renderer, th.yt-live-chat-paid-message-renderer, thead.yt-live-chat-paid-message-renderer, tr.yt-live-chat-paid-message-renderer, tt.yt-live-chat-paid-message-renderer, u.yt-live-chat-paid-message-renderer, ul.yt-live-chat-paid-message-renderer, var.yt-live-chat-paid-message-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-paid-message-renderer[hidden] {
+  display: none !important;
+}
+
+#timestamp.yt-live-chat-paid-message-renderer {
+  display: var(--yt-live-chat-item-timestamp-display, inline);
+  margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
+  color: var(--yt-live-chat-tertiary-text-color);
+  font-size: 11px;
+}
+
+#author-photo.yt-live-chat-paid-message-renderer {
+  display: block;
+  margin-right: 16px;
+  overflow: hidden;
+  border-radius: 50%;
+  -ms-flex: none;
+  -webkit-flex: none;
+  flex: none;
+}
+
+#menu-button.yt-live-chat-paid-message-renderer {
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+}
+
+#menu.yt-live-chat-paid-message-renderer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  transform: translateX(100px);
+}
+
+yt-live-chat-paid-message-renderer:hover #menu.yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer[menu-visible] #menu.yt-live-chat-paid-message-renderer {
+  transform: none;
+}
+
+yt-live-chat-paid-message-renderer:focus-within #menu.yt-live-chat-paid-message-renderer {
+  transform: none;
+}
+
+#inline-action-button-container.yt-live-chat-paid-message-renderer {
+  position: absolute;
+  top: -4px;
+  right: 0;
+  bottom: -4px;
+  left: 0;
+  background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
+  display: none;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer {
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  display: var(--yt-live-chat-inline-action-button-container-display, none);
+}
+
+yt-live-chat-paid-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer {
+  display: none;
+}
+
+yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-paid-message-renderer {
+  display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
+}
+
+#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer, #additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
+  --yt-button-icon-size: 36px;
+  --yt-button-icon-padding: 6px;
+  color: hsl(0, 0%, 100%);
+  border-radius: 2px;
+}
+
+#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
+  background: hsla(0, 0%, 6.7%, .8);
+}
+
+#inline-action-buttons.yt-live-chat-paid-message-renderer>.yt-live-chat-paid-message-renderer:hover {
+  background: hsl(0, 0%, 6.7%);
+}
+
+#additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
+  color: var(--yt-live-chat-additional-inline-action-button-color);
+  background: var(--yt-live-chat-additional-inline-action-button-background-color);
+}
+
+#additional-inline-action-buttons.yt-live-chat-paid-message-renderer>.yt-live-chat-paid-message-renderer:hover {
+  background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
+}
+
+#additional-inline-action-buttons.yt-live-chat-paid-message-renderer:not(:empty) {
+  margin-left: 32px;
+}
+
+#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer:not(:first-child) {
+  margin-left: 8px;
+}
+
+yt-live-chat-paid-message-renderer {
+  position: relative;
+  display: block;
+  padding: 4px 24px;
+  font-size: 15px;
+  --yt-live-chat-paid-message-background-color: var(--yt-live-chat-paid-message-primary-color);
+  --yt-live-chat-paid-message-header-background-color: var(--yt-live-chat-paid-message-secondary-color);
+  --yt-live-chat-text-input-field-placeholder-color: var(--yt-live-chat-paid-message-color);
+  --yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] {
+  padding: 0;
+  padding-bottom: 8px;
+  --yt-live-chat-paid-message-background-color: transparent;
+  --yt-live-chat-paid-message-header-background-color: transparent;
+  --yt-live-chat-item-timestamp-display: block;
+}
+
+#card.yt-live-chat-paid-message-renderer {
+  border-radius: 4px;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #card.yt-live-chat-paid-message-renderer {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+#header.yt-live-chat-paid-message-renderer {
+  position: relative;
+  background-color: var(--yt-live-chat-paid-message-header-background-color, #125aac);
+  color: var(--yt-live-chat-paid-message-header-color, #fff);
+  font-weight: 500;
+  padding: 8px 16px;
+  min-height: 20px;
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+yt-live-chat-paid-message-renderer[show-only-header] #header.yt-live-chat-paid-message-renderer {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #header.yt-live-chat-paid-message-renderer {
+  color: var(--yt-live-chat-secondary-text-color);
+  padding-bottom: 0;
+}
+
+#author-photo.yt-live-chat-paid-message-renderer {
+  width: 40px;
+  height: 40px;
+}
+
+yt-icon#author-photo.yt-live-chat-paid-message-renderer {
+  display: none;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-paid-message-renderer {
+  display: block;
+}
+
+#header-content.yt-live-chat-paid-message-renderer {
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -ms-flex: 1 1 0.000000001px;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-flex-basis: 0.000000001px;
+  flex-basis: 0.000000001px;
+  -ms-flex-align: baseline;
+  -webkit-align-items: baseline;
+  align-items: baseline;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content.yt-live-chat-paid-message-renderer {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+#header-content-primary-column.yt-live-chat-paid-message-renderer {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -ms-flex: 1 1 0.000000001px;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-flex-basis: 0.000000001px;
+  flex-basis: 0.000000001px;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content-primary-column.yt-live-chat-paid-message-renderer {
+  margin-bottom: 4px;
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: baseline;
+  -webkit-align-items: baseline;
+  align-items: baseline;
+  -ms-flex: none;
+  -webkit-flex: none;
+  flex: none;
+}
+
+#author-name.yt-live-chat-paid-message-renderer {
+  color: var(--yt-live-chat-paid-message-author-name-color, rgba(255, 255, 255, 0.7));
+  font-size: 14px;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
+  margin-right: 8px;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #purchase-amount.yt-live-chat-paid-message-renderer {
+  display: inline;
+  height: 24px;
+  min-width: 16px;
+  border-radius: 12px;
+  margin-right: 8px;
+  padding: 0 12px;
+  background-color: var(--yt-live-chat-paid-message-primary-color);
+  color: var(--yt-live-chat-paid-message-color);
+  display: inline-flex;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 1.2rem;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
+  display: block;
+  color: var(--yt-live-chat-secondary-text-color);
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer[is-deleted] {
+  margin: 4px 0 0;
+  order: 1;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer[is-deleted].yt-live-chat-paid-message-renderer::before {
+  content: '​';
+  display: inline;
+  width: 0;
+}
+
+#menu.yt-live-chat-paid-message-renderer {
+  background: linear-gradient(to right, transparent, var(--yt-live-chat-paid-message-header-background-color, #125aac) 100%);
+  border-radius: 0 4px 4px 0;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #menu.yt-live-chat-paid-message-renderer {
+  margin-top: 8px;
+  background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
+}
+
+yt-live-chat-paid-message-renderer[allow-animations] #content.yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer[allow-animations] #header.yt-live-chat-paid-message-renderer {
+  transition-property: background-color, color;
+  transition-duration: 0.2s;
+}
+
+#content.yt-live-chat-paid-message-renderer {
+  background-color: var(--yt-live-chat-paid-message-background-color, #1565c0);
+  color: var(--yt-live-chat-paid-message-color, #fff);
+  padding: 8px 16px;
+  word-wrap: break-word;
+  word-break: break-word;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+#content.yt-live-chat-paid-message-renderer img.yt-live-chat-paid-message-renderer {
+  width: var(--yt-live-chat-emoji-size);
+  height: var(--yt-live-chat-emoji-size);
+  margin: -1px 2px 1px 2px;
+  vertical-align: middle;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #content.yt-live-chat-paid-message-renderer {
+  padding: 0;
+  padding-left: 72px;
+  color: var(--yt-live-chat-secondary-text-color);
+}
+
+yt-live-chat-paid-message-renderer[show-only-header] #content.yt-live-chat-paid-message-renderer {
+  visibility: hidden;
+  padding: 0;
+}
+
+a.yt-live-chat-paid-message-renderer {
+  display: inline;
+  text-decoration: underline;
+}
+
+#message.yt-live-chat-paid-message-renderer a.yt-live-chat-paid-message-renderer {
+  word-break: break-all;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #message.yt-live-chat-paid-message-renderer {
+  margin-top: 4px;
+}
+
+#message.yt-live-chat-paid-message-renderer a.yt-live-chat-paid-message-renderer .mention.yt-live-chat-paid-message-renderer {
+  text-decoration: underline;
+}
+
+#message.yt-live-chat-paid-message-renderer:empty, #author-name.yt-live-chat-paid-message-renderer:empty:not([is-deleted]).yt-live-chat-paid-message-renderer, #deleted-state.yt-live-chat-paid-message-renderer:empty {
+  display: none;
+}
+
+#deleted-state.yt-live-chat-paid-message-renderer {
+  display: block;
+  font-style: italic;
+  opacity: 0.7;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #deleted-state.yt-live-chat-paid-message-renderer[is-deleted] {
+  margin-top: 4px;
+}
+
+yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
+  -ms-flex: none;
+  -webkit-flex: none;
+  flex: none;
+}
+
+yt-live-chat-paid-message-renderer[show-footer-divider] #footer.yt-live-chat-paid-message-renderer::before {
+  content: "";
+  display: flex;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  margin: 8px 0;
+}
+
+yt-live-chat-paid-message-renderer[is-user-editable] #footer.yt-live-chat-paid-message-renderer:not(:empty) {
+  padding-top: 8px;
+}

frontend/src/assets/css/youtube/yt-live-chat-renderer.css

@@ -0,0 +1,252 @@
+yt-live-chat-renderer, yt-live-chat-item-list-renderer #item-scroller {
+  height: 100%;
+}
+
+yt-live-chat-renderer ::-webkit-scrollbar {
+  content: '';
+}
+
+yt-live-chat-renderer ::-webkit-scrollbar-thumb {
+  background-color: hsla(0, 0%, 53.3%, .2);
+  border: 2px solid #fcfcfc;
+  min-height: 30px;
+}
+
+yt-live-chat-renderer ::-webkit-scrollbar-track {
+  background-color: #fcfcfc;
+}
+
+
+canvas.yt-live-chat-renderer, caption.yt-live-chat-renderer, center.yt-live-chat-renderer, cite.yt-live-chat-renderer, code.yt-live-chat-renderer, dd.yt-live-chat-renderer, del.yt-live-chat-renderer, dfn.yt-live-chat-renderer, div.yt-live-chat-renderer, dl.yt-live-chat-renderer, dt.yt-live-chat-renderer, em.yt-live-chat-renderer, embed.yt-live-chat-renderer, fieldset.yt-live-chat-renderer, font.yt-live-chat-renderer, form.yt-live-chat-renderer, h1.yt-live-chat-renderer, h2.yt-live-chat-renderer, h3.yt-live-chat-renderer, h4.yt-live-chat-renderer, h5.yt-live-chat-renderer, h6.yt-live-chat-renderer, hr.yt-live-chat-renderer, i.yt-live-chat-renderer, iframe.yt-live-chat-renderer, img.yt-live-chat-renderer, ins.yt-live-chat-renderer, kbd.yt-live-chat-renderer, label.yt-live-chat-renderer, legend.yt-live-chat-renderer, li.yt-live-chat-renderer, menu.yt-live-chat-renderer, object.yt-live-chat-renderer, ol.yt-live-chat-renderer, p.yt-live-chat-renderer, pre.yt-live-chat-renderer, q.yt-live-chat-renderer, s.yt-live-chat-renderer, samp.yt-live-chat-renderer, small.yt-live-chat-renderer, span.yt-live-chat-renderer, strike.yt-live-chat-renderer, strong.yt-live-chat-renderer, sub.yt-live-chat-renderer, sup.yt-live-chat-renderer, table.yt-live-chat-renderer, tbody.yt-live-chat-renderer, td.yt-live-chat-renderer, tfoot.yt-live-chat-renderer, th.yt-live-chat-renderer, thead.yt-live-chat-renderer, tr.yt-live-chat-renderer, tt.yt-live-chat-renderer, u.yt-live-chat-renderer, ul.yt-live-chat-renderer, var.yt-live-chat-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-renderer[hidden] {
+  display: none !important;
+}
+
+yt-live-chat-renderer {
+  font-size: 13px;
+  --yt-emoji-picker-renderer-height: 180px;
+  --yt-button-default-text-color: var(--yt-live-chat-button-default-text-color);
+  --yt-button-default-background-color: var(--yt-live-chat-button-default-background-color);
+  --yt-button-dark-text-color: var(--yt-live-chat-button-dark-text-color);
+  --yt-button-dark-background-color: var(--yt-live-chat-button-dark-background-color);
+  --yt-button-payment-background-color: var(--yt-live-chat-sponsor-color);
+}
+
+yt-live-chat-renderer {
+  position: relative;
+  background: var(--yt-live-chat-background-color);
+  color: var(--yt-live-chat-primary-text-color);
+  overflow: hidden;
+  z-index: 0;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+yt-live-chat-renderer[hide-timestamps] {
+  --yt-live-chat-item-timestamp-display: none;
+}
+
+#separator.yt-live-chat-renderer {
+  border-bottom: var(--yt-live-chat-header-bottom-border, none);
+}
+
+#content-pages.yt-live-chat-renderer {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex: 1 1 0.000000001px;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-flex-basis: 0.000000001px;
+  flex-basis: 0.000000001px;
+}
+
+#panel-pages.yt-live-chat-renderer {
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+#contents.yt-live-chat-renderer {
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+
+#chat-messages.yt-live-chat-renderer, #contents.yt-live-chat-renderer, #item-list.yt-live-chat-renderer {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex: 1 1 0.000000001px;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-flex-basis: 0.000000001px;
+  flex-basis: 0.000000001px;
+}
+
+#ticker.yt-live-chat-renderer {
+  z-index: 1;
+}
+
+#chat.yt-live-chat-renderer {
+  position: relative;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex: 1 1 0.000000001px;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-flex-basis: 0.000000001px;
+  flex-basis: 0.000000001px;
+}
+
+#chat.yt-live-chat-renderer::after {
+  content: '';
+  display: none;
+  animation: gradient-slide 1.2s ease infinite;
+  animation-name: gradient-slide;
+  background-color: var(--yt-live-chat-shimmer-background-color);
+  background-image: var(--yt-live-chat-shimmer-linear-gradient);
+  background-size: 300% 300%;
+  transform: rotateX(180deg);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+yt-live-chat-renderer[loading] #chat.yt-live-chat-renderer::after {
+  display: block;
+}
+
+yt-live-chat-pinned-message-renderer.yt-live-chat-renderer {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+yt-live-chat-item-list-renderer.yt-live-chat-renderer, yt-live-chat-ninja-message-renderer.yt-live-chat-renderer {
+  -ms-flex: 1 1 0.000000001px;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-flex-basis: 0.000000001px;
+  flex-basis: 0.000000001px;
+}
+
+#action-panel.yt-live-chat-renderer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+yt-live-chat-renderer[has-action-panel-renderer] yt-live-chat-action-panel-renderer.yt-live-chat-renderer {
+  animation: slideUp cubic-bezier(0.05, 0.00, 0.00, 1.00) forwards;
+  animation-duration: 0.5s;
+}
+
+#action-panel-backdrop.yt-live-chat-renderer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  visibility: hidden;
+}
+
+yt-live-chat-renderer[has-action-panel-renderer] #action-panel-backdrop.yt-live-chat-renderer {
+  visibility: visible;
+  animation: fadeIn cubic-bezier(0.05, 0.00, 0.00, 1.00) forwards;
+  animation-duration: 0.5s;
+}
+
+#input-panel.yt-live-chat-renderer {
+  -ms-flex: none;
+  -webkit-flex: none;
+  flex: none;
+}
+
+#input-panel.yt-live-chat-renderer:not(:empty) {
+  border-top: var(--yt-live-chat-action-panel-top-border, none);
+}
+
+.hide-on-collapse.yt-live-chat-renderer {
+  transition: opacity 0.3s;
+}
+
+yt-live-chat-renderer[collapsed] .hide-on-collapse.yt-live-chat-renderer {
+  opacity: 0;
+}
+
+#loading.yt-live-chat-renderer {
+  height: 387px;
+  background-color: var(--yt-live-chat-action-panel-background-color);
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+#loading.yt-live-chat-renderer>paper-spinner-lite.yt-live-chat-renderer {
+  --paper-spinner-color: var(--yt-live-chat-primary-text-color);
+}
+
+#nitrate-promo.yt-live-chat-renderer>*.yt-live-chat-renderer {
+  background: var(--yt-live-chat-overlay-color);
+  z-index: 3;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@keyframes gradient-slide {
+  0% {
+    background-position: 100% 100%;
+  }
+  to {
+    background-position: 0% 0%;
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(15%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    background-color: transparent;
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.60);
+  }
+}

frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css

@@ -0,0 +1,230 @@
+canvas.yt-live-chat-text-message-renderer, caption.yt-live-chat-text-message-renderer, center.yt-live-chat-text-message-renderer, cite.yt-live-chat-text-message-renderer, code.yt-live-chat-text-message-renderer, dd.yt-live-chat-text-message-renderer, del.yt-live-chat-text-message-renderer, dfn.yt-live-chat-text-message-renderer, div.yt-live-chat-text-message-renderer, dl.yt-live-chat-text-message-renderer, dt.yt-live-chat-text-message-renderer, em.yt-live-chat-text-message-renderer, embed.yt-live-chat-text-message-renderer, fieldset.yt-live-chat-text-message-renderer, font.yt-live-chat-text-message-renderer, form.yt-live-chat-text-message-renderer, h1.yt-live-chat-text-message-renderer, h2.yt-live-chat-text-message-renderer, h3.yt-live-chat-text-message-renderer, h4.yt-live-chat-text-message-renderer, h5.yt-live-chat-text-message-renderer, h6.yt-live-chat-text-message-renderer, hr.yt-live-chat-text-message-renderer, i.yt-live-chat-text-message-renderer, iframe.yt-live-chat-text-message-renderer, img.yt-live-chat-text-message-renderer, ins.yt-live-chat-text-message-renderer, kbd.yt-live-chat-text-message-renderer, label.yt-live-chat-text-message-renderer, legend.yt-live-chat-text-message-renderer, li.yt-live-chat-text-message-renderer, menu.yt-live-chat-text-message-renderer, object.yt-live-chat-text-message-renderer, ol.yt-live-chat-text-message-renderer, p.yt-live-chat-text-message-renderer, pre.yt-live-chat-text-message-renderer, q.yt-live-chat-text-message-renderer, s.yt-live-chat-text-message-renderer, samp.yt-live-chat-text-message-renderer, small.yt-live-chat-text-message-renderer, span.yt-live-chat-text-message-renderer, strike.yt-live-chat-text-message-renderer, strong.yt-live-chat-text-message-renderer, sub.yt-live-chat-text-message-renderer, sup.yt-live-chat-text-message-renderer, table.yt-live-chat-text-message-renderer, tbody.yt-live-chat-text-message-renderer, td.yt-live-chat-text-message-renderer, tfoot.yt-live-chat-text-message-renderer, th.yt-live-chat-text-message-renderer, thead.yt-live-chat-text-message-renderer, tr.yt-live-chat-text-message-renderer, tt.yt-live-chat-text-message-renderer, u.yt-live-chat-text-message-renderer, ul.yt-live-chat-text-message-renderer, var.yt-live-chat-text-message-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-text-message-renderer[hidden] {
+  display: none !important;
+}
+
+#timestamp.yt-live-chat-text-message-renderer {
+  display: var(--yt-live-chat-item-timestamp-display, inline);
+  margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
+  color: var(--yt-live-chat-tertiary-text-color);
+  font-size: 11px;
+}
+
+#author-photo.yt-live-chat-text-message-renderer {
+  display: block;
+  margin-right: 16px;
+  overflow: hidden;
+  border-radius: 50%;
+  -ms-flex: none;
+  -webkit-flex: none;
+  flex: none;
+}
+
+#menu-button.yt-live-chat-text-message-renderer {
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+}
+
+#menu.yt-live-chat-text-message-renderer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  transform: translateX(100px);
+}
+
+yt-live-chat-text-message-renderer:hover #menu.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[menu-visible] #menu.yt-live-chat-text-message-renderer {
+  transform: none;
+}
+
+yt-live-chat-text-message-renderer:focus-within #menu.yt-live-chat-text-message-renderer {
+  transform: none;
+}
+
+#inline-action-button-container.yt-live-chat-text-message-renderer {
+  position: absolute;
+  top: -4px;
+  right: 0;
+  bottom: -4px;
+  left: 0;
+  background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
+  display: none;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer {
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  display: var(--yt-live-chat-inline-action-button-container-display, none);
+}
+
+yt-live-chat-text-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer {
+  display: none;
+}
+
+yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-text-message-renderer {
+  display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
+}
+
+#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer, #additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
+  --yt-button-icon-size: 36px;
+  --yt-button-icon-padding: 6px;
+  color: hsl(0, 0%, 100%);
+  border-radius: 2px;
+}
+
+#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
+  background: hsla(0, 0%, 6.7%, .8);
+}
+
+#inline-action-buttons.yt-live-chat-text-message-renderer>.yt-live-chat-text-message-renderer:hover {
+  background: hsl(0, 0%, 6.7%);
+}
+
+#additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
+  color: var(--yt-live-chat-additional-inline-action-button-color);
+  background: var(--yt-live-chat-additional-inline-action-button-background-color);
+}
+
+#additional-inline-action-buttons.yt-live-chat-text-message-renderer>.yt-live-chat-text-message-renderer:hover {
+  background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
+}
+
+#additional-inline-action-buttons.yt-live-chat-text-message-renderer:not(:empty) {
+  margin-left: 32px;
+}
+
+#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer:not(:first-child) {
+  margin-left: 8px;
+}
+
+yt-live-chat-text-message-renderer {
+  position: relative;
+  font-size: 13px;
+  padding: 4px 24px;
+  overflow: hidden;
+  --yt-endpoint-color: var(--yt-live-chat-primary-text-color, hsl(0, 0%, 6.7%));
+  --yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color, var(--yt-endpoint-color));
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+}
+
+yt-live-chat-text-message-renderer:hover {
+  overflow: initial;
+}
+
+yt-live-chat-text-message-renderer[author-is-owner] {
+  background-color: var(--yt-live-chat-message-highlight-background-color);
+}
+
+#content.yt-live-chat-text-message-renderer {
+  -ms-align-self: center;
+  -webkit-align-self: center;
+  align-self: center;
+  min-width: 0;
+}
+
+yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
+  margin-right: 8px;
+}
+
+#message.yt-live-chat-text-message-renderer {
+  color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color));
+  line-height: 16px;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  font-style: var(--yt-live-chat-text-message-renderer-message-message-style_-_font-style);
+  opacity: var(--yt-live-chat-text-message-renderer-message-message-style_-_opacity);
+}
+
+#message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer {
+  width: var(--yt-live-chat-emoji-size);
+  height: var(--yt-live-chat-emoji-size);
+  margin: -1px 2px 1px 2px;
+  vertical-align: middle;
+}
+
+a.yt-live-chat-text-message-renderer {
+  display: inline;
+  text-decoration: underline;
+}
+
+#message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer {
+  display: inline;
+  text-decoration: underline;
+  word-break: break-all;
+}
+
+#message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer .mention.yt-live-chat-text-message-renderer {
+  text-decoration: underline;
+}
+
+#show-original.yt-live-chat-text-message-renderer {
+  margin-left: 2px;
+}
+
+#message.yt-live-chat-text-message-renderer:empty, #deleted-state.yt-live-chat-text-message-renderer:empty, #show-original.yt-live-chat-text-message-renderer:empty, yt-live-chat-text-message-renderer[show-original] #deleted-state.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[show-original] #show-original.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[is-deleted]:not([show-original]) #message.yt-live-chat-text-message-renderer {
+  display: none;
+}
+
+#menu.yt-live-chat-text-message-renderer {
+  color: var(--yt-live-chat-secondary-text-color);
+  background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color, hsl(0, 0%, 100%)) 100%);
+}
+
+.mention.yt-live-chat-text-message-renderer {
+  background: var(--yt-live-chat-mention-background-color);
+  color: var(--yt-live-chat-mention-text-color);
+  padding: 2px 4px;
+  border-radius: 2px;
+}
+
+#deleted-state.yt-live-chat-text-message-renderer, #show-original.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[is-deleted] #message.yt-live-chat-text-message-renderer {
+  font-style: italic;
+  color: var(--yt-live-chat-deleted-message-color, rgba(0, 0, 0, 0.5));
+}
+
+yt-live-chat-text-message-renderer[show-bar]::before {
+  content: '';
+  position: absolute;
+  display: block;
+  left: 8px;
+  top: 4px;
+  bottom: 4px;
+  width: 4px;
+  box-sizing: border-box;
+  border-radius: 2px;
+}
+
+yt-live-chat-text-message-renderer[is-deleted]::before {
+  background: var(--yt-live-chat-deleted-message-bar-color, rgba(0, 0, 0, 0.5));
+}
+
+yt-live-chat-text-message-renderer[is-dimmed] #message.yt-live-chat-text-message-renderer {
+  opacity: 0.25;
+}
+
+yt-live-chat-text-message-renderer[is-dimmed]::before {
+  background: var(--yt-live-chat-error-message-color, #f44336);
+}

frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css

@@ -0,0 +1,80 @@
+canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-ticker-paid-message-item-renderer[hidden] {
+  display: none !important;
+}
+
+canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-ticker-paid-message-item-renderer[hidden] {
+  display: none !important;
+}
+
+yt-live-chat-ticker-paid-message-item-renderer {
+  display: inline-block;
+  font-size: 14px;
+  outline: none;
+  transition: width 0.2s;
+  vertical-align: top;
+  cursor: pointer;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#container.yt-live-chat-ticker-paid-message-item-renderer {
+  border-radius: 999px;
+  padding: 4px;
+}
+
+yt-live-chat-ticker-paid-message-item-renderer.sliding-down #container.yt-live-chat-ticker-paid-message-item-renderer {
+  opacity: 0.5;
+  transform: translateY(44px);
+  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1);
+}
+
+yt-live-chat-ticker-paid-message-item-renderer.collapsing {
+  margin-right: 0;
+  transition: margin-right 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+yt-live-chat-ticker-paid-message-item-renderer[dimmed] {
+  opacity: 0.5;
+}
+
+yt-img-shadow.yt-live-chat-ticker-paid-message-item-renderer {
+  margin-right: -4px;
+  overflow: hidden;
+  border-radius: 50%;
+}
+
+#content.yt-live-chat-ticker-paid-message-item-renderer {
+  height: 24px;
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+#text.yt-live-chat-ticker-paid-message-item-renderer {
+  margin: 0 8px;
+  font-weight: 500;
+}
+
+yt-live-chat-ticker-paid-message-item-renderer[is-deleted] #author-photo.yt-live-chat-ticker-paid-message-item-renderer {
+  display: none;
+}

frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css

@@ -0,0 +1,65 @@
+canvas.yt-live-chat-ticker-renderer, caption.yt-live-chat-ticker-renderer, center.yt-live-chat-ticker-renderer, cite.yt-live-chat-ticker-renderer, code.yt-live-chat-ticker-renderer, dd.yt-live-chat-ticker-renderer, del.yt-live-chat-ticker-renderer, dfn.yt-live-chat-ticker-renderer, div.yt-live-chat-ticker-renderer, dl.yt-live-chat-ticker-renderer, dt.yt-live-chat-ticker-renderer, em.yt-live-chat-ticker-renderer, embed.yt-live-chat-ticker-renderer, fieldset.yt-live-chat-ticker-renderer, font.yt-live-chat-ticker-renderer, form.yt-live-chat-ticker-renderer, h1.yt-live-chat-ticker-renderer, h2.yt-live-chat-ticker-renderer, h3.yt-live-chat-ticker-renderer, h4.yt-live-chat-ticker-renderer, h5.yt-live-chat-ticker-renderer, h6.yt-live-chat-ticker-renderer, hr.yt-live-chat-ticker-renderer, i.yt-live-chat-ticker-renderer, iframe.yt-live-chat-ticker-renderer, img.yt-live-chat-ticker-renderer, ins.yt-live-chat-ticker-renderer, kbd.yt-live-chat-ticker-renderer, label.yt-live-chat-ticker-renderer, legend.yt-live-chat-ticker-renderer, li.yt-live-chat-ticker-renderer, menu.yt-live-chat-ticker-renderer, object.yt-live-chat-ticker-renderer, ol.yt-live-chat-ticker-renderer, p.yt-live-chat-ticker-renderer, pre.yt-live-chat-ticker-renderer, q.yt-live-chat-ticker-renderer, s.yt-live-chat-ticker-renderer, samp.yt-live-chat-ticker-renderer, small.yt-live-chat-ticker-renderer, span.yt-live-chat-ticker-renderer, strike.yt-live-chat-ticker-renderer, strong.yt-live-chat-ticker-renderer, sub.yt-live-chat-ticker-renderer, sup.yt-live-chat-ticker-renderer, table.yt-live-chat-ticker-renderer, tbody.yt-live-chat-ticker-renderer, td.yt-live-chat-ticker-renderer, tfoot.yt-live-chat-ticker-renderer, th.yt-live-chat-ticker-renderer, thead.yt-live-chat-ticker-renderer, tr.yt-live-chat-ticker-renderer, tt.yt-live-chat-ticker-renderer, u.yt-live-chat-ticker-renderer, ul.yt-live-chat-ticker-renderer, var.yt-live-chat-ticker-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-ticker-renderer[hidden] {
+  display: none !important;
+}
+
+yt-live-chat-ticker-renderer {
+  display: block;
+  background-color: var(--yt-live-chat-header-background-color);
+}
+
+#container.yt-live-chat-ticker-renderer {
+  position: relative;
+}
+
+#items.yt-live-chat-ticker-renderer {
+  height: 32px;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0 24px 8px 24px;
+}
+
+#items.yt-live-chat-ticker-renderer>*.yt-live-chat-ticker-renderer {
+  margin-right: 8px;
+}
+
+#left-arrow-container.yt-live-chat-ticker-renderer {
+  background: linear-gradient(to right, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px);
+  left: 0;
+  padding: 0 16px 0 12px;
+}
+
+#right-arrow-container.yt-live-chat-ticker-renderer {
+  background: linear-gradient(to left, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px);
+  right: 0;
+  padding: 0 12px 0 16px;
+}
+
+#container.yt-live-chat-ticker-renderer:hover #left-arrow-container.yt-live-chat-ticker-renderer, #container.yt-live-chat-ticker-renderer:hover #right-arrow-container.yt-live-chat-ticker-renderer {
+  opacity: 1;
+}
+
+#left-arrow-container.yt-live-chat-ticker-renderer, #right-arrow-container.yt-live-chat-ticker-renderer {
+  height: 32px;
+  opacity: 0;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  transition: opacity 0.3s 0.1s;
+}
+
+yt-icon.yt-live-chat-ticker-renderer {
+  background-color: #2196f3;
+  border-radius: 999px;
+  color: #fff;
+  cursor: pointer;
+  height: 24px;
+  padding: 4px;
+  width: 24px;
+}

frontend/src/components/ChatRenderer/AuthorBadge.vue

@@ -46,76 +46,5 @@ export default {
 }
 </script>
 
-<!-- yt-live-chat-author-badge-renderer -->
-<style>
-canvas.yt-live-chat-author-badge-renderer, caption.yt-live-chat-author-badge-renderer, center.yt-live-chat-author-badge-renderer, cite.yt-live-chat-author-badge-renderer, code.yt-live-chat-author-badge-renderer, dd.yt-live-chat-author-badge-renderer, del.yt-live-chat-author-badge-renderer, dfn.yt-live-chat-author-badge-renderer, div.yt-live-chat-author-badge-renderer, dl.yt-live-chat-author-badge-renderer, dt.yt-live-chat-author-badge-renderer, em.yt-live-chat-author-badge-renderer, embed.yt-live-chat-author-badge-renderer, fieldset.yt-live-chat-author-badge-renderer, font.yt-live-chat-author-badge-renderer, form.yt-live-chat-author-badge-renderer, h1.yt-live-chat-author-badge-renderer, h2.yt-live-chat-author-badge-renderer, h3.yt-live-chat-author-badge-renderer, h4.yt-live-chat-author-badge-renderer, h5.yt-live-chat-author-badge-renderer, h6.yt-live-chat-author-badge-renderer, hr.yt-live-chat-author-badge-renderer, i.yt-live-chat-author-badge-renderer, iframe.yt-live-chat-author-badge-renderer, img.yt-live-chat-author-badge-renderer, ins.yt-live-chat-author-badge-renderer, kbd.yt-live-chat-author-badge-renderer, label.yt-live-chat-author-badge-renderer, legend.yt-live-chat-author-badge-renderer, li.yt-live-chat-author-badge-renderer, menu.yt-live-chat-author-badge-renderer, object.yt-live-chat-author-badge-renderer, ol.yt-live-chat-author-badge-renderer, p.yt-live-chat-author-badge-renderer, pre.yt-live-chat-author-badge-renderer, q.yt-live-chat-author-badge-renderer, s.yt-live-chat-author-badge-renderer, samp.yt-live-chat-author-badge-renderer, small.yt-live-chat-author-badge-renderer, span.yt-live-chat-author-badge-renderer, strike.yt-live-chat-author-badge-renderer, strong.yt-live-chat-author-badge-renderer, sub.yt-live-chat-author-badge-renderer, sup.yt-live-chat-author-badge-renderer, table.yt-live-chat-author-badge-renderer, tbody.yt-live-chat-author-badge-renderer, td.yt-live-chat-author-badge-renderer, tfoot.yt-live-chat-author-badge-renderer, th.yt-live-chat-author-badge-renderer, thead.yt-live-chat-author-badge-renderer, tr.yt-live-chat-author-badge-renderer, tt.yt-live-chat-author-badge-renderer, u.yt-live-chat-author-badge-renderer, ul.yt-live-chat-author-badge-renderer, var.yt-live-chat-author-badge-renderer {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-author-badge-renderer[hidden] {
-  display: none !important;
-}
-
-yt-live-chat-author-badge-renderer {
-  display: inline-block;
-}
-
-yt-live-chat-author-badge-renderer[type='moderator'] {
-  color: var(--yt-live-chat-moderator-color, #5e84f1);
-}
-
-yt-live-chat-author-badge-renderer[type='owner'] {
-  color: var(--yt-live-chat-owner-color, #ffd600);
-}
-
-yt-live-chat-author-badge-renderer[type='member'] {
-  color: var(--yt-live-chat-sponsor-color, #107516);
-}
-
-yt-live-chat-author-badge-renderer[type='verified'] {
-  color: #999;
-}
-
-img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer {
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-</style>
-
-<!-- yt-icon -->
-<style>
-canvas.yt-icon, caption.yt-icon, center.yt-icon, cite.yt-icon, code.yt-icon, dd.yt-icon, del.yt-icon, dfn.yt-icon, div.yt-icon, dl.yt-icon, dt.yt-icon, em.yt-icon, embed.yt-icon, fieldset.yt-icon, font.yt-icon, form.yt-icon, h1.yt-icon, h2.yt-icon, h3.yt-icon, h4.yt-icon, h5.yt-icon, h6.yt-icon, hr.yt-icon, i.yt-icon, iframe.yt-icon, img.yt-icon, ins.yt-icon, kbd.yt-icon, label.yt-icon, legend.yt-icon, li.yt-icon, menu.yt-icon, object.yt-icon, ol.yt-icon, p.yt-icon, pre.yt-icon, q.yt-icon, s.yt-icon, samp.yt-icon, small.yt-icon, span.yt-icon, strike.yt-icon, strong.yt-icon, sub.yt-icon, sup.yt-icon, table.yt-icon, tbody.yt-icon, td.yt-icon, tfoot.yt-icon, th.yt-icon, thead.yt-icon, tr.yt-icon, tt.yt-icon, u.yt-icon, ul.yt-icon, var.yt-icon {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-icon[hidden] {
-  display: none !important;
-}
-
-yt-icon, .yt-icon-container.yt-icon {
-  display: inline-flex;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  position: relative;
-  vertical-align: middle;
-  fill: currentcolor;
-  stroke: none;
-  width: var(--iron-icon-width, 24px);
-  height: var(--iron-icon-height, 24px);
-}
-
-yt-icon.external-container {
-  display: none !important;
-}
-</style>
+<style src="@/assets/css/youtube/yt-live-chat-author-badge-renderer.css"></style>
+<style src="@/assets/css/youtube/yt-icon.css"></style>

frontend/src/components/ChatRenderer/ImgShadow.vue

@@ -1,88 +1,37 @@
 <template>
   <yt-img-shadow class="no-transition" :height="height" :width="width" style="background-color: transparent;" loaded>
-    <img id="img" class="style-scope yt-img-shadow" alt="" :height="height" :width="width" :src="imgUrl">
+    <img id="img" class="style-scope yt-img-shadow" alt="" :height="height" :width="width" :src="showImgUrl" @error="onLoadError">
   </yt-img-shadow>
 </template>
 
 <script>
+import {DEFAULT_AVATAR_URL} from '@/api/chat/avatar'
+
 export default {
   name: 'ImgShadow',
   props: {
     imgUrl: String,
     height: String,
     width: String
+  },
+  data() {
+    return {
+      showImgUrl: this.imgUrl
+    }
+  },
+  watch: {
+    imgUrl(val) {
+      this.showImgUrl = val
+    }
+  },
+  methods: {
+    onLoadError() {
+      if (this.showImgUrl !== DEFAULT_AVATAR_URL) {
+        this.showImgUrl = DEFAULT_AVATAR_URL
+      }
+    }
   }
 }
 </script>
 
-<!-- yt-img-shadow -->
-<style>
-canvas.yt-img-shadow, caption.yt-img-shadow, center.yt-img-shadow, cite.yt-img-shadow, code.yt-img-shadow, dd.yt-img-shadow, del.yt-img-shadow, dfn.yt-img-shadow, div.yt-img-shadow, dl.yt-img-shadow, dt.yt-img-shadow, em.yt-img-shadow, embed.yt-img-shadow, fieldset.yt-img-shadow, font.yt-img-shadow, form.yt-img-shadow, h1.yt-img-shadow, h2.yt-img-shadow, h3.yt-img-shadow, h4.yt-img-shadow, h5.yt-img-shadow, h6.yt-img-shadow, hr.yt-img-shadow, i.yt-img-shadow, iframe.yt-img-shadow, img.yt-img-shadow, ins.yt-img-shadow, kbd.yt-img-shadow, label.yt-img-shadow, legend.yt-img-shadow, li.yt-img-shadow, menu.yt-img-shadow, object.yt-img-shadow, ol.yt-img-shadow, p.yt-img-shadow, pre.yt-img-shadow, q.yt-img-shadow, s.yt-img-shadow, samp.yt-img-shadow, small.yt-img-shadow, span.yt-img-shadow, strike.yt-img-shadow, strong.yt-img-shadow, sub.yt-img-shadow, sup.yt-img-shadow, table.yt-img-shadow, tbody.yt-img-shadow, td.yt-img-shadow, tfoot.yt-img-shadow, th.yt-img-shadow, thead.yt-img-shadow, tr.yt-img-shadow, tt.yt-img-shadow, u.yt-img-shadow, ul.yt-img-shadow, var.yt-img-shadow {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-img-shadow[hidden] {
-  display: none !important;
-}
-
-yt-img-shadow {
-  display: inline-block;
-  opacity: 0;
-  transition: opacity 0.2s;
-  -ms-flex: none;
-  -webkit-flex: none;
-  flex: none;
-}
-
-yt-img-shadow.no-transition {
-  opacity: 1;
-  transition: none;
-}
-
-yt-img-shadow.with-placeholder {
-  background-color: transparent;
-  min-height: unset;
-  min-width: unset;
-}
-
-yt-img-shadow[loaded] {
-  opacity: 1;
-}
-
-yt-img-shadow.empty img.yt-img-shadow {
-  visibility: hidden;
-}
-
-yt-img-shadow[object-fit="FILL"] img.yt-img-shadow, yt-img-shadow[fit] img.yt-img-shadow {
-  width: 100%;
-  height: 100%;
-}
-
-yt-img-shadow[object-fit="COVER"] img.yt-img-shadow {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-yt-img-shadow[object-fit="CONTAIN"] img.yt-img-shadow {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-yt-img-shadow[object-position="LEFT"] img.yt-img-shadow {
-  object-position: left;
-}
-
-img.yt-img-shadow {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  max-height: none;
-  max-width: 100%;
-  border-radius: none;
-}
-</style>
+<style src="@/assets/css/youtube/yt-img-shadow.css"></style>

frontend/src/components/ChatRenderer/MembershipItem.vue

@@ -56,366 +56,4 @@ export default {
 }
 </script>
 
-<!-- yt-live-chat-membership-item-renderer -->
-<style>
-#timestamp.yt-live-chat-membership-item-renderer {
-  display: var(--yt-live-chat-item-timestamp-display, inline);
-  margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
-  color: var(--yt-live-chat-tertiary-text-color);
-  font-size: 11px;
-}
-
-#author-photo.yt-live-chat-membership-item-renderer {
-  display: block;
-  margin-right: 16px;
-
-  overflow: hidden;
-  border-radius: 50%;
-
-  -ms-flex: var(--layout-flex-none_-_-ms-flex);
-  -webkit-flex: var(--layout-flex-none_-_-webkit-flex);
-  flex: var(--layout-flex-none_-_flex);
-}
-
-#menu-button.yt-live-chat-membership-item-renderer {
-  width: var(--yt-live-chat-32px-icon-button_-_width);
-  height: var(--yt-live-chat-32px-icon-button_-_height);
-  padding: var(--yt-live-chat-32px-icon-button_-_padding);
-}
-
-#menu.yt-live-chat-membership-item-renderer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-
-
-  transform: translateX(100px);
-}
-
-yt-live-chat-membership-item-renderer:hover #menu.yt-live-chat-membership-item-renderer,
-yt-live-chat-membership-item-renderer[menu-visible] #menu.yt-live-chat-membership-item-renderer {
-  transform: none;
-}
-
-yt-live-chat-membership-item-renderer:focus-within #menu.yt-live-chat-membership-item-renderer {
-  transform: none;
-}
-
-#inline-action-button-container.yt-live-chat-membership-item-renderer {
-  position: absolute;
-  top: -4px;
-  right: 0;
-  bottom: -4px;
-  left: 0;
-
-  background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
-  display: none;
-
-  -ms-flex-align: var(--layout-center-center_-_-ms-flex-align);
-  -webkit-align-items: var(--layout-center-center_-_-webkit-align-items);
-  align-items: var(--layout-center-center_-_align-items);
-  -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack);
-  -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content);
-  justify-content: var(--layout-center-center_-_justify-content);
-}
-
-yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer {
-  display: var(--layout-horizontal_-_display);
-  -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
-  -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
-  flex-direction: var(--layout-horizontal_-_flex-direction);
-
-
-  display: var(--yt-live-chat-inline-action-button-container-display, none);
-}
-
-yt-live-chat-membership-item-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer {
-  display: none;
-}
-
-yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-membership-item-renderer {
-  display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
-}
-
-#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer,
-#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
-  --yt-button-icon-size: 36px;
-  --yt-button-icon-padding: 6px;
-
-  color: var(--yt-white);
-  border-radius: 2px;
-}
-
-#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
-  background: var(--yt-luna-black-opacity-lighten-1);
-}
-
-#inline-action-buttons.yt-live-chat-membership-item-renderer>.yt-live-chat-membership-item-renderer:hover {
-  background: var(--yt-luna-black);
-}
-
-#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
-  color: var(--yt-live-chat-additional-inline-action-button-color);
-  background: var(--yt-live-chat-additional-inline-action-button-background-color);
-}
-
-#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>.yt-live-chat-membership-item-renderer:hover {
-  background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
-}
-
-#additional-inline-action-buttons.yt-live-chat-membership-item-renderer:not(:empty) {
-  margin-left: 32px;
-}
-
-#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer:not(:first-child),
-#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer:not(:first-child) {
-  margin-left: 8px;
-}
-
-yt-live-chat-membership-item-renderer {
-  position: relative;
-  display: block;
-
-  --yt-live-chat-sponsor-header-color: #0a8043;
-  --yt-live-chat-sponsor-color: #0f9d58;
-  --yt-live-chat-sponsor-text-color: #fff;
-  --yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
-
-  padding: 4px 24px;
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] {
-  padding: 0;
-
-  --yt-live-chat-item-timestamp-display: block;
-}
-
-#card.yt-live-chat-membership-item-renderer {
-  overflow: hidden;
-  font-size: 14px;
-  border-radius: 4px;
-
-  display: var(--layout-vertical_-_display);
-  -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction);
-  -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction);
-  flex-direction: var(--layout-vertical_-_flex-direction);
-  box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] #card.yt-live-chat-membership-item-renderer {
-  border-radius: 0;
-  box-shadow: none;
-}
-
-#header.yt-live-chat-membership-item-renderer {
-  position: relative;
-
-  background-color: var(--yt-live-chat-sponsor-header-color);
-  padding: 8px 16px;
-  color: #fff;
-  min-height: 20px;
-
-  display: var(--layout-horizontal_-_display);
-  -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
-  -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
-  flex-direction: var(--layout-horizontal_-_flex-direction);
-  -ms-flex-align: var(--layout-center_-_-ms-flex-align);
-  -webkit-align-items: var(--layout-center_-_-webkit-align-items);
-  align-items: var(--layout-center_-_align-items);
-}
-
-yt-live-chat-membership-item-renderer[show-only-header] #header.yt-live-chat-membership-item-renderer {
-  background-color: var(--yt-live-chat-sponsor-color);
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] #header.yt-live-chat-membership-item-renderer {
-  color: var(--yt-live-chat-secondary-text-color);
-  background-color: var(--yt-live-chat-background-color);
-  -ms-flex-align: var(--layout-start_-_-ms-flex-align);
-  -webkit-align-items: var(--layout-start_-_-webkit-align-items);
-  align-items: var(--layout-start_-_align-items);
-}
-
-#header-content.yt-live-chat-membership-item-renderer {
-  display: var(--layout-horizontal_-_display);
-  -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
-  -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
-  flex-direction: var(--layout-horizontal_-_flex-direction);
-  -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack);
-  -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content);
-  justify-content: var(--layout-justified_-_justify-content);
-  -ms-flex: var(--layout-flex_-_-ms-flex);
-  -webkit-flex: var(--layout-flex_-_-webkit-flex);
-  flex: var(--layout-flex_-_flex);
-  -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis);
-  flex-basis: var(--layout-flex_-_flex-basis);
-  -ms-flex-align: var(--layout-baseline_-_-ms-flex-align);
-  -webkit-align-items: var(--layout-baseline_-_-webkit-align-items);
-  align-items: var(--layout-baseline_-_align-items);
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content.yt-live-chat-membership-item-renderer {
-  display: var(--layout-vertical_-_display);
-  -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction);
-  -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction);
-  flex-direction: var(--layout-vertical_-_flex-direction);
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content-inner-column.yt-live-chat-membership-item-renderer {
-  margin-bottom: 4px;
-
-  display: var(--layout-horizontal_-_display);
-  -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
-  -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
-  flex-direction: var(--layout-horizontal_-_flex-direction);
-  -ms-flex-align: var(--layout-center_-_-ms-flex-align);
-  -webkit-align-items: var(--layout-center_-_-webkit-align-items);
-  align-items: var(--layout-center_-_align-items);
-  -ms-flex: var(--layout-flex-none_-_-ms-flex);
-  -webkit-flex: var(--layout-flex-none_-_-webkit-flex);
-  flex: var(--layout-flex-none_-_flex);
-}
-
-#author-photo.yt-live-chat-membership-item-renderer {
-  width: 40px;
-  height: 40px;
-}
-
-yt-icon#author-photo.yt-live-chat-membership-item-renderer {
-  display: none;
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-membership-item-renderer {
-  display: block;
-}
-
-yt-live-chat-membership-item-renderer:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
-  --yt-live-chat-sponsor-color: var(--yt-live-chat-sponsor-text-color);
-  --yt-live-chat-secondary-text-color: var(--yt-live-chat-sponsor-text-color);
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
-  margin-right: 8px;
-  font-weight: 500;
-  --yt-live-chat-sponsor-color: var(--yt-live-chat-secondary-text-color);
-}
-
-#header-subtext.yt-live-chat-membership-item-renderer {
-  margin-top: 2px;
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 500;
-  font-size: 15px;
-}
-
-#header-subtext.yt-live-chat-membership-item-renderer:empty {
-  display: none;
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-subtext.yt-live-chat-membership-item-renderer {
-  margin: 4px 0 13px;
-  font-size: 11px;
-  font-weight: normal;
-  color: var(--yt-live-chat-secondary-text-color);
-}
-
-#header-primary-text.yt-live-chat-membership-item-renderer {
-  word-wrap: break-word;
-  word-break: break-word;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 1);
-}
-
-#header-primary-text.yt-live-chat-membership-item-renderer:empty {
-  display: none;
-}
-
-yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer,
-yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) #header-subtext.yt-live-chat-membership-item-renderer {
-  font-size: 12px;
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-primary-text.yt-live-chat-membership-item-renderer {
-  display: inline;
-  height: 24px;
-  min-width: 16px;
-  border-radius: 12px;
-  margin-right: 8px;
-  padding: 0 12px;
-  background-color: var(--yt-live-chat-sponsor-color);
-  color: var(--yt-white);
-  display: var(--layout-inline_-_display, inline);
-  -ms-flex-align: var(--layout-center-center_-_-ms-flex-align);
-  -webkit-align-items: var(--layout-center-center_-_-webkit-align-items);
-  align-items: var(--layout-center-center_-_align-items);
-  -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack);
-  -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content);
-  justify-content: var(--layout-center-center_-_justify-content);
-  font-size: var(--ytd-badge_-_font-size);
-  font-weight: var(--ytd-badge_-_font-weight);
-  line-height: var(--ytd-badge_-_line-height);
-}
-
-#content.yt-live-chat-membership-item-renderer {
-  background-color: var(--yt-live-chat-sponsor-color);
-  color: var(--yt-live-chat-sponsor-text-color);
-  padding: 8px 16px;
-  word-wrap: break-word;
-  word-break: break-word;
-  font-size: 15px;
-  line-height: 20px;
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] #content.yt-live-chat-membership-item-renderer {
-  background-color: unset;
-  font-size: unset;
-  color: var(--yt-live-chat-secondary-text-color);
-  padding: 0 0 16px 72px;
-}
-
-#content.yt-live-chat-membership-item-renderer img.yt-live-chat-membership-item-renderer {
-  width: var(--yt-live-chat-emoji-size);
-  height: var(--yt-live-chat-emoji-size);
-
-  margin: -1px 2px 1px 2px;
-  vertical-align: middle;
-}
-
-yt-live-chat-membership-item-renderer[show-only-header] #content.yt-live-chat-membership-item-renderer,
-#deleted-state.yt-live-chat-membership-item-renderer:empty {
-  display: none;
-}
-
-#deleted-state.yt-live-chat-membership-item-renderer {
-  display: block;
-  font-style: italic;
-  opacity: 0.7;
-}
-
-a.yt-live-chat-membership-item-renderer {
-  display: inline;
-  text-decoration: underline;
-}
-
-#message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer {
-  word-break: break-all;
-}
-
-#message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer .mention.yt-live-chat-membership-item-renderer {
-  text-decoration: underline;
-}
-
-#menu.yt-live-chat-membership-item-renderer {
-  background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-header-color) 100%);
-  border-radius: 0 4px 4px 0;
-}
-
-yt-live-chat-membership-item-renderer[show-only-header] #menu.yt-live-chat-membership-item-renderer {
-  background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-color) 100%);
-}
-
-yt-live-chat-membership-item-renderer[dashboard-money-feed] #menu.yt-live-chat-membership-item-renderer {
-  margin-top: 8px;
-  background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
-}
-</style>
+<style src="@/assets/css/youtube/yt-live-chat-membership-item-renderer.css"></style>

frontend/src/components/ChatRenderer/PaidMessage.vue

@@ -62,384 +62,4 @@ export default {
 }
 </script>
 
-<!-- yt-live-chat-paid-message-renderer -->
-<style>
-canvas.yt-live-chat-paid-message-renderer, caption.yt-live-chat-paid-message-renderer, center.yt-live-chat-paid-message-renderer, cite.yt-live-chat-paid-message-renderer, code.yt-live-chat-paid-message-renderer, dd.yt-live-chat-paid-message-renderer, del.yt-live-chat-paid-message-renderer, dfn.yt-live-chat-paid-message-renderer, div.yt-live-chat-paid-message-renderer, dl.yt-live-chat-paid-message-renderer, dt.yt-live-chat-paid-message-renderer, em.yt-live-chat-paid-message-renderer, embed.yt-live-chat-paid-message-renderer, fieldset.yt-live-chat-paid-message-renderer, font.yt-live-chat-paid-message-renderer, form.yt-live-chat-paid-message-renderer, h1.yt-live-chat-paid-message-renderer, h2.yt-live-chat-paid-message-renderer, h3.yt-live-chat-paid-message-renderer, h4.yt-live-chat-paid-message-renderer, h5.yt-live-chat-paid-message-renderer, h6.yt-live-chat-paid-message-renderer, hr.yt-live-chat-paid-message-renderer, i.yt-live-chat-paid-message-renderer, iframe.yt-live-chat-paid-message-renderer, img.yt-live-chat-paid-message-renderer, ins.yt-live-chat-paid-message-renderer, kbd.yt-live-chat-paid-message-renderer, label.yt-live-chat-paid-message-renderer, legend.yt-live-chat-paid-message-renderer, li.yt-live-chat-paid-message-renderer, menu.yt-live-chat-paid-message-renderer, object.yt-live-chat-paid-message-renderer, ol.yt-live-chat-paid-message-renderer, p.yt-live-chat-paid-message-renderer, pre.yt-live-chat-paid-message-renderer, q.yt-live-chat-paid-message-renderer, s.yt-live-chat-paid-message-renderer, samp.yt-live-chat-paid-message-renderer, small.yt-live-chat-paid-message-renderer, span.yt-live-chat-paid-message-renderer, strike.yt-live-chat-paid-message-renderer, strong.yt-live-chat-paid-message-renderer, sub.yt-live-chat-paid-message-renderer, sup.yt-live-chat-paid-message-renderer, table.yt-live-chat-paid-message-renderer, tbody.yt-live-chat-paid-message-renderer, td.yt-live-chat-paid-message-renderer, tfoot.yt-live-chat-paid-message-renderer, th.yt-live-chat-paid-message-renderer, thead.yt-live-chat-paid-message-renderer, tr.yt-live-chat-paid-message-renderer, tt.yt-live-chat-paid-message-renderer, u.yt-live-chat-paid-message-renderer, ul.yt-live-chat-paid-message-renderer, var.yt-live-chat-paid-message-renderer {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-paid-message-renderer[hidden] {
-  display: none !important;
-}
-
-#timestamp.yt-live-chat-paid-message-renderer {
-  display: var(--yt-live-chat-item-timestamp-display, inline);
-  margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
-  color: var(--yt-live-chat-tertiary-text-color);
-  font-size: 11px;
-}
-
-#author-photo.yt-live-chat-paid-message-renderer {
-  display: block;
-  margin-right: 16px;
-  overflow: hidden;
-  border-radius: 50%;
-  -ms-flex: none;
-  -webkit-flex: none;
-  flex: none;
-}
-
-#menu-button.yt-live-chat-paid-message-renderer {
-  width: 40px;
-  height: 40px;
-  padding: 8px;
-}
-
-#menu.yt-live-chat-paid-message-renderer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  transform: translateX(100px);
-}
-
-yt-live-chat-paid-message-renderer:hover #menu.yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer[menu-visible] #menu.yt-live-chat-paid-message-renderer {
-  transform: none;
-}
-
-yt-live-chat-paid-message-renderer:focus-within #menu.yt-live-chat-paid-message-renderer {
-  transform: none;
-}
-
-#inline-action-button-container.yt-live-chat-paid-message-renderer {
-  position: absolute;
-  top: -4px;
-  right: 0;
-  bottom: -4px;
-  left: 0;
-  background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
-  display: none;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer {
-  display: flex;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  display: var(--yt-live-chat-inline-action-button-container-display, none);
-}
-
-yt-live-chat-paid-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer {
-  display: none;
-}
-
-yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-paid-message-renderer {
-  display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
-}
-
-#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer, #additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
-  --yt-button-icon-size: 36px;
-  --yt-button-icon-padding: 6px;
-  color: hsl(0, 0%, 100%);
-  border-radius: 2px;
-}
-
-#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
-  background: hsla(0, 0%, 6.7%, .8);
-}
-
-#inline-action-buttons.yt-live-chat-paid-message-renderer>.yt-live-chat-paid-message-renderer:hover {
-  background: hsl(0, 0%, 6.7%);
-}
-
-#additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
-  color: var(--yt-live-chat-additional-inline-action-button-color);
-  background: var(--yt-live-chat-additional-inline-action-button-background-color);
-}
-
-#additional-inline-action-buttons.yt-live-chat-paid-message-renderer>.yt-live-chat-paid-message-renderer:hover {
-  background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
-}
-
-#additional-inline-action-buttons.yt-live-chat-paid-message-renderer:not(:empty) {
-  margin-left: 32px;
-}
-
-#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer:not(:first-child) {
-  margin-left: 8px;
-}
-
-yt-live-chat-paid-message-renderer {
-  position: relative;
-  display: block;
-  padding: 4px 24px;
-  font-size: 15px;
-  --yt-live-chat-paid-message-background-color: var(--yt-live-chat-paid-message-primary-color);
-  --yt-live-chat-paid-message-header-background-color: var(--yt-live-chat-paid-message-secondary-color);
-  --yt-live-chat-text-input-field-placeholder-color: var(--yt-live-chat-paid-message-color);
-  --yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] {
-  padding: 0;
-  padding-bottom: 8px;
-  --yt-live-chat-paid-message-background-color: transparent;
-  --yt-live-chat-paid-message-header-background-color: transparent;
-  --yt-live-chat-item-timestamp-display: block;
-}
-
-#card.yt-live-chat-paid-message-renderer {
-  border-radius: 4px;
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #card.yt-live-chat-paid-message-renderer {
-  border-radius: 0;
-  box-shadow: none;
-}
-
-#header.yt-live-chat-paid-message-renderer {
-  position: relative;
-  background-color: var(--yt-live-chat-paid-message-header-background-color, #125aac);
-  color: var(--yt-live-chat-paid-message-header-color, #fff);
-  font-weight: 500;
-  padding: 8px 16px;
-  min-height: 20px;
-  display: flex;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
-yt-live-chat-paid-message-renderer[show-only-header] #header.yt-live-chat-paid-message-renderer {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #header.yt-live-chat-paid-message-renderer {
-  color: var(--yt-live-chat-secondary-text-color);
-  padding-bottom: 0;
-}
-
-#author-photo.yt-live-chat-paid-message-renderer {
-  width: 40px;
-  height: 40px;
-}
-
-yt-icon#author-photo.yt-live-chat-paid-message-renderer {
-  display: none;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-paid-message-renderer {
-  display: block;
-}
-
-#header-content.yt-live-chat-paid-message-renderer {
-  display: flex;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-  -ms-flex-align: baseline;
-  -webkit-align-items: baseline;
-  align-items: baseline;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content.yt-live-chat-paid-message-renderer {
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-
-#header-content-primary-column.yt-live-chat-paid-message-renderer {
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content-primary-column.yt-live-chat-paid-message-renderer {
-  margin-bottom: 4px;
-  display: flex;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-align: baseline;
-  -webkit-align-items: baseline;
-  align-items: baseline;
-  -ms-flex: none;
-  -webkit-flex: none;
-  flex: none;
-}
-
-#author-name.yt-live-chat-paid-message-renderer {
-  color: var(--yt-live-chat-paid-message-author-name-color, rgba(255, 255, 255, 0.7));
-  font-size: 14px;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
-  margin-right: 8px;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #purchase-amount.yt-live-chat-paid-message-renderer {
-  display: inline;
-  height: 24px;
-  min-width: 16px;
-  border-radius: 12px;
-  margin-right: 8px;
-  padding: 0 12px;
-  background-color: var(--yt-live-chat-paid-message-primary-color);
-  color: var(--yt-live-chat-paid-message-color);
-  display: inline-flex;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  font-size: 1.2rem;
-  font-weight: 500;
-  line-height: 1.2rem;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
-  display: block;
-  color: var(--yt-live-chat-secondary-text-color);
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer[is-deleted] {
-  margin: 4px 0 0;
-  order: 1;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer[is-deleted].yt-live-chat-paid-message-renderer::before {
-  content: '​';
-  display: inline;
-  width: 0;
-}
-
-#menu.yt-live-chat-paid-message-renderer {
-  background: linear-gradient(to right, transparent, var(--yt-live-chat-paid-message-header-background-color, #125aac) 100%);
-  border-radius: 0 4px 4px 0;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #menu.yt-live-chat-paid-message-renderer {
-  margin-top: 8px;
-  background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
-}
-
-yt-live-chat-paid-message-renderer[allow-animations] #content.yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer[allow-animations] #header.yt-live-chat-paid-message-renderer {
-  transition-property: background-color, color;
-  transition-duration: 0.2s;
-}
-
-#content.yt-live-chat-paid-message-renderer {
-  background-color: var(--yt-live-chat-paid-message-background-color, #1565c0);
-  color: var(--yt-live-chat-paid-message-color, #fff);
-  padding: 8px 16px;
-  word-wrap: break-word;
-  word-break: break-word;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-#content.yt-live-chat-paid-message-renderer img.yt-live-chat-paid-message-renderer {
-  width: var(--yt-live-chat-emoji-size);
-  height: var(--yt-live-chat-emoji-size);
-  margin: -1px 2px 1px 2px;
-  vertical-align: middle;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #content.yt-live-chat-paid-message-renderer {
-  padding: 0;
-  padding-left: 72px;
-  color: var(--yt-live-chat-secondary-text-color);
-}
-
-yt-live-chat-paid-message-renderer[show-only-header] #content.yt-live-chat-paid-message-renderer {
-  visibility: hidden;
-  padding: 0;
-}
-
-a.yt-live-chat-paid-message-renderer {
-  display: inline;
-  text-decoration: underline;
-}
-
-#message.yt-live-chat-paid-message-renderer a.yt-live-chat-paid-message-renderer {
-  word-break: break-all;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #message.yt-live-chat-paid-message-renderer {
-  margin-top: 4px;
-}
-
-#message.yt-live-chat-paid-message-renderer a.yt-live-chat-paid-message-renderer .mention.yt-live-chat-paid-message-renderer {
-  text-decoration: underline;
-}
-
-#message.yt-live-chat-paid-message-renderer:empty, #author-name.yt-live-chat-paid-message-renderer:empty:not([is-deleted]).yt-live-chat-paid-message-renderer, #deleted-state.yt-live-chat-paid-message-renderer:empty {
-  display: none;
-}
-
-#deleted-state.yt-live-chat-paid-message-renderer {
-  display: block;
-  font-style: italic;
-  opacity: 0.7;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #deleted-state.yt-live-chat-paid-message-renderer[is-deleted] {
-  margin-top: 4px;
-}
-
-yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
-  -ms-flex: none;
-  -webkit-flex: none;
-  flex: none;
-}
-
-yt-live-chat-paid-message-renderer[show-footer-divider] #footer.yt-live-chat-paid-message-renderer::before {
-  content: "";
-  display: flex;
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  margin: 8px 0;
-}
-
-yt-live-chat-paid-message-renderer[is-user-editable] #footer.yt-live-chat-paid-message-renderer:not(:empty) {
-  padding-top: 8px;
-}
-</style>
+<style src="@/assets/css/youtube/yt-live-chat-paid-message-renderer.css"></style>

frontend/src/components/ChatRenderer/TextMessage.vue

@@ -94,304 +94,5 @@ yt-live-chat-text-message-renderer>#content>#message>.el-badge .el-badge__conten
 }
 </style>
 
-<!-- yt-live-chat-text-message-renderer -->
-<style>
-canvas.yt-live-chat-text-message-renderer, caption.yt-live-chat-text-message-renderer, center.yt-live-chat-text-message-renderer, cite.yt-live-chat-text-message-renderer, code.yt-live-chat-text-message-renderer, dd.yt-live-chat-text-message-renderer, del.yt-live-chat-text-message-renderer, dfn.yt-live-chat-text-message-renderer, div.yt-live-chat-text-message-renderer, dl.yt-live-chat-text-message-renderer, dt.yt-live-chat-text-message-renderer, em.yt-live-chat-text-message-renderer, embed.yt-live-chat-text-message-renderer, fieldset.yt-live-chat-text-message-renderer, font.yt-live-chat-text-message-renderer, form.yt-live-chat-text-message-renderer, h1.yt-live-chat-text-message-renderer, h2.yt-live-chat-text-message-renderer, h3.yt-live-chat-text-message-renderer, h4.yt-live-chat-text-message-renderer, h5.yt-live-chat-text-message-renderer, h6.yt-live-chat-text-message-renderer, hr.yt-live-chat-text-message-renderer, i.yt-live-chat-text-message-renderer, iframe.yt-live-chat-text-message-renderer, img.yt-live-chat-text-message-renderer, ins.yt-live-chat-text-message-renderer, kbd.yt-live-chat-text-message-renderer, label.yt-live-chat-text-message-renderer, legend.yt-live-chat-text-message-renderer, li.yt-live-chat-text-message-renderer, menu.yt-live-chat-text-message-renderer, object.yt-live-chat-text-message-renderer, ol.yt-live-chat-text-message-renderer, p.yt-live-chat-text-message-renderer, pre.yt-live-chat-text-message-renderer, q.yt-live-chat-text-message-renderer, s.yt-live-chat-text-message-renderer, samp.yt-live-chat-text-message-renderer, small.yt-live-chat-text-message-renderer, span.yt-live-chat-text-message-renderer, strike.yt-live-chat-text-message-renderer, strong.yt-live-chat-text-message-renderer, sub.yt-live-chat-text-message-renderer, sup.yt-live-chat-text-message-renderer, table.yt-live-chat-text-message-renderer, tbody.yt-live-chat-text-message-renderer, td.yt-live-chat-text-message-renderer, tfoot.yt-live-chat-text-message-renderer, th.yt-live-chat-text-message-renderer, thead.yt-live-chat-text-message-renderer, tr.yt-live-chat-text-message-renderer, tt.yt-live-chat-text-message-renderer, u.yt-live-chat-text-message-renderer, ul.yt-live-chat-text-message-renderer, var.yt-live-chat-text-message-renderer {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-text-message-renderer[hidden] {
-  display: none !important;
-}
-
-#timestamp.yt-live-chat-text-message-renderer {
-  display: var(--yt-live-chat-item-timestamp-display, inline);
-  margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
-  color: var(--yt-live-chat-tertiary-text-color);
-  font-size: 11px;
-}
-
-#author-photo.yt-live-chat-text-message-renderer {
-  display: block;
-  margin-right: 16px;
-  overflow: hidden;
-  border-radius: 50%;
-  -ms-flex: none;
-  -webkit-flex: none;
-  flex: none;
-}
-
-#menu-button.yt-live-chat-text-message-renderer {
-  width: 40px;
-  height: 40px;
-  padding: 8px;
-}
-
-#menu.yt-live-chat-text-message-renderer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  transform: translateX(100px);
-}
-
-yt-live-chat-text-message-renderer:hover #menu.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[menu-visible] #menu.yt-live-chat-text-message-renderer {
-  transform: none;
-}
-
-yt-live-chat-text-message-renderer:focus-within #menu.yt-live-chat-text-message-renderer {
-  transform: none;
-}
-
-#inline-action-button-container.yt-live-chat-text-message-renderer {
-  position: absolute;
-  top: -4px;
-  right: 0;
-  bottom: -4px;
-  left: 0;
-  background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
-  display: none;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer {
-  display: flex;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  display: var(--yt-live-chat-inline-action-button-container-display, none);
-}
-
-yt-live-chat-text-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer {
-  display: none;
-}
-
-yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-text-message-renderer {
-  display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
-}
-
-#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer, #additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
-  --yt-button-icon-size: 36px;
-  --yt-button-icon-padding: 6px;
-  color: hsl(0, 0%, 100%);
-  border-radius: 2px;
-}
-
-#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
-  background: hsla(0, 0%, 6.7%, .8);
-}
-
-#inline-action-buttons.yt-live-chat-text-message-renderer>.yt-live-chat-text-message-renderer:hover {
-  background: hsl(0, 0%, 6.7%);
-}
-
-#additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
-  color: var(--yt-live-chat-additional-inline-action-button-color);
-  background: var(--yt-live-chat-additional-inline-action-button-background-color);
-}
-
-#additional-inline-action-buttons.yt-live-chat-text-message-renderer>.yt-live-chat-text-message-renderer:hover {
-  background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
-}
-
-#additional-inline-action-buttons.yt-live-chat-text-message-renderer:not(:empty) {
-  margin-left: 32px;
-}
-
-#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer:not(:first-child) {
-  margin-left: 8px;
-}
-
-yt-live-chat-text-message-renderer {
-  position: relative;
-  font-size: 13px;
-  padding: 4px 24px;
-  overflow: hidden;
-  --yt-endpoint-color: var(--yt-live-chat-primary-text-color, hsl(0, 0%, 6.7%));
-  --yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color, var(--yt-endpoint-color));
-  display: flex;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-align: start;
-  -webkit-align-items: flex-start;
-  align-items: flex-start;
-}
-
-yt-live-chat-text-message-renderer:hover {
-  overflow: initial;
-}
-
-yt-live-chat-text-message-renderer[author-is-owner] {
-  background-color: var(--yt-live-chat-message-highlight-background-color);
-}
-
-#content.yt-live-chat-text-message-renderer {
-  -ms-align-self: center;
-  -webkit-align-self: center;
-  align-self: center;
-  min-width: 0;
-}
-
-yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
-  margin-right: 8px;
-}
-
-#message.yt-live-chat-text-message-renderer {
-  color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color));
-  line-height: 16px;
-  overflow: hidden;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  font-style: var(--yt-live-chat-text-message-renderer-message-message-style_-_font-style);
-  opacity: var(--yt-live-chat-text-message-renderer-message-message-style_-_opacity);
-}
-
-#message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer {
-  width: var(--yt-live-chat-emoji-size);
-  height: var(--yt-live-chat-emoji-size);
-  margin: -1px 2px 1px 2px;
-  vertical-align: middle;
-}
-
-a.yt-live-chat-text-message-renderer {
-  display: inline;
-  text-decoration: underline;
-}
-
-#message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer {
-  display: inline;
-  text-decoration: underline;
-  word-break: break-all;
-}
-
-#message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer .mention.yt-live-chat-text-message-renderer {
-  text-decoration: underline;
-}
-
-#show-original.yt-live-chat-text-message-renderer {
-  margin-left: 2px;
-}
-
-#message.yt-live-chat-text-message-renderer:empty, #deleted-state.yt-live-chat-text-message-renderer:empty, #show-original.yt-live-chat-text-message-renderer:empty, yt-live-chat-text-message-renderer[show-original] #deleted-state.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[show-original] #show-original.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[is-deleted]:not([show-original]) #message.yt-live-chat-text-message-renderer {
-  display: none;
-}
-
-#menu.yt-live-chat-text-message-renderer {
-  color: var(--yt-live-chat-secondary-text-color);
-  background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color, hsl(0, 0%, 100%)) 100%);
-}
-
-.mention.yt-live-chat-text-message-renderer {
-  background: var(--yt-live-chat-mention-background-color);
-  color: var(--yt-live-chat-mention-text-color);
-  padding: 2px 4px;
-  border-radius: 2px;
-}
-
-#deleted-state.yt-live-chat-text-message-renderer, #show-original.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[is-deleted] #message.yt-live-chat-text-message-renderer {
-  font-style: italic;
-  color: var(--yt-live-chat-deleted-message-color, rgba(0, 0, 0, 0.5));
-}
-
-yt-live-chat-text-message-renderer[show-bar]::before {
-  content: '';
-  position: absolute;
-  display: block;
-  left: 8px;
-  top: 4px;
-  bottom: 4px;
-  width: 4px;
-  box-sizing: border-box;
-  border-radius: 2px;
-}
-
-yt-live-chat-text-message-renderer[is-deleted]::before {
-  background: var(--yt-live-chat-deleted-message-bar-color, rgba(0, 0, 0, 0.5));
-}
-
-yt-live-chat-text-message-renderer[is-dimmed] #message.yt-live-chat-text-message-renderer {
-  opacity: 0.25;
-}
-
-yt-live-chat-text-message-renderer[is-dimmed]::before {
-  background: var(--yt-live-chat-error-message-color, #f44336);
-}
-</style>
-
-<!-- yt-live-chat-author-chip -->
-<style>
-canvas.yt-live-chat-author-chip, caption.yt-live-chat-author-chip, center.yt-live-chat-author-chip, cite.yt-live-chat-author-chip, code.yt-live-chat-author-chip, dd.yt-live-chat-author-chip, del.yt-live-chat-author-chip, dfn.yt-live-chat-author-chip, div.yt-live-chat-author-chip, dl.yt-live-chat-author-chip, dt.yt-live-chat-author-chip, em.yt-live-chat-author-chip, embed.yt-live-chat-author-chip, fieldset.yt-live-chat-author-chip, font.yt-live-chat-author-chip, form.yt-live-chat-author-chip, h1.yt-live-chat-author-chip, h2.yt-live-chat-author-chip, h3.yt-live-chat-author-chip, h4.yt-live-chat-author-chip, h5.yt-live-chat-author-chip, h6.yt-live-chat-author-chip, hr.yt-live-chat-author-chip, i.yt-live-chat-author-chip, iframe.yt-live-chat-author-chip, img.yt-live-chat-author-chip, ins.yt-live-chat-author-chip, kbd.yt-live-chat-author-chip, label.yt-live-chat-author-chip, legend.yt-live-chat-author-chip, li.yt-live-chat-author-chip, menu.yt-live-chat-author-chip, object.yt-live-chat-author-chip, ol.yt-live-chat-author-chip, p.yt-live-chat-author-chip, pre.yt-live-chat-author-chip, q.yt-live-chat-author-chip, s.yt-live-chat-author-chip, samp.yt-live-chat-author-chip, small.yt-live-chat-author-chip, span.yt-live-chat-author-chip, strike.yt-live-chat-author-chip, strong.yt-live-chat-author-chip, sub.yt-live-chat-author-chip, sup.yt-live-chat-author-chip, table.yt-live-chat-author-chip, tbody.yt-live-chat-author-chip, td.yt-live-chat-author-chip, tfoot.yt-live-chat-author-chip, th.yt-live-chat-author-chip, thead.yt-live-chat-author-chip, tr.yt-live-chat-author-chip, tt.yt-live-chat-author-chip, u.yt-live-chat-author-chip, ul.yt-live-chat-author-chip, var.yt-live-chat-author-chip {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-author-chip[hidden] {
-  display: none !important;
-}
-
-yt-live-chat-author-chip {
-  display: inline-flex;
-  -ms-flex-align: baseline;
-  -webkit-align-items: baseline;
-  align-items: baseline;
-}
-
-#author-name.yt-live-chat-author-chip {
-  box-sizing: border-box;
-  border-radius: 2px;
-  color: var(--yt-live-chat-secondary-text-color);
-  font-weight: 500;
-}
-
-yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip {
-  padding: 2px 4px;
-  color: var(--yt-live-chat-author-chip-verified-text-color);
-  background-color: var(--yt-live-chat-author-chip-verified-background-color);
-}
-
-#author-name.yt-live-chat-author-chip[type='moderator'] {
-  color: var(--yt-live-chat-moderator-color);
-}
-
-yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip[type='owner'], #author-name.yt-live-chat-author-chip[type='owner'] {
-  background-color: #ffd600;
-  color: var(--yt-live-chat-author-chip-owner-text-color);
-}
-
-#author-name.yt-live-chat-author-chip[type='member'] {
-  color: var(--yt-live-chat-sponsor-color);
-}
-
-#chip-badges.yt-live-chat-author-chip:empty {
-  display: none;
-}
-
-yt-live-chat-author-chip[is-highlighted] #chat-badges.yt-live-chat-author-chip:not(:empty) {
-  margin-left: 1px;
-}
-
-yt-live-chat-author-badge-renderer.yt-live-chat-author-chip {
-  margin: 0 0 0 2px;
-  vertical-align: sub;
-}
-
-yt-live-chat-author-chip[is-highlighted] #chip-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer.yt-live-chat-author-chip {
-  color: inherit;
-}
-
-#chip-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer.yt-live-chat-author-chip:last-of-type {
-  margin-right: -2px;
-}
-</style>
+<style src="@/assets/css/youtube/yt-live-chat-text-message-renderer.css"></style>
+<style src="@/assets/css/youtube/yt-live-chat-author-chip.css"></style>

frontend/src/components/ChatRenderer/Ticker.vue

@@ -1,28 +1,24 @@
 <template>
-  <yt-live-chat-ticker-renderer>
+  <yt-live-chat-ticker-renderer :hidden="showMessages.length === 0">
     <div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer">
       <div id="items" class="style-scope yt-live-chat-ticker-renderer">
-        <template v-for="message in messages">
-          <yt-live-chat-ticker-paid-message-item-renderer :key="message.id" v-if="needToShow(message)"
-            tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;"
-            @click="onItemClick(message)"
-          >
-            <div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
-              :style="{
-                background: getBgColor(message),
-              }"
-            >
-              <div id="content" class="style-scope yt-live-chat-ticker-paid-message-item-renderer" :style="{
-                color: getColor(message)
-              }">
-                <img-shadow id="author-photo" height="24" width="24" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
-                  :imgUrl="message.avatarUrl"
-                ></img-shadow>
-                <span id="text" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer">{{getText(message)}}</span>
-              </div>
+        <yt-live-chat-ticker-paid-message-item-renderer v-for="message in showMessages" :key="message.raw.id"
+          tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;"
+          @click="onItemClick(message.raw)"
+        >
+          <div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer" :style="{
+            background: message.bgColor,
+          }">
+            <div id="content" class="style-scope yt-live-chat-ticker-paid-message-item-renderer" :style="{
+              color: message.color
+            }">
+              <img-shadow id="author-photo" height="24" width="24" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
+                :imgUrl="message.raw.avatarUrl"
+              ></img-shadow>
+              <span id="text" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer">{{message.text}}</span>
             </div>
-          </yt-live-chat-ticker-paid-message-item-renderer>
-        </template>
+          </div>
+        </yt-live-chat-ticker-paid-message-item-renderer>
       </div>
     </div>
     <template v-if="pinnedMessage">
@@ -34,14 +30,14 @@
       <paid-message :key="pinnedMessage.id" v-else
         class="style-scope yt-live-chat-ticker-renderer"
         :price="pinnedMessage.price" :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName"
-        :time="pinnedMessage.time" :content="showContent"
+        :time="pinnedMessage.time" :content="pinnedMessageShowContent"
       ></paid-message>
     </template>
   </yt-live-chat-ticker-renderer>
 </template>
 
 <script>
-import * as config from '@/api/config'
+import * as chatConfig from '@/api/chatConfig'
 import {formatCurrency} from '@/utils'
 import ImgShadow from './ImgShadow.vue'
 import MembershipItem from './MembershipItem.vue'
@@ -59,7 +55,7 @@ export default {
     messages: Array,
     showGiftName: {
       type: Boolean,
-      default: config.DEFAULT_CONFIG.showGiftName
+      default: chatConfig.DEFAULT_CONFIG.showGiftName
     }
   },
   data() {
@@ -67,12 +63,27 @@ export default {
       MESSAGE_TYPE_MEMBER: constants.MESSAGE_TYPE_MEMBER,
 
       curTime: new Date(),
-      updateTimerId: window.setInterval(this.updateProgress.bind(this), 1000),
+      updateTimerId: window.setInterval(this.updateProgress, 1000),
       pinnedMessage: null
     }
   },
   computed: {
-    showContent() {
+    showMessages() {
+      let res = []
+      for (let message of this.messages) {
+        if (!this.needToShow(message)) {
+          continue
+        }
+        res.push({
+          raw: message,
+          bgColor: this.getBgColor(message),
+          color: this.getColor(message),
+          text: this.getText(message)
+        })
+      }
+      return res
+    },
+    pinnedMessageShowContent() {
       if (!this.pinnedMessage) {
         return ''
       }
@@ -88,27 +99,20 @@ export default {
   },
   methods: {
     needToShow(message) {
-      let pinTime
-      if (message.type === constants.MESSAGE_TYPE_MEMBER) {
-        pinTime = 2
-      } else {
-        let config = constants.getPriceConfig(message.price)
-        pinTime = config.pinTime
-      }
+      let pinTime = this.getPinTime(message)
       return (new Date() - message.addTime) / (60 * 1000) < pinTime
     },
     getBgColor(message) {
-      let color1, color2, pinTime
+      let color1, color2
       if (message.type === constants.MESSAGE_TYPE_MEMBER) {
         color1 = 'rgba(15,157,88,1)'
         color2 = 'rgba(11,128,67,1)'
-        pinTime = 2
       } else {
-        let config = constants.getPriceConfig(message.type === constants.MESSAGE_TYPE_MEMBER ? 28 : message.price)
+        let config = constants.getPriceConfig(message.price)
         color1 = config.colors.contentBg
         color2 = config.colors.headerBg
-        pinTime = config.pinTime
       }
+      let pinTime = this.getPinTime(message)
       let progress = (1 - (this.curTime - message.addTime) / (60 * 1000) / pinTime) * 100
       if (progress < 0) {
         progress = 0
@@ -129,18 +133,19 @@ export default {
       }
       return 'CN¥' + formatCurrency(message.price)
     },
+    getPinTime(message) {
+      if (message.type === constants.MESSAGE_TYPE_MEMBER) {
+        return 2
+      }
+      return constants.getPriceConfig(message.price).pinTime
+    },
     updateProgress() {
       this.curTime = new Date()
       for (let i = 0; i < this.messages.length;) {
-        let pinTime
-        if (this.messages[i].type === constants.MESSAGE_TYPE_MEMBER) {
-          pinTime = 2
-        } else {
-          let config = constants.getPriceConfig(this.messages[i].price)
-          pinTime = config.pinTime
-        }
-        if ((this.curTime - this.messages[i].addTime) / (60 * 1000) >= pinTime) {
-          if (this.pinnedMessage == this.messages[i]) {
+        let message = this.messages[i]
+        let pinTime = this.getPinTime(message)
+        if ((this.curTime - message.addTime) / (60 * 1000) >= pinTime) {
+          if (this.pinnedMessage == message) {
             this.pinnedMessage = null
           }
           this.messages.splice(i, 1)
@@ -160,155 +165,5 @@ export default {
 }
 </script>
 
-<!-- yt-live-chat-ticker-renderer -->
-<style>
-canvas.yt-live-chat-ticker-renderer, caption.yt-live-chat-ticker-renderer, center.yt-live-chat-ticker-renderer, cite.yt-live-chat-ticker-renderer, code.yt-live-chat-ticker-renderer, dd.yt-live-chat-ticker-renderer, del.yt-live-chat-ticker-renderer, dfn.yt-live-chat-ticker-renderer, div.yt-live-chat-ticker-renderer, dl.yt-live-chat-ticker-renderer, dt.yt-live-chat-ticker-renderer, em.yt-live-chat-ticker-renderer, embed.yt-live-chat-ticker-renderer, fieldset.yt-live-chat-ticker-renderer, font.yt-live-chat-ticker-renderer, form.yt-live-chat-ticker-renderer, h1.yt-live-chat-ticker-renderer, h2.yt-live-chat-ticker-renderer, h3.yt-live-chat-ticker-renderer, h4.yt-live-chat-ticker-renderer, h5.yt-live-chat-ticker-renderer, h6.yt-live-chat-ticker-renderer, hr.yt-live-chat-ticker-renderer, i.yt-live-chat-ticker-renderer, iframe.yt-live-chat-ticker-renderer, img.yt-live-chat-ticker-renderer, ins.yt-live-chat-ticker-renderer, kbd.yt-live-chat-ticker-renderer, label.yt-live-chat-ticker-renderer, legend.yt-live-chat-ticker-renderer, li.yt-live-chat-ticker-renderer, menu.yt-live-chat-ticker-renderer, object.yt-live-chat-ticker-renderer, ol.yt-live-chat-ticker-renderer, p.yt-live-chat-ticker-renderer, pre.yt-live-chat-ticker-renderer, q.yt-live-chat-ticker-renderer, s.yt-live-chat-ticker-renderer, samp.yt-live-chat-ticker-renderer, small.yt-live-chat-ticker-renderer, span.yt-live-chat-ticker-renderer, strike.yt-live-chat-ticker-renderer, strong.yt-live-chat-ticker-renderer, sub.yt-live-chat-ticker-renderer, sup.yt-live-chat-ticker-renderer, table.yt-live-chat-ticker-renderer, tbody.yt-live-chat-ticker-renderer, td.yt-live-chat-ticker-renderer, tfoot.yt-live-chat-ticker-renderer, th.yt-live-chat-ticker-renderer, thead.yt-live-chat-ticker-renderer, tr.yt-live-chat-ticker-renderer, tt.yt-live-chat-ticker-renderer, u.yt-live-chat-ticker-renderer, ul.yt-live-chat-ticker-renderer, var.yt-live-chat-ticker-renderer {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-ticker-renderer[hidden] {
-  display: none !important;
-}
-
-yt-live-chat-ticker-renderer {
-  display: block;
-  background-color: var(--yt-live-chat-header-background-color);
-}
-
-#container.yt-live-chat-ticker-renderer {
-  position: relative;
-}
-
-#items.yt-live-chat-ticker-renderer {
-  height: 32px;
-  overflow: hidden;
-  white-space: nowrap;
-  padding: 0 24px 8px 24px;
-}
-
-#items.yt-live-chat-ticker-renderer>*.yt-live-chat-ticker-renderer {
-  margin-right: 8px;
-}
-
-#left-arrow-container.yt-live-chat-ticker-renderer {
-  background: linear-gradient(to right, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px);
-  left: 0;
-  padding: 0 16px 0 12px;
-}
-
-#right-arrow-container.yt-live-chat-ticker-renderer {
-  background: linear-gradient(to left, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px);
-  right: 0;
-  padding: 0 12px 0 16px;
-}
-
-#container.yt-live-chat-ticker-renderer:hover #left-arrow-container.yt-live-chat-ticker-renderer, #container.yt-live-chat-ticker-renderer:hover #right-arrow-container.yt-live-chat-ticker-renderer {
-  opacity: 1;
-}
-
-#left-arrow-container.yt-live-chat-ticker-renderer, #right-arrow-container.yt-live-chat-ticker-renderer {
-  height: 32px;
-  opacity: 0;
-  position: absolute;
-  text-align: center;
-  top: 0;
-  transition: opacity 0.3s 0.1s;
-}
-
-yt-icon.yt-live-chat-ticker-renderer {
-  background-color: #2196f3;
-  border-radius: 999px;
-  color: #fff;
-  cursor: pointer;
-  height: 24px;
-  padding: 4px;
-  width: 24px;
-}
-</style>
-
-<!-- yt-live-chat-ticker-paid-message-item-renderer -->
-<style>
-canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-ticker-paid-message-item-renderer[hidden] {
-  display: none !important;
-}
-
-canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-ticker-paid-message-item-renderer[hidden] {
-  display: none !important;
-}
-
-yt-live-chat-ticker-paid-message-item-renderer {
-  display: inline-block;
-  font-size: 14px;
-  outline: none;
-  transition: width 0.2s;
-  vertical-align: top;
-  cursor: pointer;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-#container.yt-live-chat-ticker-paid-message-item-renderer {
-  border-radius: 999px;
-  padding: 4px;
-}
-
-yt-live-chat-ticker-paid-message-item-renderer.sliding-down #container.yt-live-chat-ticker-paid-message-item-renderer {
-  opacity: 0.5;
-  transform: translateY(44px);
-  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1);
-}
-
-yt-live-chat-ticker-paid-message-item-renderer.collapsing {
-  margin-right: 0;
-  transition: margin-right 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-yt-live-chat-ticker-paid-message-item-renderer[dimmed] {
-  opacity: 0.5;
-}
-
-yt-img-shadow.yt-live-chat-ticker-paid-message-item-renderer {
-  margin-right: -4px;
-  overflow: hidden;
-  border-radius: 50%;
-}
-
-#content.yt-live-chat-ticker-paid-message-item-renderer {
-  height: 24px;
-  display: flex;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
-
-#text.yt-live-chat-ticker-paid-message-item-renderer {
-  margin: 0 8px;
-  font-weight: 500;
-}
-
-yt-live-chat-ticker-paid-message-item-renderer[is-deleted] #author-photo.yt-live-chat-ticker-paid-message-item-renderer {
-  display: none;
-}
-</style>
+<style src="@/assets/css/youtube/yt-live-chat-ticker-renderer.css"></style>
+<style src="@/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css"></style>

frontend/src/components/ChatRenderer/index.vue

@@ -2,9 +2,7 @@
   <yt-live-chat-renderer class="style-scope yt-live-chat-app" style="--scrollbar-width:11px;" hide-timestamps
     @mousemove="refreshCantScrollStartTime"
   >
-    <ticker class="style-scope yt-live-chat-renderer" :messages="paidMessages" :showGiftName="showGiftName"
-      :hidden="paidMessages.length === 0"
-    ></ticker>
+    <ticker class="style-scope yt-live-chat-renderer" :messages="paidMessages" :showGiftName="showGiftName"></ticker>
     <yt-live-chat-item-list-renderer class="style-scope yt-live-chat-renderer" allow-scroll>
       <div ref="scroller" id="item-scroller" class="style-scope yt-live-chat-item-list-renderer animated" @scroll="onScroll">
         <div ref="itemOffset" id="item-offset" class="style-scope yt-live-chat-item-list-renderer" style="height: 0px;">
@@ -42,7 +40,7 @@
 </template>
 
 <script>
-import * as config from '@/api/config'
+import * as chatConfig from '@/api/chatConfig'
 import Ticker from './Ticker.vue'
 import TextMessage from './TextMessage.vue'
 import MembershipItem from './MembershipItem.vue'
@@ -64,11 +62,11 @@ export default {
     css: String,
     maxNumber: {
       type: Number,
-      default: config.DEFAULT_CONFIG.maxNumber
+      default: chatConfig.DEFAULT_CONFIG.maxNumber
     },
     showGiftName: {
       type: Boolean,
-      default: config.DEFAULT_CONFIG.showGiftName
+      default: chatConfig.DEFAULT_CONFIG.showGiftName
     }
   },
   data() {
@@ -536,820 +534,6 @@ export default {
 }
 </script>
 
-<style>
-yt-live-chat-renderer, yt-live-chat-item-list-renderer #item-scroller {
-  height: 100%;
-}
-
-yt-live-chat-renderer ::-webkit-scrollbar {
-  content: '';
-}
-
-yt-live-chat-renderer ::-webkit-scrollbar-thumb {
-  background-color: hsla(0, 0%, 53.3%, .2);
-  border: 2px solid #fcfcfc;
-  min-height: 30px;
-}
-
-yt-live-chat-renderer ::-webkit-scrollbar-track {
-  background-color: #fcfcfc;
-}
-</style>
-
-<!-- html -->
-<style>
-html:not(.style-scope) {
-  --yt-live-chat-background-color: hsl(0, 0%, 100%);
-  --yt-live-chat-action-panel-background-color: hsla(0, 0%, 93.3%, .4);
-  --yt-live-chat-action-panel-background-color-transparent: hsla(0, 0%, 97%, .8);
-  --yt-live-chat-mode-change-background-color: hsla(0, 0%, 93.3%, .4);
-  --yt-live-chat-primary-text-color: hsl(0, 0%, 6.7%);
-  --yt-live-chat-secondary-text-color: hsla(0, 0%, 6.7%, .6);
-  --yt-live-chat-tertiary-text-color: hsla(0, 0%, 6.7%, .4);
-  --yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8;
-  --yt-live-chat-text-input-field-placeholder-color: hsla(0, 0%, 6.7%, .6);
-  --yt-live-chat-icon-button-color: hsla(0, 0%, 6.7%, .4);
-  --yt-live-chat-enabled-send-button-color: #4285f4;
-  --yt-live-chat-disabled-icon-button-color: hsla(0, 0%, 6.7%, .2);
-  --yt-live-chat-picker-button-color: hsla(0, 0%, 6.7%, .4);
-  --yt-live-chat-picker-button-active-color: hsla(0, 0%, 6.7%, .8);
-  --yt-live-chat-picker-button-disabled-color: var(--yt-live-chat-disabled-icon-button-color);
-  --yt-live-chat-picker-button-hover-color: hsla(0, 0%, 6.7%, .6);
-  --yt-live-chat-mention-background-color: #ff5722;
-  --yt-live-chat-mention-text-color: hsl(0, 0%, 100%);
-  --yt-live-chat-deleted-message-color: rgba(0, 0, 0, .5);
-  --yt-live-chat-deleted-message-bar-color: rgba(11, 11, 11, .2);
-  --yt-live-chat-disabled-button-background-color: hsl(0, 0%, 93.3%);
-  --yt-live-chat-disabled-button-text-color: hsla(0, 0%, 6.7%, .4);
-  --yt-live-chat-sub-panel-background-color: hsl(0, 0%, 93.3%);
-  --yt-live-chat-sub-panel-background-color-transparent: hsla(0, 0%, 93%, .7);
-  --yt-live-chat-header-background-color: hsla(0, 0%, 93.3%, .4);
-  --yt-live-chat-header-button-color: hsl(0, 0%, 6.7%);
-  --yt-live-chat-error-message-color: hsl(10, 51%, 49%);
-  --yt-live-chat-reconnect-message-color: hsla(0, 0%, 7%, 0.2);
-  --yt-live-chat-moderator-color: hsl(225, 84%, 66%);
-  --yt-live-chat-owner-color: hsl(40, 76%, 55%);
-  --yt-live-chat-author-chip-owner-text-color: rgba(0,0,0,0.87);
-  --yt-live-chat-author-chip-verified-background-color: #CCCCCC;
-  --yt-live-chat-author-chip-verified-text-color: #606060;
-  --yt-live-chat-message-highlight-background-color: #f8f8f8;
-  --yt-live-chat-sponsor-color: #107516;
-  --yt-live-chat-overlay-color: hsla(0, 0%, 0%, 0.6);
-  --yt-live-chat-dialog-background-color: hsl(0, 0%, 100%);
-  --yt-live-chat-dialog-text-color: hsla(0, 0%, 6.7%, .6);
-  --yt-live-chat-poll-choice-text-color: var(--yt-spec-text-secondary);
-  --yt-live-chat-poll-choice-border-color: var(--yt-spec-10-percent-layer);
-  --yt-live-chat-poll-choice-vote-bar-background-color: hsla(0, 0%, 93.3%, .8);
-  --yt-live-chat-poll-choice-vote-bar-background-color-selected: #F2F8FF;
-  --yt-live-chat-poll-choice-color-selected: #065FD4;
-  --yt-live-chat-moderation-mode-hover-background-color: hsla(0, 0%, 6.7%, .2);
-  --yt-live-chat-additional-inline-action-button-color: hsl(0, 0%, 100%);
-  --yt-live-chat-additional-inline-action-button-background-color: hsla(0, 0%, 26%, 0.8);
-  --yt-live-chat-additional-inline-action-button-background-color-hover: hsla(0, 0%, 26%, 1.0);
-  --yt-formatted-string-emoji-size: 24px;
-  --yt-live-chat-emoji-size: 24px;
-  --yt-live-chat-text-input-field-suggestion-background-color: hsl(0, 0%, 100%);
-  --yt-live-chat-text-input-field-suggestion-background-color-hover: #eee;
-  --yt-live-chat-text-input-field-suggestion-text-color: #666;
-  --yt-live-chat-text-input-field-suggestion-text-color-hover: #333;
-  --yt-live-chat-ticker-arrow-background: hsl(0, 0%, 97.3%);
-  --yt-emoji-picker-category-background-color: var(--yt-live-chat-action-panel-background-color-transparent);
-  --yt-emoji-picker-category-color: var(--yt-live-chat-secondary-text-color);
-  --yt-emoji-picker-category-button-color: var(--yt-live-chat-picker-button-color);
-  --yt-emoji-picker-search-background-color: hsla(0, 0%, 100%, .6);
-  --yt-emoji-picker-search-color: hsla(0, 0%, 6.7%, .8);
-  --yt-emoji-picker-search-placeholder-color: hsla(0, 0%, 6.7%, .6);
-  --yt-live-chat-slider-active-color: #2196f3;
-  --yt-live-chat-slider-container-color: #c8c8c8;
-  --yt-live-chat-slider-markers-color: #505050;
-  --yt-live-chat-toast-background-color: hsl(0, 0%, 20%);
-  --yt-live-chat-toast-text-color: hsl(0, 0%, 100%);
-  --yt-live-chat-automod-button-background-color: hsl(0, 0%, 93.3%);
-  --yt-live-chat-automod-button-background-color-hover: hsla(0, 0%, 6.7%, .2);
-  --yt-live-chat-countdown-opacity: 0.3;
-  --yt-live-chat-shimmer-background-color: rgba(136, 136, 136, 0.2);
-  --yt-live-chat-shimmer-linear-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 65%);
-  --yt-live-chat-vem-background-color: hsl(0, 0%, 93.3%);
-  --yt-live-chat-upsell-dialog-renderer-button-padding: 10px 16px;
-  --yt-live-chat-product-picker-icon-color: rgba(17, 17, 17, 0.6);
-  --yt-live-chat-product-picker-hover-color: rgba(17, 17, 16, 0.1);
-  --yt-live-chat-product-picker-disabled-icon-color: rgba(17, 17, 17, 0.4);
-  --yt-pdg-paid-stickers-tab-selection-bar-color: #065FD4;
-  --yt-pdg-paid-stickers-author-name-font-size: 13px;
-  --yt-pdg-paid-stickers-margin-left: 38px;
-}
-
-html:not(.style-scope) {
-  --layout_-_display: flex;
-  ;
-
-  --layout-inline_-_display: inline-flex;
-  ;
-
-  --layout-horizontal_-_display: var(--layout_-_display);
-  --layout-horizontal_-_-ms-flex-direction: row;
-  --layout-horizontal_-_-webkit-flex-direction: row;
-  --layout-horizontal_-_flex-direction: row;
-  ;
-
-  --layout-horizontal-reverse_-_display: var(--layout_-_display);
-  --layout-horizontal-reverse_-_-ms-flex-direction: row-reverse;
-  --layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse;
-  --layout-horizontal-reverse_-_flex-direction: row-reverse;
-  ;
-
-  --layout-vertical_-_display: var(--layout_-_display);
-  --layout-vertical_-_-ms-flex-direction: column;
-  --layout-vertical_-_-webkit-flex-direction: column;
-  --layout-vertical_-_flex-direction: column;
-  ;
-
-  --layout-vertical-reverse_-_display: var(--layout_-_display);
-  --layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
-  --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
-  --layout-vertical-reverse_-_flex-direction: column-reverse;
-  ;
-
-  --layout-wrap_-_-ms-flex-wrap: wrap;
-  --layout-wrap_-_-webkit-flex-wrap: wrap;
-  --layout-wrap_-_flex-wrap: wrap;
-  ;
-
-  --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse;
-  --layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse;
-  --layout-wrap-reverse_-_flex-wrap: wrap-reverse;
-  ;
-
-  --layout-flex-auto_-_-ms-flex: 1 1 auto;
-  --layout-flex-auto_-_-webkit-flex: 1 1 auto;
-  --layout-flex-auto_-_flex: 1 1 auto;
-  ;
-
-  --layout-flex-none_-_-ms-flex: none;
-  --layout-flex-none_-_-webkit-flex: none;
-  --layout-flex-none_-_flex: none;
-  ;
-
-  --layout-flex_-_-ms-flex: 1 1 0.000000001px;
-  --layout-flex_-_-webkit-flex: 1;
-  --layout-flex_-_flex: 1;
-  --layout-flex_-_-webkit-flex-basis: 0.000000001px;
-  --layout-flex_-_flex-basis: 0.000000001px;
-  ;
-
-  --layout-flex-2_-_-ms-flex: 2;
-  --layout-flex-2_-_-webkit-flex: 2;
-  --layout-flex-2_-_flex: 2;
-  ;
-
-  --layout-flex-3_-_-ms-flex: 3;
-  --layout-flex-3_-_-webkit-flex: 3;
-  --layout-flex-3_-_flex: 3;
-  ;
-
-  --layout-flex-4_-_-ms-flex: 4;
-  --layout-flex-4_-_-webkit-flex: 4;
-  --layout-flex-4_-_flex: 4;
-  ;
-
-  --layout-flex-5_-_-ms-flex: 5;
-  --layout-flex-5_-_-webkit-flex: 5;
-  --layout-flex-5_-_flex: 5;
-  ;
-
-  --layout-flex-6_-_-ms-flex: 6;
-  --layout-flex-6_-_-webkit-flex: 6;
-  --layout-flex-6_-_flex: 6;
-  ;
-
-  --layout-flex-7_-_-ms-flex: 7;
-  --layout-flex-7_-_-webkit-flex: 7;
-  --layout-flex-7_-_flex: 7;
-  ;
-
-  --layout-flex-8_-_-ms-flex: 8;
-  --layout-flex-8_-_-webkit-flex: 8;
-  --layout-flex-8_-_flex: 8;
-  ;
-
-  --layout-flex-9_-_-ms-flex: 9;
-  --layout-flex-9_-_-webkit-flex: 9;
-  --layout-flex-9_-_flex: 9;
-  ;
-
-  --layout-flex-10_-_-ms-flex: 10;
-  --layout-flex-10_-_-webkit-flex: 10;
-  --layout-flex-10_-_flex: 10;
-  ;
-
-  --layout-flex-11_-_-ms-flex: 11;
-  --layout-flex-11_-_-webkit-flex: 11;
-  --layout-flex-11_-_flex: 11;
-  ;
-
-  --layout-flex-12_-_-ms-flex: 12;
-  --layout-flex-12_-_-webkit-flex: 12;
-  --layout-flex-12_-_flex: 12;
-  ;
-
-
-
-  --layout-start_-_-ms-flex-align: start;
-  --layout-start_-_-webkit-align-items: flex-start;
-  --layout-start_-_align-items: flex-start;
-  ;
-
-  --layout-center_-_-ms-flex-align: center;
-  --layout-center_-_-webkit-align-items: center;
-  --layout-center_-_align-items: center;
-  ;
-
-  --layout-end_-_-ms-flex-align: end;
-  --layout-end_-_-webkit-align-items: flex-end;
-  --layout-end_-_align-items: flex-end;
-  ;
-
-  --layout-baseline_-_-ms-flex-align: baseline;
-  --layout-baseline_-_-webkit-align-items: baseline;
-  --layout-baseline_-_align-items: baseline;
-  ;
-
-
-
-  --layout-start-justified_-_-ms-flex-pack: start;
-  --layout-start-justified_-_-webkit-justify-content: flex-start;
-  --layout-start-justified_-_justify-content: flex-start;
-  ;
-
-  --layout-center-justified_-_-ms-flex-pack: center;
-  --layout-center-justified_-_-webkit-justify-content: center;
-  --layout-center-justified_-_justify-content: center;
-  ;
-
-  --layout-end-justified_-_-ms-flex-pack: end;
-  --layout-end-justified_-_-webkit-justify-content: flex-end;
-  --layout-end-justified_-_justify-content: flex-end;
-  ;
-
-  --layout-around-justified_-_-ms-flex-pack: distribute;
-  --layout-around-justified_-_-webkit-justify-content: space-around;
-  --layout-around-justified_-_justify-content: space-around;
-  ;
-
-  --layout-justified_-_-ms-flex-pack: justify;
-  --layout-justified_-_-webkit-justify-content: space-between;
-  --layout-justified_-_justify-content: space-between;
-  ;
-
-  --layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align);
-  --layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items);
-  --layout-center-center_-_align-items: var(--layout-center_-_align-items);
-  --layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack);
-  --layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content);
-  --layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);
-  ;
-
-
-
-  --layout-self-start_-_-ms-align-self: flex-start;
-  --layout-self-start_-_-webkit-align-self: flex-start;
-  --layout-self-start_-_align-self: flex-start;
-  ;
-
-  --layout-self-center_-_-ms-align-self: center;
-  --layout-self-center_-_-webkit-align-self: center;
-  --layout-self-center_-_align-self: center;
-  ;
-
-  --layout-self-end_-_-ms-align-self: flex-end;
-  --layout-self-end_-_-webkit-align-self: flex-end;
-  --layout-self-end_-_align-self: flex-end;
-  ;
-
-  --layout-self-stretch_-_-ms-align-self: stretch;
-  --layout-self-stretch_-_-webkit-align-self: stretch;
-  --layout-self-stretch_-_align-self: stretch;
-  ;
-
-  --layout-self-baseline_-_-ms-align-self: baseline;
-  --layout-self-baseline_-_-webkit-align-self: baseline;
-  --layout-self-baseline_-_align-self: baseline;
-  ;
-
-
-
-  --layout-start-aligned_-_-ms-flex-line-pack: start;
-  --layout-start-aligned_-_-ms-align-content: flex-start;
-  --layout-start-aligned_-_-webkit-align-content: flex-start;
-  --layout-start-aligned_-_align-content: flex-start;
-  ;
-
-  --layout-end-aligned_-_-ms-flex-line-pack: end;
-  --layout-end-aligned_-_-ms-align-content: flex-end;
-  --layout-end-aligned_-_-webkit-align-content: flex-end;
-  --layout-end-aligned_-_align-content: flex-end;
-  ;
-
-  --layout-center-aligned_-_-ms-flex-line-pack: center;
-  --layout-center-aligned_-_-ms-align-content: center;
-  --layout-center-aligned_-_-webkit-align-content: center;
-  --layout-center-aligned_-_align-content: center;
-  ;
-
-  --layout-between-aligned_-_-ms-flex-line-pack: justify;
-  --layout-between-aligned_-_-ms-align-content: space-between;
-  --layout-between-aligned_-_-webkit-align-content: space-between;
-  --layout-between-aligned_-_align-content: space-between;
-  ;
-
-  --layout-around-aligned_-_-ms-flex-line-pack: distribute;
-  --layout-around-aligned_-_-ms-align-content: space-around;
-  --layout-around-aligned_-_-webkit-align-content: space-around;
-  --layout-around-aligned_-_align-content: space-around;
-  ;
-
-
-
-  --layout-block_-_display: block;
-  ;
-
-  --layout-invisible_-_visibility: hidden !important;
-  ;
-
-  --layout-relative_-_position: relative;
-  ;
-
-  --layout-fit_-_position: absolute;
-  --layout-fit_-_top: 0;
-  --layout-fit_-_right: 0;
-  --layout-fit_-_bottom: 0;
-  --layout-fit_-_left: 0;
-  ;
-
-  --layout-scroll_-_-webkit-overflow-scrolling: touch;
-  --layout-scroll_-_overflow: auto;
-  ;
-
-  --layout-fullbleed_-_margin: 0;
-  --layout-fullbleed_-_height: 100vh;
-  ;
-
-
-
-  --layout-fixed-top_-_position: fixed;
-  --layout-fixed-top_-_top: 0;
-  --layout-fixed-top_-_left: 0;
-  --layout-fixed-top_-_right: 0;
-  ;
-
-  --layout-fixed-right_-_position: fixed;
-  --layout-fixed-right_-_top: 0;
-  --layout-fixed-right_-_right: 0;
-  --layout-fixed-right_-_bottom: 0;
-  ;
-
-  --layout-fixed-bottom_-_position: fixed;
-  --layout-fixed-bottom_-_right: 0;
-  --layout-fixed-bottom_-_bottom: 0;
-  --layout-fixed-bottom_-_left: 0;
-  ;
-
-  --layout-fixed-left_-_position: fixed;
-  --layout-fixed-left_-_top: 0;
-  --layout-fixed-left_-_bottom: 0;
-  --layout-fixed-left_-_left: 0;
-  ;
-}
-</style>
-
-<!-- yt-live-chat-app -->
-<style>
-canvas.yt-live-chat-app, caption.yt-live-chat-app, center.yt-live-chat-app, cite.yt-live-chat-app, code.yt-live-chat-app, dd.yt-live-chat-app, del.yt-live-chat-app, dfn.yt-live-chat-app, div.yt-live-chat-app, dl.yt-live-chat-app, dt.yt-live-chat-app, em.yt-live-chat-app, embed.yt-live-chat-app, fieldset.yt-live-chat-app, font.yt-live-chat-app, form.yt-live-chat-app, h1.yt-live-chat-app, h2.yt-live-chat-app, h3.yt-live-chat-app, h4.yt-live-chat-app, h5.yt-live-chat-app, h6.yt-live-chat-app, hr.yt-live-chat-app, i.yt-live-chat-app, iframe.yt-live-chat-app, img.yt-live-chat-app, ins.yt-live-chat-app, kbd.yt-live-chat-app, label.yt-live-chat-app, legend.yt-live-chat-app, li.yt-live-chat-app, menu.yt-live-chat-app, object.yt-live-chat-app, ol.yt-live-chat-app, p.yt-live-chat-app, pre.yt-live-chat-app, q.yt-live-chat-app, s.yt-live-chat-app, samp.yt-live-chat-app, small.yt-live-chat-app, span.yt-live-chat-app, strike.yt-live-chat-app, strong.yt-live-chat-app, sub.yt-live-chat-app, sup.yt-live-chat-app, table.yt-live-chat-app, tbody.yt-live-chat-app, td.yt-live-chat-app, tfoot.yt-live-chat-app, th.yt-live-chat-app, thead.yt-live-chat-app, tr.yt-live-chat-app, tt.yt-live-chat-app, u.yt-live-chat-app, ul.yt-live-chat-app, var.yt-live-chat-app {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-app[hidden] {
-  display: none !important;
-}
-
-yt-live-chat-app {
-  display: block;
-  width: 100vw;
-  height: 100vh;
-  --yt-report-form-modal-renderer-min-width: 0;
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-
-#contents.yt-live-chat-app {
-/* yt-live-chat-renderer.yt-live-chat-app { */
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-}
-
-#contents.yt-live-chat-app>*.yt-live-chat-app {
-/* yt-live-chat-renderer.yt-live-chat-app { */
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-}
-
-yt-live-chat-app[dashboard-money-feed] #contents.yt-live-chat-app>yt-live-chat-message-renderer.yt-live-chat-app {
-  font-size: 18px;
-}
-</style>
-
-<!-- yt-live-chat-renderer -->
-<style>
-canvas.yt-live-chat-renderer, caption.yt-live-chat-renderer, center.yt-live-chat-renderer, cite.yt-live-chat-renderer, code.yt-live-chat-renderer, dd.yt-live-chat-renderer, del.yt-live-chat-renderer, dfn.yt-live-chat-renderer, div.yt-live-chat-renderer, dl.yt-live-chat-renderer, dt.yt-live-chat-renderer, em.yt-live-chat-renderer, embed.yt-live-chat-renderer, fieldset.yt-live-chat-renderer, font.yt-live-chat-renderer, form.yt-live-chat-renderer, h1.yt-live-chat-renderer, h2.yt-live-chat-renderer, h3.yt-live-chat-renderer, h4.yt-live-chat-renderer, h5.yt-live-chat-renderer, h6.yt-live-chat-renderer, hr.yt-live-chat-renderer, i.yt-live-chat-renderer, iframe.yt-live-chat-renderer, img.yt-live-chat-renderer, ins.yt-live-chat-renderer, kbd.yt-live-chat-renderer, label.yt-live-chat-renderer, legend.yt-live-chat-renderer, li.yt-live-chat-renderer, menu.yt-live-chat-renderer, object.yt-live-chat-renderer, ol.yt-live-chat-renderer, p.yt-live-chat-renderer, pre.yt-live-chat-renderer, q.yt-live-chat-renderer, s.yt-live-chat-renderer, samp.yt-live-chat-renderer, small.yt-live-chat-renderer, span.yt-live-chat-renderer, strike.yt-live-chat-renderer, strong.yt-live-chat-renderer, sub.yt-live-chat-renderer, sup.yt-live-chat-renderer, table.yt-live-chat-renderer, tbody.yt-live-chat-renderer, td.yt-live-chat-renderer, tfoot.yt-live-chat-renderer, th.yt-live-chat-renderer, thead.yt-live-chat-renderer, tr.yt-live-chat-renderer, tt.yt-live-chat-renderer, u.yt-live-chat-renderer, ul.yt-live-chat-renderer, var.yt-live-chat-renderer {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-renderer[hidden] {
-  display: none !important;
-}
-
-yt-live-chat-renderer {
-  font-size: 13px;
-  --yt-emoji-picker-renderer-height: 180px;
-  --yt-button-default-text-color: var(--yt-live-chat-button-default-text-color);
-  --yt-button-default-background-color: var(--yt-live-chat-button-default-background-color);
-  --yt-button-dark-text-color: var(--yt-live-chat-button-dark-text-color);
-  --yt-button-dark-background-color: var(--yt-live-chat-button-dark-background-color);
-  --yt-button-payment-background-color: var(--yt-live-chat-sponsor-color);
-}
-
-yt-live-chat-renderer {
-  position: relative;
-  background: var(--yt-live-chat-background-color);
-  color: var(--yt-live-chat-primary-text-color);
-  overflow: hidden;
-  z-index: 0;
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-
-yt-live-chat-renderer[hide-timestamps] {
-  --yt-live-chat-item-timestamp-display: none;
-}
-
-#separator.yt-live-chat-renderer {
-  border-bottom: var(--yt-live-chat-header-bottom-border, none);
-}
-
-#content-pages.yt-live-chat-renderer {
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-}
-
-#panel-pages.yt-live-chat-renderer {
-  max-height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-#contents.yt-live-chat-renderer {
-  overflow: hidden;
-  position: relative;
-  z-index: 0;
-}
-
-#chat-messages.yt-live-chat-renderer, #contents.yt-live-chat-renderer, #item-list.yt-live-chat-renderer {
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-}
-
-#ticker.yt-live-chat-renderer {
-  z-index: 1;
-}
-
-#chat.yt-live-chat-renderer {
-  position: relative;
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-}
-
-#chat.yt-live-chat-renderer::after {
-  content: '';
-  display: none;
-  animation: gradient-slide 1.2s ease infinite;
-  animation-name: gradient-slide;
-  background-color: var(--yt-live-chat-shimmer-background-color);
-  background-image: var(--yt-live-chat-shimmer-linear-gradient);
-  background-size: 300% 300%;
-  transform: rotateX(180deg);
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-yt-live-chat-renderer[loading] #chat.yt-live-chat-renderer::after {
-  display: block;
-}
-
-yt-live-chat-pinned-message-renderer.yt-live-chat-renderer {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-yt-live-chat-item-list-renderer.yt-live-chat-renderer, yt-live-chat-ninja-message-renderer.yt-live-chat-renderer {
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-}
-
-#action-panel.yt-live-chat-renderer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-}
-
-yt-live-chat-renderer[has-action-panel-renderer] yt-live-chat-action-panel-renderer.yt-live-chat-renderer {
-  animation: slideUp cubic-bezier(0.05, 0.00, 0.00, 1.00) forwards;
-  animation-duration: 0.5s;
-}
-
-#action-panel-backdrop.yt-live-chat-renderer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  visibility: hidden;
-}
-
-yt-live-chat-renderer[has-action-panel-renderer] #action-panel-backdrop.yt-live-chat-renderer {
-  visibility: visible;
-  animation: fadeIn cubic-bezier(0.05, 0.00, 0.00, 1.00) forwards;
-  animation-duration: 0.5s;
-}
-
-#input-panel.yt-live-chat-renderer {
-  -ms-flex: none;
-  -webkit-flex: none;
-  flex: none;
-}
-
-#input-panel.yt-live-chat-renderer:not(:empty) {
-  border-top: var(--yt-live-chat-action-panel-top-border, none);
-}
-
-.hide-on-collapse.yt-live-chat-renderer {
-  transition: opacity 0.3s;
-}
-
-yt-live-chat-renderer[collapsed] .hide-on-collapse.yt-live-chat-renderer {
-  opacity: 0;
-}
-
-#loading.yt-live-chat-renderer {
-  height: 387px;
-  background-color: var(--yt-live-chat-action-panel-background-color);
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-#loading.yt-live-chat-renderer>paper-spinner-lite.yt-live-chat-renderer {
-  --paper-spinner-color: var(--yt-live-chat-primary-text-color);
-}
-
-#nitrate-promo.yt-live-chat-renderer>*.yt-live-chat-renderer {
-  background: var(--yt-live-chat-overlay-color);
-  z-index: 3;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-@keyframes gradient-slide {
-  0% {
-    background-position: 100% 100%;
-  }
-  to {
-    background-position: 0% 0%;
-  }
-}
-
-@keyframes slideUp {
-  0% {
-    transform: translateY(15%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  0% {
-    background-color: transparent;
-  }
-  100% {
-    background-color: rgba(0, 0, 0, 0.60);
-  }
-}
-</style>
-
-<!-- yt-live-chat-item-list-renderer -->
-<style>
-canvas.yt-live-chat-item-list-renderer, caption.yt-live-chat-item-list-renderer, center.yt-live-chat-item-list-renderer, cite.yt-live-chat-item-list-renderer, code.yt-live-chat-item-list-renderer, dd.yt-live-chat-item-list-renderer, del.yt-live-chat-item-list-renderer, dfn.yt-live-chat-item-list-renderer, div.yt-live-chat-item-list-renderer, dl.yt-live-chat-item-list-renderer, dt.yt-live-chat-item-list-renderer, em.yt-live-chat-item-list-renderer, embed.yt-live-chat-item-list-renderer, fieldset.yt-live-chat-item-list-renderer, font.yt-live-chat-item-list-renderer, form.yt-live-chat-item-list-renderer, h1.yt-live-chat-item-list-renderer, h2.yt-live-chat-item-list-renderer, h3.yt-live-chat-item-list-renderer, h4.yt-live-chat-item-list-renderer, h5.yt-live-chat-item-list-renderer, h6.yt-live-chat-item-list-renderer, hr.yt-live-chat-item-list-renderer, i.yt-live-chat-item-list-renderer, iframe.yt-live-chat-item-list-renderer, img.yt-live-chat-item-list-renderer, ins.yt-live-chat-item-list-renderer, kbd.yt-live-chat-item-list-renderer, label.yt-live-chat-item-list-renderer, legend.yt-live-chat-item-list-renderer, li.yt-live-chat-item-list-renderer, menu.yt-live-chat-item-list-renderer, object.yt-live-chat-item-list-renderer, ol.yt-live-chat-item-list-renderer, p.yt-live-chat-item-list-renderer, pre.yt-live-chat-item-list-renderer, q.yt-live-chat-item-list-renderer, s.yt-live-chat-item-list-renderer, samp.yt-live-chat-item-list-renderer, small.yt-live-chat-item-list-renderer, span.yt-live-chat-item-list-renderer, strike.yt-live-chat-item-list-renderer, strong.yt-live-chat-item-list-renderer, sub.yt-live-chat-item-list-renderer, sup.yt-live-chat-item-list-renderer, table.yt-live-chat-item-list-renderer, tbody.yt-live-chat-item-list-renderer, td.yt-live-chat-item-list-renderer, tfoot.yt-live-chat-item-list-renderer, th.yt-live-chat-item-list-renderer, thead.yt-live-chat-item-list-renderer, tr.yt-live-chat-item-list-renderer, tt.yt-live-chat-item-list-renderer, u.yt-live-chat-item-list-renderer, ul.yt-live-chat-item-list-renderer, var.yt-live-chat-item-list-renderer {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.yt-live-chat-item-list-renderer[hidden] {
-  display: none !important;
-}
-
-yt-live-chat-item-list-renderer {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  z-index: 0;
-}
-
-yt-live-chat-item-list-renderer[moderation-mode-enabled] {
-  --yt-live-chat-item-with-inline-actions-context-menu-display: none;
-  --yt-live-chat-inline-action-button-container-display: flex;
-}
-
-#contents.yt-live-chat-item-list-renderer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-
-#empty-state-message.yt-live-chat-item-list-renderer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-#empty-state-message.yt-live-chat-item-list-renderer>yt-live-chat-message-renderer.yt-live-chat-item-list-renderer {
-  color: var(--yt-live-chat-tertiary-text-color);
-  background: transparent;
-  font-size: 18px;
-  --yt-live-chat-message-renderer-text-align: center;
-}
-
-yt-icon-button.yt-live-chat-item-list-renderer {
-  background-color: #2196f3;
-  border-radius: 999px;
-  bottom: 0;
-  color: #fff;
-  cursor: pointer;
-  width: 32px;
-  height: 32px;
-  margin: 0 calc(50% - 16px) 8px calc(50% - 16px);
-  padding: 4px;
-  position: absolute;
-  transition-property: bottom;
-  transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
-  transition-duration: 0.15s;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-}
-
-yt-icon-button.yt-live-chat-item-list-renderer[disabled] {
-  bottom: -42px;
-  color: #fff;
-  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
-}
-
-#item-scroller.yt-live-chat-item-list-renderer {
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  padding-right: var(--scrollbar-width);
-}
-
-yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer {
-  overflow-y: scroll;
-  padding-right: 0;
-}
-
-#item-offset.yt-live-chat-item-list-renderer {
-  position: relative;
-}
-
-#item-scroller.animated.yt-live-chat-item-list-renderer #item-offset.yt-live-chat-item-list-renderer {
-  overflow: hidden;
-}
-
-#items.yt-live-chat-item-list-renderer {
-  -ms-flex: 1 1 0.000000001px;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0.000000001px;
-  flex-basis: 0.000000001px;
-  padding: var(--yt-live-chat-item-list-renderer-padding, 4px 0);
-}
-
-#items.yt-live-chat-item-list-renderer>*.yt-live-chat-item-list-renderer:not(:first-child) {
-  border-top: var(--yt-live-chat-item-list-item-border, none);
-}
-
-#item-scroller.animated.yt-live-chat-item-list-renderer #items.yt-live-chat-item-list-renderer {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  transform: translateY(0);
-}
-
-#docked-messages.yt-live-chat-item-list-renderer {
-  z-index: 1;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-}
-
-yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer {
-  padding: 4px 24px;
-}
-
-yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer[dashboard-money-feed] {
-  padding: 8px 16px;
-}
-</style>
+<style src="@/assets/css/youtube/yt-html.css"></style>
+<style src="@/assets/css/youtube/yt-live-chat-renderer.css"></style>
+<style src="@/assets/css/youtube/yt-live-chat-item-list-renderer.css"></style>

frontend/src/lang/en.js

@@ -31,7 +31,8 @@ export default {
     blockMedalLevel: 'Block medal level lower than',
 
     advanced: 'Advanced',
-    autoTranslate: 'Auto translate messages to Japanese',
+    relayMessagesByServer: 'Relay messages by server',
+    autoTranslate: 'Auto translate messages to Japanese (requires relay messages by server)',
 
     roomUrl: 'Room URL',
     copy: 'Copy',

frontend/src/lang/ja.js

@@ -31,7 +31,8 @@ export default {
     blockMedalLevel: 'ブロック勲章等級がx未満',
 
     advanced: 'アドバンスド',
-    autoTranslate: '自動翻訳コメントから日本語へ',
+    relayMessagesByServer: 'サーバを介してメッセージを転送する',
+    autoTranslate: 'コメントを日本語に翻訳する（サーバを介してメッセージを転送する必要）',
 
     roomUrl: 'ルームのURL',
     copy: 'コピー',

frontend/src/lang/zh.js

@@ -31,7 +31,8 @@ export default {
     blockMedalLevel: '屏蔽当前直播间勋章等级低于',
 
     advanced: '高级',
-    autoTranslate: '自动翻译弹幕到日语',
+    relayMessagesByServer: '通过服务器转发消息',
+    autoTranslate: '自动翻译弹幕到日语（需要通过服务器转发消息）',
 
     roomUrl: '房间URL',
     copy: '复制',

frontend/src/layout/index.vue

@@ -9,7 +9,7 @@
         </router-link>
       </div>
       <div class="version">
-        v1.4.5
+        v1.5.0
       </div>
       <sidebar></sidebar>
     </el-aside>
@@ -53,7 +53,7 @@ export default {
 
 <style>
 html {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", "微软雅黑", Arial, sans-serif;
 }
 
 html, body, #app, .app-wrapper, .sidebar-container {

frontend/src/utils.js

@@ -32,3 +32,12 @@ export function getTimeTextHourMin (date) {
   let min = ('00' + date.getMinutes()).slice(-2)
   return `${hour}:${min}`
 }
+
+export function getUuid4Hex () {
+  let chars = []
+  for (let i = 0; i < 32; i++) {
+    let char = Math.floor(Math.random() * 16).toString(16)
+    chars.push(char)
+  }
+  return chars.join('')
+}

frontend/src/views/Home.vue

@@ -58,8 +58,11 @@
       </el-tab-pane>
 
       <el-tab-pane :label="$t('home.advanced')">
+        <el-form-item :label="$t('home.relayMessagesByServer')">
+          <el-switch v-model="form.relayMessagesByServer"></el-switch>
+        </el-form-item>
         <el-form-item :label="$t('home.autoTranslate')">
-          <el-switch v-model="form.autoTranslate" :disabled="!serverConfig.enableTranslate"></el-switch>
+          <el-switch v-model="form.autoTranslate" :disabled="!serverConfig.enableTranslate || !form.relayMessagesByServer"></el-switch>
         </el-form-item>
       </el-tab-pane>
     </el-tabs>
@@ -83,7 +86,7 @@ import axios from 'axios'
 import download from 'downloadjs'
 
 import {mergeConfig} from '@/utils'
-import * as config from '@/api/config'
+import * as chatConfig from '@/api/chatConfig'
 
 export default {
   name: 'Home',
@@ -95,7 +98,7 @@ export default {
       },
       form: {
         roomId: parseInt(window.localStorage.roomId || '1'),
-        ...config.getLocalConfig()
+        ...chatConfig.getLocalConfig()
       }
     }
   },
@@ -124,7 +127,7 @@ export default {
   watch: {
     roomUrl: _.debounce(function() {
       window.localStorage.roomId = this.form.roomId
-      config.setLocalConfig(this.form)
+      chatConfig.setLocalConfig(this.form)
     }, 500)
   },
   mounted() {
@@ -146,7 +149,7 @@ export default {
       document.execCommand('Copy')
     },
     exportConfig() {
-      let cfg = mergeConfig(this.form, config.DEFAULT_CONFIG)
+      let cfg = mergeConfig(this.form, chatConfig.DEFAULT_CONFIG)
       download(JSON.stringify(cfg, null, 2), 'blivechat.json', 'application/json')
     },
     importConfig() {
@@ -163,7 +166,7 @@ export default {
             this.$message.error(this.$t('home.failedToParseConfig') + e)
             return
           }
-          cfg = mergeConfig(cfg, config.DEFAULT_CONFIG)
+          cfg = mergeConfig(cfg, chatConfig.DEFAULT_CONFIG)
           this.form = {roomId: this.form.roomId, ...cfg}
         }
         reader.readAsText(input.files[0])

frontend/src/views/Room.vue

@@ -4,19 +4,12 @@
 
 <script>
 import {mergeConfig, toBool, toInt} from '@/utils'
-import * as config from '@/api/config'
+import * as chatConfig from '@/api/chatConfig'
+import ChatClientDirect from '@/api/chat/ChatClientDirect'
+import ChatClientRelay from '@/api/chat/ChatClientRelay'
 import ChatRenderer from '@/components/ChatRenderer'
 import * as constants from '@/components/ChatRenderer/constants'
 
-const COMMAND_HEARTBEAT = 0
-const COMMAND_JOIN_ROOM = 1
-const COMMAND_ADD_TEXT = 2
-const COMMAND_ADD_GIFT = 3
-const COMMAND_ADD_MEMBER = 4
-const COMMAND_ADD_SUPER_CHAT = 5
-const COMMAND_DEL_SUPER_CHAT = 6
-const COMMAND_UPDATE_TRANSLATION = 7
-
 export default {
   name: 'Room',
   components: {
@@ -24,12 +17,8 @@ export default {
   },
   data() {
     return {
-      config: {...config.DEFAULT_CONFIG},
-
-      websocket: null,
-      retryCount: 0,
-      isDestroying: false,
-      heartbeatTimerId: null
+      config: {...chatConfig.DEFAULT_CONFIG},
+      chatClient: null
     }
   },
   computed: {
@@ -41,8 +30,8 @@ export default {
     }
   },
   created() {
-    this.updateConfig()
-    this.wsConnect()
+    this.initConfig()
+    this.initChatClient()
     // 提示用户已加载
     this.$message({
       message: 'Loaded',
@@ -50,11 +39,12 @@ export default {
     })
   },
   beforeDestroy() {
-    this.isDestroying = true
-    this.websocket.close()
+    if (this.chatClient) {
+      this.chatClient.stop()
+    }
   },
   methods: {
-    updateConfig() {
+    initConfig() {
       let cfg = {}
       // 留空的使用默认值
       for (let i in this.$route.query) {
@@ -62,173 +52,127 @@ export default {
           cfg[i] = this.$route.query[i]
         }
       }
-      cfg = mergeConfig(cfg, config.DEFAULT_CONFIG)
+      cfg = mergeConfig(cfg, chatConfig.DEFAULT_CONFIG)
 
-      cfg.minGiftPrice = toInt(cfg.minGiftPrice, config.DEFAULT_CONFIG.minGiftPrice)
+      cfg.minGiftPrice = toInt(cfg.minGiftPrice, chatConfig.DEFAULT_CONFIG.minGiftPrice)
       cfg.showDanmaku = toBool(cfg.showDanmaku)
       cfg.showGift = toBool(cfg.showGift)
       cfg.showGiftName = toBool(cfg.showGiftName)
       cfg.mergeSimilarDanmaku = toBool(cfg.mergeSimilarDanmaku)
       cfg.mergeGift = toBool(cfg.mergeGift)
-      cfg.maxNumber = toInt(cfg.maxNumber, config.DEFAULT_CONFIG.maxNumber)
+      cfg.maxNumber = toInt(cfg.maxNumber, chatConfig.DEFAULT_CONFIG.maxNumber)
       cfg.blockGiftDanmaku = toBool(cfg.blockGiftDanmaku)
-      cfg.blockLevel = toInt(cfg.blockLevel, config.DEFAULT_CONFIG.blockLevel)
+      cfg.blockLevel = toInt(cfg.blockLevel, chatConfig.DEFAULT_CONFIG.blockLevel)
       cfg.blockNewbie = toBool(cfg.blockNewbie)
       cfg.blockNotMobileVerified = toBool(cfg.blockNotMobileVerified)
-      cfg.blockMedalLevel = toInt(cfg.blockMedalLevel, config.DEFAULT_CONFIG.blockMedalLevel)
+      cfg.blockMedalLevel = toInt(cfg.blockMedalLevel, chatConfig.DEFAULT_CONFIG.blockMedalLevel)
+      cfg.relayMessagesByServer = toBool(cfg.relayMessagesByServer)
       cfg.autoTranslate = toBool(cfg.autoTranslate)
 
       this.config = cfg
     },
-    wsConnect() {
-      const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
-      // 开发时使用localhost:12450
-      const host = process.env.NODE_ENV === 'development' ? 'localhost:12450' : window.location.host
-      const url = `${protocol}://${host}/api/chat`
-      this.websocket = new WebSocket(url)
-      this.websocket.onopen = this.onWsOpen
-      this.websocket.onclose = this.onWsClose
-      this.websocket.onmessage = this.onWsMessage
-      this.heartbeatTimerId = window.setInterval(this.sendHeartbeat, 10 * 1000)
-    },
-    sendHeartbeat() {
-      this.websocket.send(JSON.stringify({
-        cmd: COMMAND_HEARTBEAT
-      }))
-    },
-    onWsOpen() {
-      this.retryCount = 0
-      this.websocket.send(JSON.stringify({
-        cmd: COMMAND_JOIN_ROOM,
-        data: {
-          roomId: parseInt(this.$route.params.roomId),
-          config: {
-            autoTranslate: this.config.autoTranslate
-          }
-        }
-      }))
-    },
-    onWsClose() {
-      if (this.heartbeatTimerId) {
-        window.clearInterval(this.heartbeatTimerId)
-        this.heartbeatTimerId = null
+    initChatClient() {
+      let roomId = parseInt(this.$route.params.roomId)
+      if (!this.config.relayMessagesByServer) {
+        this.chatClient = new ChatClientDirect(roomId)
+      } else {
+        this.chatClient = new ChatClientRelay(roomId, this.config.autoTranslate)
       }
-      if (this.isDestroying) {
+      this.chatClient.onAddText = this.onAddText
+      this.chatClient.onAddGift = this.onAddGift
+      this.chatClient.onAddMember = this.onAddMember
+      this.chatClient.onAddSuperChat = this.onAddSuperChat
+      this.chatClient.onDelSuperChat = this.onDelSuperChat
+      this.chatClient.onUpdateTranslation = this.onUpdateTranslation
+      this.chatClient.start()
+    },
+
+    onAddText(data) {
+      if (!this.config.showDanmaku || !this.filterTextMessage(data) || this.mergeSimilarText(data.content)) {
         return
       }
-      window.console.log(`掉线重连中${++this.retryCount}`)
-      this.wsConnect()
+      let message = {
+        id: data.id,
+        type: constants.MESSAGE_TYPE_TEXT,
+        avatarUrl: data.avatarUrl,
+        time: new Date(data.timestamp * 1000),
+        authorName: data.authorName,
+        authorType: data.authorType,
+        content: data.content,
+        privilegeType: data.privilegeType,
+        repeated: 1,
+        translation: data.translation
+      }
+      this.$refs.renderer.addMessage(message)
     },
-    onWsMessage(event) {
-      let {cmd, data} = JSON.parse(event.data)
-      let message = null
-      switch (cmd) {
-      case COMMAND_ADD_TEXT:
-        data = {
-          avatarUrl: data[0],
-          timestamp: data[1],
-          authorName: data[2],
-          authorType: data[3],
-          content: data[4],
-          privilegeType: data[5],
-          isGiftDanmaku: !!data[6],
-          authorLevel: data[7],
-          isNewbie: !!data[8],
-          isMobileVerified: !!data[9],
-          medalLevel: data[10],
-          id: data[11],
-          translation: data[12]
-        }
-        if (!this.config.showDanmaku || !this.filterTextMessage(data) || this.mergeSimilarText(data.content)) {
-          break
-        }
-        message = {
-          id: data.id,
-          type: constants.MESSAGE_TYPE_TEXT,
-          avatarUrl: data.avatarUrl,
-          time: new Date(data.timestamp * 1000),
-          authorName: data.authorName,
-          authorType: data.authorType,
-          content: data.content,
-          privilegeType: data.privilegeType,
-          repeated: 1,
-          translation: data.translation
-        }
-        break
-      case COMMAND_ADD_GIFT: {
-        if (!this.config.showGift) {
-          break
-        }
-        let price = data.totalCoin / 1000
-        if (this.mergeSimilarGift(data.authorName, price, data.giftName, data.num)) {
-          break
-        }
-        if (price < this.config.minGiftPrice) { // 丢人
-          break
-        }
-        message = {
-          id: data.id,
-          type: constants.MESSAGE_TYPE_GIFT,
-          avatarUrl: data.avatarUrl,
-          time: new Date(data.timestamp * 1000),
-          authorName: data.authorName,
-          price: price,
-          giftName: data.giftName,
-          num: data.num
-        }
-        break
+    onAddGift(data) {
+      if (!this.config.showGift) {
+        return
       }
-      case COMMAND_ADD_MEMBER:
-        if (!this.config.showGift || !this.filterNewMemberMessage(data)) {
-          break
-        }
-        message = {
-          id: data.id,
-          type: constants.MESSAGE_TYPE_MEMBER,
-          avatarUrl: data.avatarUrl,
-          time: new Date(data.timestamp * 1000),
-          authorName: data.authorName,
-          privilegeType: data.privilegeType,
-          title: 'New member'
-        }
-        break
-      case COMMAND_ADD_SUPER_CHAT:
-        if (!this.config.showGift || !this.filterSuperChatMessage(data)) {
-          break
-        }
-        if (data.price < this.config.minGiftPrice) { // 丢人
-          break
-        }
-        message = {
-          id: data.id,
-          type: constants.MESSAGE_TYPE_SUPER_CHAT,
-          avatarUrl: data.avatarUrl,
-          authorName: data.authorName,
-          price: data.price,
-          time: new Date(data.timestamp * 1000),
-          content: data.content.trim()
-        }
-        break
-      case COMMAND_DEL_SUPER_CHAT:
-        for (let id of data.ids) {
-          this.$refs.renderer.delMessage(id)
-        }
-        break
-      case COMMAND_UPDATE_TRANSLATION:
-        if (!this.config.autoTranslate) {
-          break
-        }
-        data = {
-          id: data[0],
-          translation: data[1]
-        }
-        this.$refs.renderer.updateMessage(data.id, {translation: data.translation})
-        break
+      let price = data.totalCoin / 1000
+      if (this.mergeSimilarGift(data.authorName, price, data.giftName, data.num)) {
+        return
       }
-      if (message) {
-        this.$refs.renderer.addMessage(message)
+      if (price < this.config.minGiftPrice) { // 丢人
+        return
+      }
+      let message = {
+        id: data.id,
+        type: constants.MESSAGE_TYPE_GIFT,
+        avatarUrl: data.avatarUrl,
+        time: new Date(data.timestamp * 1000),
+        authorName: data.authorName,
+        price: price,
+        giftName: data.giftName,
+        num: data.num
+      }
+      this.$refs.renderer.addMessage(message)
+    },
+    onAddMember(data) {
+      if (!this.config.showGift || !this.filterNewMemberMessage(data)) {
+        return
+      }
+      let message = {
+        id: data.id,
+        type: constants.MESSAGE_TYPE_MEMBER,
+        avatarUrl: data.avatarUrl,
+        time: new Date(data.timestamp * 1000),
+        authorName: data.authorName,
+        privilegeType: data.privilegeType,
+        title: 'New member'
+      }
+      this.$refs.renderer.addMessage(message)
+    },
+    onAddSuperChat(data) {
+      if (!this.config.showGift || !this.filterSuperChatMessage(data)) {
+        return
+      }
+      if (data.price < this.config.minGiftPrice) { // 丢人
+        return
+      }
+      let message = {
+        id: data.id,
+        type: constants.MESSAGE_TYPE_SUPER_CHAT,
+        avatarUrl: data.avatarUrl,
+        authorName: data.authorName,
+        price: data.price,
+        time: new Date(data.timestamp * 1000),
+        content: data.content.trim()
+      }
+      this.$refs.renderer.addMessage(message)
+    },
+    onDelSuperChat(data) {
+      for (let id of data.ids) {
+        this.$refs.renderer.delMessage(id)
       }
     },
+    onUpdateTranslation(data) {
+      if (!this.config.autoTranslate) {
+        return
+      }
+      this.$refs.renderer.updateMessage(data.id, {translation: data.translation})
+    },
+
     filterTextMessage(data) {
       if (this.config.blockGiftDanmaku && data.isGiftDanmaku) {
         return false

main.py

@@ -26,10 +26,8 @@ LOG_FILE_NAME = os.path.join(BASE_PATH, 'log', 'blivechat.log')
 routes = [
     (r'/api/server_info', api.main.ServerInfoHandler),
     (r'/api/chat', api.chat.ChatHandler),
-
-    # TODO 兼容旧版，下版本移除
-    (r'/server_info', api.main.ServerInfoHandler),
-    (r'/chat', api.chat.ChatHandler),
+    (r'/api/room_info', api.chat.RoomInfoHandler),
+    (r'/api/avatar_url', api.chat.AvatarHandler),
 
     (r'/(.*)', api.main.MainHandler, {'path': WEB_ROOT, 'default_filename': 'index.html'})
 ]
@@ -70,6 +68,9 @@ def init_logging(debug):
         handlers=[stream_handler, file_handler]
     )
 
+    # 屏蔽访问日志
+    logging.getLogger('tornado.access').setLevel(logging.WARNING)
+
 
 def run_server(host, port, debug):
     app = tornado.web.Application(

models/avatar.py

@@ -34,16 +34,20 @@ def init():
 
 
 async def get_avatar_url(user_id):
+    avatar_url = await get_avatar_url_or_none(user_id)
+    if avatar_url is None:
+        avatar_url = DEFAULT_AVATAR_URL
+    return avatar_url
+
+
+async def get_avatar_url_or_none(user_id):
     avatar_url = get_avatar_url_from_memory(user_id)
     if avatar_url is not None:
         return avatar_url
     avatar_url = await get_avatar_url_from_database(user_id)
     if avatar_url is not None:
         return avatar_url
-    avatar_url = await get_avatar_url_from_web(user_id)
-    if avatar_url is not None:
-        return avatar_url
-    return DEFAULT_AVATAR_URL
+    return await get_avatar_url_from_web(user_id)
 
 
 def get_avatar_url_from_memory(user_id):
@@ -200,5 +204,5 @@ def _update_avatar_cache_in_database(user_id, avatar_url):
 class BilibiliUser(models.database.OrmBase):
     __tablename__ = 'bilibili_users'
     uid = sqlalchemy.Column(sqlalchemy.Integer, primary_key=True)
-    avatar_url = sqlalchemy.Column(sqlalchemy.Text)
+    avatar_url = sqlalchemy.Column(sqlalchemy.String(100))
     update_time = sqlalchemy.Column(sqlalchemy.DateTime)

update.py

@@ -4,7 +4,7 @@ import asyncio
 
 import aiohttp
 
-VERSION = 'v1.4.5'
+VERSION = 'v1.5.0'
 
 
 def check_update():