defaultkavy/ytcd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.3

Browse Source 
fix: export css background set to transparent
fix: export css scrollbar set to none display
fix: export css hide poll panel
add: github link and author page link
opt: set minimum screen width is 700px
This commit is contained in:
defaultkavy 2024-03-31 12:31:16 +08:00
parent c025b36505
commit 4a45e0d06d
10 changed files with 151 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/assets/index-B1D6x7ti.css
View File

File diff suppressed because one or more lines are too long

49
docs/assets/index-CXgAKFE7.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/index-CyFkm3t3.css Normal file
View File

File diff suppressed because one or more lines are too long

58
docs/assets/index-vbG7qyII.js Normal file
View File

File diff suppressed because one or more lines are too long

5
docs/index.html
View File

@ -20,10 +20,9 @@
<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-CXgAKFE7.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B1D6x7ti.css">
<script type="module" crossorigin src="/assets/index-vbG7qyII.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CyFkm3t3.css">
</head>
<body>
<div id="app"></div>
</body>
</html>

1
index.html
View File

@ -23,7 +23,6 @@
<!-- <meta name="twitter:image" content=""> -->
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

4
src/config.ts
View File

@ -1,3 +1,5 @@
export const config = {
version: 'v1.0.2'
version: 'v1.0.3',
github_homepage: 'https://github.com/defaultkavy/youtube-chat-designer',
author_link: 'https://x.com/defaultkavy'
}

13
src/data/ytchat.ts
View File

@ -1,13 +1,22 @@
export const ytchat_css = `yt-live-chat-renderer yt-live-chat-header-renderer,
yt-live-chat-renderer yt-live-chat-ticker-renderer,
yt-live-chat-renderer yt-live-chat-message-input-renderer,
yt-live-chat-renderer yt-reaction-control-panel-overlay-view-model,
yt-live-chat-renderer #reaction-control-panel-overlay,
yt-live-chat-renderer #action-panel,
yt-live-chat-renderer #inline-toast-container,
yt-live-chat-renderer #panel-pages,
yt-live-chat-renderer #promo,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-banner-manager,
yt-live-chat-docked-message {
display: none !important;
}
#item-scroller {
overflow: hidden !important;
}
html, body, yt-live-chat-app, yt-live-chat-renderer {
background: #00000000 !important;
}
yt-live-chat-text-message-renderer {
position: relative;
overflow: hidden;

38
src/index.scss
View File

@ -1,4 +1,7 @@
@import './component/$InputComponent';
$min_width: 1200px;
$view_width: 1200px;
:root {
--background-color: #131313;
--font-family : system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@ -8,10 +11,10 @@ body {
justify-content: center;
font-family: var(--font-family);
overflow-y: scroll;
overflow-x: hidden;
background-color: var(--background-color);
color: #ffffff;
font-size: 14px;
}
html {
@ -71,13 +74,24 @@ app {
width: 100%;
h1 {
span {
span, a {
font-size: 14px;
color: #ffffff90;
font-weight: 100;
letter-spacing: 0.1rem;
margin-left: 10px;
}
a {
background-color: #ffffff10;
padding: 0.1rem 0.3rem;
border-radius: 4px;
text-decoration: none;
&:hover {
background-color: #ffffff20;
color: white;
}
}
}
label, button {
@ -88,10 +102,20 @@ app {
display: flex;
gap: 1rem;
@media (max-width: $view_width) {
flex-direction: column;
justify-content: center;
padding-bottom: 50vh;
}
.console {
width: 100%;
max-width: 60%;
@media (max-width: $view_width) {
max-width: 100%;
}
.menu {
display: flex;
flex-direction: column;
@ -246,6 +270,16 @@ app {
display: flex;
flex-direction: column;
@media (max-width: $view_width) {
left: 0;
top: 50vh;
height: 50vh;
width: 100%;
padding: 0;
border:none;
background-color: var(--background-color);
}
header {
margin-block: 0.6rem;
display: flex;

64
src/main.ts
View File

@ -18,33 +18,19 @@ 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: 'You can use Shift + Left Click on Role list to select multiple role!', role: 'Member'})
.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'})
init();
function init(data = defaultStyle) {
ROLE_MODEL_MAP.clear();
for (const role of ROLE_LIST) {
const STYLE_MAP = new Map<string, StyleModel>()
ROLE_MODEL_MAP.set(role, STYLE_MAP);
for (const element of ELEMENT_LIST) {
const model = new StyleModel(data[role][element]);
STYLE_MAP.set(element, model)
$chat.updateStyle(element, model, [role])
}
}
$view.deleteAllView().clear();
for (const element of ELEMENT_LIST) {
const $panel = new StylePanel(element, IS_TEXT_ELEMENT.includes(element) ? 'text' : IS_IMAGE_ELEMENT.includes(element) ? 'image' : 'element');
PANEL_MAP.set(element, $panel)
$view.setView(element, $panel)
}
}
$('app').content([
$('h1').content(['YouTube Chat Designer', $('span').content(config.version)]),
const $app = $('app').content([
$('h1').content([
'YouTube Chat Designer',
$('span').content(config.version),
$('a').content('GitHub').href(config.github_homepage).target('_blank'),
$('a').content('@defaultkavy').href(config.author_link).target('_blank'),
]),
$('div').class('content').content([
$('div').class('console').content([
$('div').class('menu').content([
@ -186,10 +172,30 @@ $('app').content([
])
])
])
]).self($app => document.body.append($app.dom))
])
$(document.body).content($app)
load();
window.addEventListener('resize', () => checkWindowSize())
function init(data = defaultStyle) {
ROLE_MODEL_MAP.clear();
for (const role of ROLE_LIST) {
const STYLE_MAP = new Map<string, StyleModel>()
ROLE_MODEL_MAP.set(role, STYLE_MAP);
for (const element of ELEMENT_LIST) {
const model = new StyleModel(data[role][element]);
STYLE_MAP.set(element, model)
$chat.updateStyle(element, model, [role])
}
}
$view.deleteAllView().clear();
for (const element of ELEMENT_LIST) {
const $panel = new StylePanel(element, IS_TEXT_ELEMENT.includes(element) ? 'text' : IS_IMAGE_ELEMENT.includes(element) ? 'image' : 'element');
PANEL_MAP.set(element, $panel)
$view.setView(element, $panel)
}
}
exportCSS();
function load() {
$view.switchView('Message');
$<$Input>('::.role-checkbox')?.forEach($input => $input.checked(false));
@ -250,4 +256,14 @@ function exportJson() {
json[role] = element_json;
}
return json;
}
function checkWindowSize() {
if (innerWidth < 700) {
$(document.body).content($('div').content([
`Please use a screen with a width greeter than 700px. Current width: ${innerWidth}px`
]))
} else {
if (!$app.inDOM()) $(document.body).content($app);
}
}