matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #610 from Chocobozzz/feature/peertube-v7

Browse Source 
Add style compat with peertube v7
This commit is contained in:
John Livingston 2024-12-03 17:06:52 +01:00 committed by GitHub
commit eb50ef5524
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 101 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -19,6 +19,7 @@ If you use the "system Prosody", you should update to Prosody 0.12.4, and Lua 5.
* #516: new option for the moderation bot: forbid duplicate messages.
* #517: new option for the moderation bot: forbid messages with too many special characters.
* #518: moderators can send announcements and highlighted messages.
* #610: compatibility with PeerTube v7
### Minor changes and fixes

48
assets/styles/admin/firewall/_firewall.scss
View File

@ -15,7 +15,7 @@
/* See Peertube sub-menu-h1 mixin */
font-size: 1.3rem;
border-bottom: 2px solid var(--greyBackgroundColor);
border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
padding-bottom: 15px;
}
@ -42,45 +42,49 @@
input[type="submit"],
button[type="submit"] {
// Peertube orange-button mixin
&,
&:active,
&.active,
&:focus {
color: #fff;
background-color: var(--mainColor);
color: var(--on-primary, #fff);
background-color: var(--primary, var(--mainColor));
border: 1px solid var(--primary, var(--mainColor));
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
color: var(--on-primary, #fff);
background-color: var(--primary-400, var(--mainHoverColor));
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
&[disabled] {
pointer-events: none;
opacity: 0.6;
}
}
input[type="reset"],
button[type="reset"] {
// Peertube grey-button mixin
background-color: var(--greyBackgroundColor);
color: var(--greyForegroundColor);
color: var(--fg, var(--mainForegroundColor));
background-color: transparent;
border: 1px solid var(--bg-secondary-500, var(--inputBorderColor)) !important;
&:hover,
&:active,
&.active,
&:focus,
&[disabled],
&.disabled {
color: var(--greyForegroundColor);
background-color: var(--greySecondaryBackgroundColor);
&:focus-visible {
color: var(--fg, var(--mainForegroundColor));
background-color: var(--bg-secondary-500, var(--inputBorderColor));
border-color: var(--bg-secondary-500, var(--inputBorderColor));
}
&[disabled],
&.disabled {
cursor: default;
&:hover {
color: var(--fg, var(--mainForegroundColor));
background-color: var(--bg-secondary-450, var(--inputBorderColor));
}
&[disabled] {
pointer-events: none;
opacity: 0.8;
}
}

22
assets/styles/configuration/_configuration.scss
View File

@ -21,7 +21,7 @@ $small-view: 800px;
/* See Peertube sub-menu-h1 mixin */
font-size: 1.3rem;
border-bottom: 2px solid var(--greyBackgroundColor);
border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
padding-bottom: 15px;
}
@ -29,7 +29,7 @@ $small-view: 800px;
&.peertube-plugin-livechat-configuration-channel {
.peertube-plugin-livechat-configuration-channel-info {
/* stylelint-disable-next-line value-keyword-case */
color: var(--mainForegroundColor);
color: var(--fg, var(--mainForegroundColor));
span:first-child {
/* See Peertube .video-channel-display-name */
@ -48,7 +48,7 @@ $small-view: 800px;
h2 {
// See Peertube settings-big-title mixin
text-transform: uppercase;
color: var(--mainColor);
color: var(--primary, var(--mainColor));
font-weight: variables.$font-bold;
font-size: 1rem;
margin-bottom: 10px;
@ -82,35 +82,35 @@ $small-view: 800px;
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
background-color: var(--primary, var(--mainColor));
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
background-color: var(--fg-400, var(--mainHoverColor));
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
background-color: var(--input-border-color, var(--inputBorderColor));
}
}
input[type="reset"],
button[type="reset"] {
// Peertube grey-button mixin
background-color: var(--greyBackgroundColor);
color: var(--greyForegroundColor);
background-color: var(--bg-secondary-400, var(--greyBackgroundColor));
color: var(--fg-400, var(--greyForegroundColor));
&:hover,
&:active,
&:focus,
&[disabled],
&.disabled {
color: var(--greyForegroundColor);
background-color: var(--greySecondaryBackgroundColor);
color: var(--fg-400, var(--greyForegroundColor));
background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
&[disabled],
@ -178,7 +178,7 @@ $small-view: 800px;
display: flex;
align-items: baseline;
/* stylelint-disable-next-line value-keyword-case */
color: var(--mainForegroundColor);
color: var(--fg, var(--mainForegroundColor));
&:hover,
&:focus,

2
assets/styles/elements/_share-chat.scss
View File

@ -56,7 +56,7 @@ livechat-share-chat {
&.livechat-shareurl-suboptions-disabled {
label {
/* stylelint-disable-next-line custom-property-pattern */
color: var(--greyForegroundColor);
color: var(--fg-400, var(--greyForegroundColor));
}
}
}

4
assets/styles/elements/_spinner.scss
View File

@ -15,9 +15,9 @@ livechat-spinner,
height: 48px;
margin: 20px;
/* stylelint-disable-next-line custom-property-pattern */
border: 5px solid var(--greyBackgroundColor) !important; // !important is required for it to work in ConverseJS
border: 5px solid var(--bg-secondary-400, var(--greyBackgroundColor)) !important; // !important is required for it to work in ConverseJS
/* stylelint-disable-next-line custom-property-pattern */
border-bottom-color: var(--mainColor) !important; // !important is required for it to work in ConverseJS
border-bottom-color: var(--primary, var(--mainColor)) !important; // !important is required for it to work in ConverseJS
border-radius: 50%;
display: inline-block;
box-sizing: border-box;

18
assets/styles/elements/_tags-input.scss
View File

@ -51,14 +51,14 @@ livechat-tags-input {
transition-duration: 0.3s;
@supports (scrollbar-width: auto) {
scrollbar-color: var(--greyForegroundColor) transparent;
scrollbar-color: var(--fg-400, var(--greyForegroundColor)) transparent;
scrollbar-width: thin;
}
}
.livechat-tags-container,
.livechat-tags-searched {
border-bottom: 1px dashed var(--greyForegroundColor);
border-bottom: 1px dashed var(--fg-400, var(--greyForegroundColor));
&.livechat-empty {
height: 0;
@ -104,7 +104,7 @@ livechat-tags-input {
text-align: center;
font-size: 10px;
margin-left: var(--tag-padding-horizontal);
color: var(--mainColor);
color: var(--primary, var(--mainColor));
border-radius: 50%;
background: #fff;
cursor: pointer;
@ -118,19 +118,19 @@ livechat-tags-input {
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
background-color: var(--primary, var(--mainColor));
.livechat-tag-close {
color: var(--mainColor);
color: var(--primary, var(--mainColor));
}
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
background-color: var(--fg-400, var(--mainHoverColor));
.livechat-tag-close {
color: var(--mainHoverColor);
color: var(--fg-400, var(--mainHoverColor));
}
}
@ -138,10 +138,10 @@ livechat-tags-input {
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
background-color: var(--input-border-color, var(--inputBorderColor));
.livechat-tag-close {
color: var(--inputBorderColor);
color: var(--input-border-color, var(--inputBorderColor));
}
}

2
assets/styles/list-rooms/_list-rooms.scss
View File

@ -19,7 +19,7 @@ table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) {
table.peertube-plugin-livechat-prosody-list-rooms th {
/* stylelint-disable-next-line custom-property-pattern */
background-color: var(--mainHoverColor);
background-color: var(--fg-400, var(--mainHoverColor));
border: 1px solid black;
/* stylelint-disable-next-line custom-property-pattern */
color: var(--mainBackgroundColor);

8
assets/styles/mixins/_buttons.scss
View File

@ -54,7 +54,7 @@ $bs-green: #39cc0b;
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
background-color: var(--input-border-color, var(--inputBorderColor));
}
}
@ -67,7 +67,7 @@ $bs-green: #39cc0b;
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
background-color: var(--primary, var(--mainColor));
}
&:focus,
@ -77,13 +77,13 @@ $bs-green: #39cc0b;
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
background-color: var(--fg-400, var(--mainHoverColor));
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
background-color: var(--input-border-color, var(--inputBorderColor));
}
}

4
assets/styles/mixins/tables.scss
View File

@ -13,7 +13,7 @@
text-align: center;
tr {
border: 1px var(--greyBackgroundColor) solid;
border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
}
td,
@ -34,6 +34,6 @@
}
tbody tr:nth-child(odd) {
background-color: var(--greySecondaryBackgroundColor);
background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
}

2
client/admin-plugin-client-plugin.ts
View File

@ -143,7 +143,7 @@ function register (clientOptions: RegisterClientOptions): void {
lastActivityEl.textContent = date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
}
const promoteButton = document.createElement('a')
promoteButton.classList.add('orange-button', 'peertube-button-link')
promoteButton.classList.add('primary-button', 'orange-button', 'peertube-button-link')
promoteButton.style.margin = '5px'
promoteButton.onclick = async () => {
await fetch(

5
client/common/configuration/register.ts
View File

@ -66,15 +66,16 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
for (const link of links) {
if (typeof link !== 'object') { continue }
if (!('key' in link)) { continue }
if (link.key !== 'in-my-library') { continue }
if (link.key === 'in-my-library' || link.key === 'my-video-space') {
myLibraryLinks = link
break
}
}
if (!myLibraryLinks) { return links }
if (!Array.isArray(myLibraryLinks.links)) { return links }
const label = await peertubeHelpers.translate(LOC_MENU_CONFIGURATION_LABEL)
myLibraryLinks.links.push({
myLibraryLinks.links.unshift({
label,
shortLabel: label,
path: '/p/livechat/configuration',

2
client/common/lib/elements/help-button.ts
View File

@ -38,7 +38,7 @@ export class HelpButtonElement extends LivechatElement {
href="${this.url.href}"
target=_blank
title="${this.buttonTitle}"
class="orange-button peertube-button-link"
class="primary-button orange-button peertube-button-link"
>${unsafeHTML(helpButtonSVG())}</a>`
})
}

2
client/common/videowatch/button.ts
View File

@ -27,7 +27,7 @@ type displayButtonOptions = displayButtonOptionsCallback | displayButtonOptionsH
function displayButton (dbo: displayButtonOptions): void {
const button = document.createElement('a')
button.classList.add(
'orange-button', 'peertube-button-link',
'primary-button', 'orange-button', 'peertube-button-link',
'peertube-plugin-livechat-button',
'peertube-plugin-livechat-button-' + dbo.name
)

47
client/utils/colors.ts
View File

@ -24,18 +24,41 @@ function computeAutoColors (): AutoColors | null {
const buttonStyles = window.getComputedStyle(button)
const autocolors: AutoColors = {
mainForeground: styles.getPropertyValue('--mainForegroundColor').trim(),
mainBackground: styles.getPropertyValue('--mainBackgroundColor').trim(),
greyForeground: styles.getPropertyValue('--greyForegroundColor').trim(),
greyBackground: styles.getPropertyValue('--greyBackgroundColor').trim(),
menuForeground: styles.getPropertyValue('--menuForegroundColor').trim(),
menuBackground: styles.getPropertyValue('--menuBackgroundColor').trim(),
inputForeground: styles.getPropertyValue('--inputForegroundColor').trim(),
inputBackground: styles.getPropertyValue('--inputBackgroundColor').trim(),
buttonForeground: buttonStyles.color.trim(),
buttonBackground: styles.getPropertyValue('--mainColor').trim(),
link: styles.getPropertyValue('--mainForegroundColor').trim(),
linkHover: styles.getPropertyValue('--mainForegroundColor').trim()
mainForeground: styles.getPropertyValue('--fg').trim() ||
styles.getPropertyValue('--mainForegroundColor').trim(),
mainBackground: styles.getPropertyValue('--bg').trim() ||
styles.getPropertyValue('--mainBackgroundColor').trim(),
greyForeground: styles.getPropertyValue('--fg-300').trim() ||
styles.getPropertyValue('--greyForegroundColor').trim(),
greyBackground: styles.getPropertyValue('--bg-secondary-300').trim() ||
styles.getPropertyValue('--greyBackgroundColor').trim(),
menuForeground: styles.getPropertyValue('--fg').trim() ||
styles.getPropertyValue('--menuForegroundColor').trim(),
menuBackground: styles.getPropertyValue('--bg-secondary-400').trim() ||
styles.getPropertyValue('--menuBackgroundColor').trim(),
inputForeground: styles.getPropertyValue('--input-fg').trim() ||
styles.getPropertyValue('--inputForegroundColor').trim(),
inputBackground: styles.getPropertyValue('--input-bg').trim() ||
styles.getPropertyValue('--inputBackgroundColor').trim(),
buttonForeground: styles.getPropertyValue('--on-primary').trim() ||
buttonStyles.color.trim(),
buttonBackground: styles.getPropertyValue('--primary').trim() ||
styles.getPropertyValue('--mainColor').trim(),
link: styles.getPropertyValue('--fg').trim() ||
styles.getPropertyValue('--mainForegroundColor').trim(),
linkHover: styles.getPropertyValue('--fg-400').trim() ||
styles.getPropertyValue('--mainForegroundColor').trim()
}
const autoColorsTest = areAutoColorsValid(autocolors)
if (autoColorsTest !== true) {

2
conversejs/custom/shared/styles/livechat.scss
View File

@ -22,7 +22,7 @@ body.livechat-iframe {
}
#conversejs .livechat-mini-muc-bar-buttons {
a.orange-button {
a.primary-button {
// force these colors...
color: var(--peertube-button-foreground);
background-color: var(--peertube-button-background);