v1.0.4
update: - message preview avatar changes - default style changes
BIN
docs/avatar.png
|
Before Width: | Height: | Size: 126 KiB |
BIN
docs/bocchi_1.png
Normal file
|
After Width: | Height: | Size: 121 KiB |
BIN
docs/bocchi_2.png
Normal file
|
After Width: | Height: | Size: 87 KiB |
@ -20,8 +20,8 @@
|
||||
<meta name="twitter:title" content="YouTube Chat Designer">
|
||||
<meta name="twitter:description" content="YouTube Chat CSS design tool for streamer.">
|
||||
<!-- <meta name="twitter:image" content=""> -->
|
||||
<script type="module" crossorigin src="/assets/index-vbG7qyII.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CyFkm3t3.css">
|
||||
<script type="module" crossorigin src="/assets/index-DR9W_gne.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-nOkcB8kh.css">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
||||
BIN
docs/kita_1.png
Normal file
|
After Width: | Height: | Size: 122 KiB |
BIN
docs/kita_2.png
Normal file
|
After Width: | Height: | Size: 105 KiB |
BIN
docs/nijika_1.png
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
docs/nijika_2.png
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
docs/ryo_1.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
docs/ryo_2.png
Normal file
|
After Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 126 KiB |
BIN
public/bocchi_1.png
Normal file
|
After Width: | Height: | Size: 121 KiB |
BIN
public/bocchi_2.png
Normal file
|
After Width: | Height: | Size: 87 KiB |
BIN
public/kita_1.png
Normal file
|
After Width: | Height: | Size: 122 KiB |
BIN
public/kita_2.png
Normal file
|
After Width: | Height: | Size: 105 KiB |
BIN
public/nijika_1.png
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
public/nijika_2.png
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
public/ryo_1.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
public/ryo_2.png
Normal file
|
After Width: | Height: | Size: 122 KiB |
6
src/data/avatar.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export const AVATAR_FILES = {
|
||||
bocchi: ['bocchi_1.png', 'bocchi_2.png'],
|
||||
kita: ['kita_1.png', 'kita_2.png'],
|
||||
nijika: ['nijika_1.png', 'nijika_2.png'],
|
||||
ryo: ['ryo_1.png', 'ryo_2.png'],
|
||||
}
|
||||
@ -369,15 +369,17 @@ yt-live-chat-text-message-renderer {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
|
||||
background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 100%);
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
color: white;
|
||||
color: #ffffff90;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
#author-photo {
|
||||
overflow: hidden;
|
||||
|
||||
@ -17,10 +17,10 @@ const PANEL_MAP = new Map<string, StylePanel>();
|
||||
|
||||
const $view = $('view');
|
||||
export const $chat = new YouTubeChat().css({backgroundColor: '#131313'})
|
||||
.send({name: 'Normal User', message: 'Hover mouse on the message will show the author role info.', role: 'Normal'})
|
||||
.send({name: 'Member User', message: 'Shift + Left Click on Role list to select multiple role, edit selected role settings in once.', role: 'Member'})
|
||||
.send({name: 'Moderator User', message: 'If you want to save your settings, using Copy JSON and save it, you can paste the JSON to recovery your settings.', role: 'Moderator'})
|
||||
.send({name: 'Owner User', message: 'Try to send message for test your design.', role: 'Owner'})
|
||||
.send({name: 'ひとり', message: 'Hover mouse on the message will show the author role info.', role: 'Normal'})
|
||||
.send({name: '郁代', message: 'Shift + Left Click on Role list to select multiple role, edit selected role settings in once.', role: 'Member'})
|
||||
.send({name: 'リョウ', message: 'If you want to save your settings, using Copy JSON and save it, you can paste the JSON to recovery your settings.', role: 'Moderator'})
|
||||
.send({name: '虹夏', message: 'Try to send message for test your design.', role: 'Owner'})
|
||||
|
||||
init();
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { $Container, $Element } from "fluentx";
|
||||
import { StyleModel } from "./StyleModel";
|
||||
import { ROLE_MODEL_MAP } from "../main";
|
||||
import { AVATAR_FILES } from "../data/avatar";
|
||||
|
||||
export interface YouTubeMessageData {
|
||||
name: string;
|
||||
@ -35,7 +36,7 @@ export class YouTubeMessage extends $Container {
|
||||
]),
|
||||
this.$hint,
|
||||
this.$avatar.content([
|
||||
$('img').src('/avatar.png')
|
||||
$('img').src(`/${this.avatar_url}`)
|
||||
]),
|
||||
this.$content.content([
|
||||
this.$timestamp,
|
||||
@ -98,4 +99,13 @@ export class YouTubeMessage extends $Container {
|
||||
display: 'block'
|
||||
})
|
||||
}
|
||||
|
||||
private get avatar_url() {
|
||||
const array = this.data.role === 'Normal' ? AVATAR_FILES.bocchi
|
||||
: this.data.role === 'Member' ? AVATAR_FILES.kita
|
||||
: this.data.role === 'Moderator' ? AVATAR_FILES.ryo
|
||||
: AVATAR_FILES.nijika;
|
||||
|
||||
return array[Math.floor(Math.random() * array.length)]
|
||||
}
|
||||
}
|
||||