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

Add style compat with peertube v7

Browse Source
This commit is contained in:
Chocobozzz 2024-11-28 10:01:49 +01:00
parent 2e011a8022
commit 577eec6fa4
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
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. * #516: new option for the moderation bot: forbid duplicate messages.
* #517: new option for the moderation bot: forbid messages with too many special characters. * #517: new option for the moderation bot: forbid messages with too many special characters.
* #518: moderators can send announcements and highlighted messages. * #518: moderators can send announcements and highlighted messages.
* #610: compatibility with PeerTube v7
### Minor changes and fixes ### Minor changes and fixes

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

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

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

@ -56,7 +56,7 @@ livechat-share-chat {
&.livechat-shareurl-suboptions-disabled { &.livechat-shareurl-suboptions-disabled {
label { label {
/* stylelint-disable-next-line custom-property-pattern */ /* 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; height: 48px;
margin: 20px; margin: 20px;
/* stylelint-disable-next-line custom-property-pattern */ /* 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 */ /* 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%; border-radius: 50%;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;

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

@ -51,14 +51,14 @@ livechat-tags-input {
transition-duration: 0.3s; transition-duration: 0.3s;
@supports (scrollbar-width: auto) { @supports (scrollbar-width: auto) {
scrollbar-color: var(--greyForegroundColor) transparent; scrollbar-color: var(--fg-400, var(--greyForegroundColor)) transparent;
scrollbar-width: thin; scrollbar-width: thin;
} }
} }
.livechat-tags-container, .livechat-tags-container,
.livechat-tags-searched { .livechat-tags-searched {
border-bottom: 1px dashed var(--greyForegroundColor); border-bottom: 1px dashed var(--fg-400, var(--greyForegroundColor));
&.livechat-empty { &.livechat-empty {
height: 0; height: 0;
@ -104,7 +104,7 @@ livechat-tags-input {
text-align: center; text-align: center;
font-size: 10px; font-size: 10px;
margin-left: var(--tag-padding-horizontal); margin-left: var(--tag-padding-horizontal);
color: var(--mainColor); color: var(--primary, var(--mainColor));
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
cursor: pointer; cursor: pointer;
@ -118,19 +118,19 @@ livechat-tags-input {
&:active, &:active,
&:focus { &:focus {
color: #fff; color: #fff;
background-color: var(--mainColor); background-color: var(--primary, var(--mainColor));
.livechat-tag-close { .livechat-tag-close {
color: var(--mainColor); color: var(--primary, var(--mainColor));
} }
} }
&:hover { &:hover {
color: #fff; color: #fff;
background-color: var(--mainHoverColor); background-color: var(--fg-400, var(--mainHoverColor));
.livechat-tag-close { .livechat-tag-close {
color: var(--mainHoverColor); color: var(--fg-400, var(--mainHoverColor));
} }
} }
@ -138,10 +138,10 @@ livechat-tags-input {
&.disabled { &.disabled {
cursor: default; cursor: default;
color: #fff; color: #fff;
background-color: var(--inputBorderColor); background-color: var(--input-border-color, var(--inputBorderColor));
.livechat-tag-close { .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 { table.peertube-plugin-livechat-prosody-list-rooms th {
/* stylelint-disable-next-line custom-property-pattern */ /* stylelint-disable-next-line custom-property-pattern */
background-color: var(--mainHoverColor); background-color: var(--fg-400, var(--mainHoverColor));
border: 1px solid black; border: 1px solid black;
/* stylelint-disable-next-line custom-property-pattern */ /* stylelint-disable-next-line custom-property-pattern */
color: var(--mainBackgroundColor); color: var(--mainBackgroundColor);

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

@ -54,7 +54,7 @@ $bs-green: #39cc0b;
&.disabled { &.disabled {
cursor: default; cursor: default;
color: #fff; color: #fff;
background-color: var(--inputBorderColor); background-color: var(--input-border-color, var(--inputBorderColor));
} }
} }
@ -67,7 +67,7 @@ $bs-green: #39cc0b;
&:active, &:active,
&:focus { &:focus {
color: #fff; color: #fff;
background-color: var(--mainColor); background-color: var(--primary, var(--mainColor));
} }
&:focus, &:focus,
@ -77,13 +77,13 @@ $bs-green: #39cc0b;
&:hover { &:hover {
color: #fff; color: #fff;
background-color: var(--mainHoverColor); background-color: var(--fg-400, var(--mainHoverColor));
} }
&[disabled], &[disabled],
&.disabled { &.disabled {
cursor: default; cursor: default;
color: #fff; 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; text-align: center;
tr { tr {
border: 1px var(--greyBackgroundColor) solid; border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
} }
td, td,
@ -34,6 +34,6 @@
} }
tbody tr:nth-child(odd) { 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() lastActivityEl.textContent = date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
} }
const promoteButton = document.createElement('a') 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.style.margin = '5px'
promoteButton.onclick = async () => { promoteButton.onclick = async () => {
await fetch( await fetch(

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

@ -66,15 +66,16 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
for (const link of links) { for (const link of links) {
if (typeof link !== 'object') { continue } if (typeof link !== 'object') { continue }
if (!('key' in link)) { 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 myLibraryLinks = link
break break
}
} }
if (!myLibraryLinks) { return links } if (!myLibraryLinks) { return links }
if (!Array.isArray(myLibraryLinks.links)) { return links } if (!Array.isArray(myLibraryLinks.links)) { return links }
const label = await peertubeHelpers.translate(LOC_MENU_CONFIGURATION_LABEL) const label = await peertubeHelpers.translate(LOC_MENU_CONFIGURATION_LABEL)
myLibraryLinks.links.push({ myLibraryLinks.links.unshift({
label, label,
shortLabel: label, shortLabel: label,
path: '/p/livechat/configuration', 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}" href="${this.url.href}"
target=_blank target=_blank
title="${this.buttonTitle}" title="${this.buttonTitle}"
class="orange-button peertube-button-link" class="primary-button orange-button peertube-button-link"
>${unsafeHTML(helpButtonSVG())}</a>` >${unsafeHTML(helpButtonSVG())}</a>`
}) })
} }

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

@ -27,7 +27,7 @@ type displayButtonOptions = displayButtonOptionsCallback | displayButtonOptionsH
function displayButton (dbo: displayButtonOptions): void { function displayButton (dbo: displayButtonOptions): void {
const button = document.createElement('a') const button = document.createElement('a')
button.classList.add( button.classList.add(
'orange-button', 'peertube-button-link', 'primary-button', 'orange-button', 'peertube-button-link',
'peertube-plugin-livechat-button', 'peertube-plugin-livechat-button',
'peertube-plugin-livechat-button-' + dbo.name '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 buttonStyles = window.getComputedStyle(button)
const autocolors: AutoColors = { const autocolors: AutoColors = {
mainForeground: styles.getPropertyValue('--mainForegroundColor').trim(), mainForeground: styles.getPropertyValue('--fg').trim() ||
mainBackground: styles.getPropertyValue('--mainBackgroundColor').trim(), styles.getPropertyValue('--mainForegroundColor').trim(),
greyForeground: styles.getPropertyValue('--greyForegroundColor').trim(),
greyBackground: styles.getPropertyValue('--greyBackgroundColor').trim(), mainBackground: styles.getPropertyValue('--bg').trim() ||
menuForeground: styles.getPropertyValue('--menuForegroundColor').trim(), styles.getPropertyValue('--mainBackgroundColor').trim(),
menuBackground: styles.getPropertyValue('--menuBackgroundColor').trim(),
inputForeground: styles.getPropertyValue('--inputForegroundColor').trim(), greyForeground: styles.getPropertyValue('--fg-300').trim() ||
inputBackground: styles.getPropertyValue('--inputBackgroundColor').trim(), styles.getPropertyValue('--greyForegroundColor').trim(),
buttonForeground: buttonStyles.color.trim(),
buttonBackground: styles.getPropertyValue('--mainColor').trim(), greyBackground: styles.getPropertyValue('--bg-secondary-300').trim() ||
link: styles.getPropertyValue('--mainForegroundColor').trim(), styles.getPropertyValue('--greyBackgroundColor').trim(),
linkHover: styles.getPropertyValue('--mainForegroundColor').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) const autoColorsTest = areAutoColorsValid(autocolors)
if (autoColorsTest !== true) { 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 { #conversejs .livechat-mini-muc-bar-buttons {
a.orange-button { a.primary-button {
// force these colors... // force these colors...
color: var(--peertube-button-foreground); color: var(--peertube-button-foreground);
background-color: var(--peertube-button-background); background-color: var(--peertube-button-background);