fix placehodler style, fix chat panel cookieing
This commit is contained in:
Ginger Wong
parent
42a34df63e
commit
66dc2f84c9
@ -1,4 +1,4 @@
|
||||
import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
|
||||
import { h, Component } from 'https://unpkg.com/preact?module';
|
||||
import htm from 'https://unpkg.com/htm?module';
|
||||
const html = htm.bind(h);
|
||||
|
||||
@ -11,6 +11,8 @@ import { OwncastPlayer } from './player.js';
|
||||
|
||||
import {
|
||||
getLocalStorage,
|
||||
setLocalStorage,
|
||||
clearLocalStorage,
|
||||
generateAvatar,
|
||||
generateUsername,
|
||||
URL_OWNCAST,
|
||||
@ -25,7 +27,7 @@ import {
|
||||
MESSAGE_OFFLINE,
|
||||
MESSAGE_ONLINE,
|
||||
} from './utils.js';
|
||||
import { KEY_USERNAME, KEY_AVATAR, } from './utils/chat.js';
|
||||
import { KEY_USERNAME, KEY_AVATAR, KEY_CHAT_DISPLAYED } from './utils/chat.js';
|
||||
|
||||
export default class App extends Component {
|
||||
constructor(props, context) {
|
||||
@ -33,7 +35,7 @@ export default class App extends Component {
|
||||
|
||||
this.state = {
|
||||
websocket: new Websocket(),
|
||||
displayChat: false, // chat panel state
|
||||
displayChat: getLocalStorage(KEY_CHAT_DISPLAYED), // chat panel state
|
||||
chatEnabled: false, // chat input box state
|
||||
username: getLocalStorage(KEY_USERNAME) || generateUsername(),
|
||||
userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
|
||||
@ -274,8 +276,15 @@ export default class App extends Component {
|
||||
|
||||
handleChatPanelToggle() {
|
||||
const { displayChat: curDisplayed } = this.state;
|
||||
|
||||
const displayChat = !curDisplayed;
|
||||
if (displayChat) {
|
||||
setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
|
||||
} else {
|
||||
clearLocalStorage(KEY_CHAT_DISPLAYED);
|
||||
}
|
||||
this.setState({
|
||||
displayChat: !curDisplayed,
|
||||
displayChat,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -239,6 +239,7 @@ export default class ChatInput extends Component {
|
||||
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
|
||||
|
||||
<${ContentEditable}
|
||||
id="message-input"
|
||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
|
||||
|
||||
placeholderText=${placeholderText}
|
||||
|
||||
@ -27,10 +27,10 @@ export default class Message extends Component {
|
||||
>
|
||||
<img src=${avatar} />
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-content text-sm">
|
||||
<p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p>
|
||||
<div
|
||||
class="message-text text-gray-400 font-thin"
|
||||
class="message-text text-gray-300 font-normal"
|
||||
dangerouslySetInnerHTML=${
|
||||
{ __html: formattedMessage }
|
||||
}
|
||||
@ -43,11 +43,13 @@ export default class Message extends Component {
|
||||
return (
|
||||
html`
|
||||
<div class="message flex">
|
||||
<div class="message-content text-sm">
|
||||
<img class="mr-2" src=${image} />
|
||||
<div class="text-white text-center">
|
||||
<span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,8 +15,6 @@ export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAE
|
||||
export const MESSAGE_OFFLINE = 'Stream is offline.';
|
||||
export const MESSAGE_ONLINE = 'Stream is online';
|
||||
|
||||
|
||||
|
||||
export const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer
|
||||
|
||||
export function getLocalStorage(key) {
|
||||
|
||||
@ -9,11 +9,54 @@
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#message-form {
|
||||
/******************************/
|
||||
/******************************/
|
||||
#message-input {
|
||||
height: 5rem;
|
||||
font-size: .85em;
|
||||
}
|
||||
#message-input img {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#message-input .emoji {
|
||||
width: 2.2em;
|
||||
}
|
||||
|
||||
|
||||
/* If the div is empty then show the placeholder */
|
||||
#message-input:empty:before{
|
||||
content: attr(placeholderText);
|
||||
pointer-events: none;
|
||||
display: block; /* For Firefox */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* When chat is enabled (contenteditable=true) */
|
||||
#message-input[contenteditable=true]:before {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
|
||||
/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
|
||||
#message-input:disabled,
|
||||
#message-input[contenteditable=false] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
/******************************/
|
||||
/******************************/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* #message-form {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
|
||||
@ -122,56 +165,5 @@
|
||||
|
||||
|
||||
|
||||
/*
|
||||
The chat input has a fake placeholder that is styled below.
|
||||
It pulls the placeholder text from the div's placeholder attribute.
|
||||
But really it's just the innerHTML content.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#message-body-form {
|
||||
font-size: 1em;
|
||||
height: 60px;
|
||||
}
|
||||
#message-body-form:disabled{
|
||||
opacity: .5;
|
||||
}
|
||||
#message-body-form img {
|
||||
display: inline;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#message-body-form .emoji {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* If the div is empty then show the placeholder */
|
||||
#message-body-form:empty:before{
|
||||
content: attr(placeholder);
|
||||
pointer-events: none;
|
||||
display: block; /* For Firefox */
|
||||
|
||||
/* Style the div's placeholder text color */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* When chat is enabled (contenteditable=true) */
|
||||
#message-body-form[contenteditable=true]:before {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
|
||||
/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
|
||||
#message-body-form[contenteditable=false] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -242,7 +242,6 @@ h2 {
|
||||
}
|
||||
|
||||
.vjs-airplay .vjs-icon-placeholder::before {
|
||||
/* content: 'AP'; */
|
||||
content: url("../img/airplay.png");
|
||||
}
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
--icon-width: 40px;
|
||||
height: var(--icon-width);
|
||||
width: var(--icon-width);
|
||||
background-image: url(../img/social-icons.gif);
|
||||
background-image: url(/img/social-icons.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width));
|
||||
transform: scale(.65);
|
||||
@ -69,105 +69,137 @@
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
EXTRA CUSTOM CONTENT STYLES
|
||||
Assumes markup converted from markdown input.
|
||||
*/
|
||||
|
||||
|
||||
.extra-user-content {
|
||||
#extra-user-content {
|
||||
padding: 1em 3em 3em 3em;
|
||||
}
|
||||
|
||||
.extra-user-content ol {
|
||||
#extra-user-content ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.extra-user-content ul {
|
||||
#extra-user-content ul {
|
||||
list-style: unset;
|
||||
}
|
||||
|
||||
.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4 {
|
||||
#extra-user-content h1,
|
||||
#extra-user-content h2,
|
||||
#extra-user-content h3,
|
||||
#extra-user-content h4 {
|
||||
color: #111111;
|
||||
font-weight: 400; }
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4, .extra-user-content h5, .extra-user-content p {
|
||||
#extra-user-content h1,
|
||||
#extra-user-content h2,
|
||||
#extra-user-content h3,
|
||||
#extra-user-content h4,
|
||||
#extra-user-content h5,
|
||||
#extra-user-content p {
|
||||
margin-bottom: 24px;
|
||||
padding: 0; }
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.extra-user-content h1 {
|
||||
font-size: 48px; }
|
||||
#extra-user-content h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.extra-user-content h2 {
|
||||
#extra-user-content h2 {
|
||||
font-size: 36px;
|
||||
margin: 24px 0 6px; }
|
||||
margin: 24px 0 6px;
|
||||
}
|
||||
|
||||
.extra-user-content h3 {
|
||||
font-size: 24px; }
|
||||
#extra-user-content h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.extra-user-content h4 {
|
||||
font-size: 21px; }
|
||||
#extra-user-content h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.extra-user-content h5 {
|
||||
font-size: 18px; }
|
||||
#extra-user-content h5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.extra-user-content a {
|
||||
#extra-user-content a {
|
||||
color: #0099ff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline; }
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.extra-user-content ul, .extra-user-content ol {
|
||||
#extra-user-content ul, #extra-user-content ol {
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.extra-user-content li {
|
||||
line-height: 24px; }
|
||||
#extra-user-content li {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.extra-user-content li ul, .extra-user-content li ul {
|
||||
#extra-user-content li ul, #extra-user-content li ul {
|
||||
margin-left: 24px; }
|
||||
|
||||
.extra-user-content p, .extra-user-content ul, .extra-user-content ol {
|
||||
#extra-user-content p, #extra-user-content ul, #extra-user-content ol {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.extra-user-content pre {
|
||||
}
|
||||
|
||||
#extra-user-content pre {
|
||||
padding: 0px 24px;
|
||||
max-width: 800px;
|
||||
white-space: pre-wrap; }
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.extra-user-content code {
|
||||
#extra-user-content code {
|
||||
font-family: Consolas, Monaco, Andale Mono, monospace;
|
||||
line-height: 1.5;
|
||||
font-size: 13px; }
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.extra-user-content aside {
|
||||
#extra-user-content aside {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 390px; }
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.extra-user-content blockquote {
|
||||
#extra-user-content blockquote {
|
||||
margin: 1em 2em;
|
||||
max-width: 476px; }
|
||||
max-width: 476px;
|
||||
}
|
||||
|
||||
.extra-user-content blockquote p {
|
||||
#extra-user-content blockquote p {
|
||||
color: #666;
|
||||
max-width: 460px; }
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.extra-user-content hr {
|
||||
#extra-user-content hr {
|
||||
width: 540px;
|
||||
text-align: left;
|
||||
margin: 0 auto 0 0;
|
||||
color: #999; }
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.extra-user-content table {
|
||||
#extra-user-content table {
|
||||
border-collapse: collapse;
|
||||
margin: 1em 1em;
|
||||
border: 1px solid #CCC; }
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.extra-user-content table thead {
|
||||
background-color: #EEE; }
|
||||
#extra-user-content table thead {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.extra-user-content table thead td {
|
||||
color: #666; }
|
||||
#extra-user-content table thead td {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.extra-user-content table td {
|
||||
#extra-user-content table td {
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid #CCC; }
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user