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:title" content="YouTube Chat Designer">
|
||||||
<meta name="twitter:description" content="YouTube Chat CSS design tool for streamer.">
|
<meta name="twitter:description" content="YouTube Chat CSS design tool for streamer.">
|
||||||
<!-- <meta name="twitter:image" content=""> -->
|
<!-- <meta name="twitter:image" content=""> -->
|
||||||
<script type="module" crossorigin src="/assets/index-vbG7qyII.js"></script>
|
<script type="module" crossorigin src="/assets/index-DR9W_gne.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-CyFkm3t3.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-nOkcB8kh.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
</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%;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 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;
|
user-select: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
display: none;
|
display: none;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: white;
|
color: #ffffff90;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
#author-photo {
|
#author-photo {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@ -17,10 +17,10 @@ const PANEL_MAP = new Map<string, StylePanel>();
|
|||||||
|
|
||||||
const $view = $('view');
|
const $view = $('view');
|
||||||
export const $chat = new YouTubeChat().css({backgroundColor: '#131313'})
|
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: 'ひとり', 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: '郁代', 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: 'リョウ', 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: 'Try to send message for test your design.', role: 'Owner'})
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { $Container, $Element } from "fluentx";
|
import { $Container, $Element } from "fluentx";
|
||||||
import { StyleModel } from "./StyleModel";
|
import { StyleModel } from "./StyleModel";
|
||||||
import { ROLE_MODEL_MAP } from "../main";
|
import { ROLE_MODEL_MAP } from "../main";
|
||||||
|
import { AVATAR_FILES } from "../data/avatar";
|
||||||
|
|
||||||
export interface YouTubeMessageData {
|
export interface YouTubeMessageData {
|
||||||
name: string;
|
name: string;
|
||||||
@ -35,7 +36,7 @@ export class YouTubeMessage extends $Container {
|
|||||||
]),
|
]),
|
||||||
this.$hint,
|
this.$hint,
|
||||||
this.$avatar.content([
|
this.$avatar.content([
|
||||||
$('img').src('/avatar.png')
|
$('img').src(`/${this.avatar_url}`)
|
||||||
]),
|
]),
|
||||||
this.$content.content([
|
this.$content.content([
|
||||||
this.$timestamp,
|
this.$timestamp,
|
||||||
@ -98,4 +99,13 @@ export class YouTubeMessage extends $Container {
|
|||||||
display: 'block'
|
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)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||