LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

fix placehodler style, fix chat panel cookieing

Browse Source
This commit is contained in:
Ginger Wong 2020-08-21 15:55:52 -07:00
parent 42a34df63e
commit 66dc2f84c9
7 changed files with 146 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
webroot/js/app2.js
View File

@ -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'; import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h); const html = htm.bind(h);
@ -11,6 +11,8 @@ import { OwncastPlayer } from './player.js';
import { import {
getLocalStorage, getLocalStorage,
setLocalStorage,
clearLocalStorage,
generateAvatar, generateAvatar,
generateUsername, generateUsername,
URL_OWNCAST, URL_OWNCAST,
@ -25,7 +27,7 @@ import {
MESSAGE_OFFLINE, MESSAGE_OFFLINE,
MESSAGE_ONLINE, MESSAGE_ONLINE,
} from './utils.js'; } 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 { export default class App extends Component {
constructor(props, context) { constructor(props, context) {
@ -33,7 +35,7 @@ export default class App extends Component {
this.state = { this.state = {
websocket: new Websocket(), websocket: new Websocket(),
displayChat: false, // chat panel state displayChat: getLocalStorage(KEY_CHAT_DISPLAYED), // chat panel state
chatEnabled: false, // chat input box state chatEnabled: false, // chat input box state
username: getLocalStorage(KEY_USERNAME) || generateUsername(), username: getLocalStorage(KEY_USERNAME) || generateUsername(),
userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`), userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
@ -274,8 +276,15 @@ export default class App extends Component {
handleChatPanelToggle() { handleChatPanelToggle() {
const { displayChat: curDisplayed } = this.state; const { displayChat: curDisplayed } = this.state;
const displayChat = !curDisplayed;
if (displayChat) {
setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
} else {
clearLocalStorage(KEY_CHAT_DISPLAYED);
}
this.setState({ this.setState({
displayChat: !curDisplayed, displayChat,
}); });
} }

1
webroot/js/chat/chat-input.js
View File

@ -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"> <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
<${ContentEditable} <${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" 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} placeholderText=${placeholderText}

12
webroot/js/chat/message.js
View File

@ -27,10 +27,10 @@ export default class Message extends Component {
> >
<img src=${avatar} /> <img src=${avatar} />
</div> </div>
<div class="message-content"> <div class="message-content text-sm">
<p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p> <p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p>
<div <div
class="message-text text-gray-400 font-thin" class="message-text text-gray-300 font-normal"
dangerouslySetInnerHTML=${ dangerouslySetInnerHTML=${
{ __html: formattedMessage } { __html: formattedMessage }
} }
@ -43,9 +43,11 @@ export default class Message extends Component {
return ( return (
html` html`
<div class="message flex"> <div class="message flex">
<img class="mr-2" src=${image} /> <div class="message-content text-sm">
<div class="text-white text-center"> <img class="mr-2" src=${image} />
<span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>. <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>
</div> </div>
`); `);

2
webroot/js/utils.js
View File

@ -15,8 +15,6 @@ export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAE
export const MESSAGE_OFFLINE = 'Stream is offline.'; export const MESSAGE_OFFLINE = 'Stream is offline.';
export const MESSAGE_ONLINE = 'Stream is online'; export const MESSAGE_ONLINE = 'Stream is online';
export const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer export const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer
export function getLocalStorage(key) { export function getLocalStorage(key) {

98
webroot/styles/chat.css
View File

@ -9,11 +9,54 @@
padding: 1em; 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; flex-direction: column;
align-items: flex-end; align-items: flex-end;
margin-bottom: 0; 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;
}

1
webroot/styles/layout.css
View File

@ -242,7 +242,6 @@ h2 {
} }
.vjs-airplay .vjs-icon-placeholder::before { .vjs-airplay .vjs-icon-placeholder::before {
/* content: 'AP'; */
content: url("../img/airplay.png"); content: url("../img/airplay.png");
} }

128
webroot/styles/user-content.css
View File

@ -55,7 +55,7 @@
--icon-width: 40px; --icon-width: 40px;
height: var(--icon-width); height: var(--icon-width);
width: 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-repeat: no-repeat;
background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width)); background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width));
transform: scale(.65); 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; padding: 1em 3em 3em 3em;
} }
.extra-user-content ol { #extra-user-content ol {
list-style: decimal; list-style: decimal;
} }
.extra-user-content ul { #extra-user-content ul {
list-style: unset; 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; 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; margin-bottom: 24px;
padding: 0; } padding: 0;
}
.extra-user-content h1 { #extra-user-content h1 {
font-size: 48px; } font-size: 48px;
}
.extra-user-content h2 { #extra-user-content h2 {
font-size: 36px; font-size: 36px;
margin: 24px 0 6px; } margin: 24px 0 6px;
}
.extra-user-content h3 { #extra-user-content h3 {
font-size: 24px; } font-size: 24px;
}
.extra-user-content h4 { #extra-user-content h4 {
font-size: 21px; } font-size: 21px;
}
.extra-user-content h5 { #extra-user-content h5 {
font-size: 18px; } font-size: 18px;
}
.extra-user-content a { #extra-user-content a {
color: #0099ff; color: #0099ff;
margin: 0; margin: 0;
padding: 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; padding: 0;
margin: 0; } margin: 0;
}
.extra-user-content li { #extra-user-content li {
line-height: 24px; } 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; } 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; font-size: 16px;
line-height: 24px; line-height: 24px;
}
.extra-user-content pre { }
#extra-user-content pre {
padding: 0px 24px; padding: 0px 24px;
max-width: 800px; 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; font-family: Consolas, Monaco, Andale Mono, monospace;
line-height: 1.5; line-height: 1.5;
font-size: 13px; } font-size: 13px;
}
.extra-user-content aside { #extra-user-content aside {
display: block; display: block;
float: right; float: right;
width: 390px; } width: 390px;
}
.extra-user-content blockquote { #extra-user-content blockquote {
margin: 1em 2em; margin: 1em 2em;
max-width: 476px; } max-width: 476px;
}
.extra-user-content blockquote p { #extra-user-content blockquote p {
color: #666; color: #666;
max-width: 460px; } max-width: 460px;
}
.extra-user-content hr { #extra-user-content hr {
width: 540px; width: 540px;
text-align: left; text-align: left;
margin: 0 auto 0 0; margin: 0 auto 0 0;
color: #999; } color: #999;
}
.extra-user-content table { #extra-user-content table {
border-collapse: collapse; border-collapse: collapse;
margin: 1em 1em; margin: 1em 1em;
border: 1px solid #CCC; } border: 1px solid #CCC;
}
.extra-user-content table thead { #extra-user-content table thead {
background-color: #EEE; } background-color: #EEE;
}
.extra-user-content table thead td { #extra-user-content table thead td {
color: #666; } color: #666;
}
.extra-user-content table td { #extra-user-content table td {
padding: 0.5em 1em; padding: 0.5em 1em;
border: 1px solid #CCC; } border: 1px solid #CCC;
}