diff --git a/assets/style.scss b/assets/style.scss
index 717a681b..d4efe4ec 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -8,39 +8,29 @@
}
.peertube-plugin-livechat-buttons {
+ align-items: center;
display: flex;
- flex-flow: row wrap;
+ flex-flow: row nowrap;
justify-content: flex-end;
}
.peertube-plugin-livechat-button {
- border: 0;
- background-color: var(--mainBackgroundColor);
- margin: 5px;
- height: 36px;
- width: 36px;
- padding: 2px;
-}
+ display: inline;
+ height: 36px !important;
+ line-height: 0 !important; // override .peertube-button-link
+ margin: 5px !important;
+ padding: 2px !important;
-.peertube-plugin-livechat-button-icon {
- background-size: 32px 32px;
- background-repeat: no-repeat;
- background-color: transparent;
- background-position: center center;
- display: inline-block;
- height: 100%;
- width: 100%;
+ svg {
+ display: inline-block !important;
+ height: auto;
+ }
}
.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button {
- margin: 1px;
- height: 18px;
- width: 18px;
- padding: 1px;
-}
-
-.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button-icon {
- background-size: 16px 16px;
+ height: 18px !important;
+ margin: 2px !important;
+ padding: 1px !important;
}
[peertube-plugin-livechat-state="initializing"] {
@@ -55,6 +45,21 @@
display: none;
}
+[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state="open"]) {
+ .peertube-plugin-livechat-multi-button-main {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ .peertube-plugin-livechat-multi-button-secondary {
+ border-top-left-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+ margin-left: 0 !important;
+ border-left: 1px solid currentColor;
+ }
+}
+
#peertube-plugin-livechat-container iframe {
border: 1px solid black;
min-height: 30vh;
diff --git a/client/videowatch-client-plugin.ts b/client/videowatch-client-plugin.ts
index 84d8a1a4..ef888934 100644
--- a/client/videowatch-client-plugin.ts
+++ b/client/videowatch-client-plugin.ts
@@ -1,6 +1,7 @@
import type { ChatType } from 'shared/lib/types'
import { videoHasWebchat } from 'shared/lib/video'
import { AutoColors, isAutoColorsAvailable, areAutoColorsValid } from 'shared/lib/autocolors'
+import { closeSVG, openBlankChatSVG, openChatSVG, SVGButton } from './videowatch/buttons'
interface VideoWatchLoadedHookOptions {
videojs: any
@@ -129,23 +130,34 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
name: string,
label: string,
callback: () => void | boolean,
- icon: string | null
+ icon?: SVGButton,
+ additionalClasses?: string[]
): void {
- const button = document.createElement('button')
+ const button = document.createElement('a')
button.classList.add(
+ 'orange-button', 'peertube-button-link',
'peertube-plugin-livechat-button',
'peertube-plugin-livechat-button-' + name
)
+ if (additionalClasses) {
+ for (let i = 0; i < additionalClasses.length; i++) {
+ button.classList.add(additionalClasses[i])
+ }
+ }
button.onclick = callback
if (icon) {
- // FIXME: remove «as string» when peertube types will be available
- const iconUrl = peertubeHelpers.getBaseStaticRoute() + '/images/' + icon
- const iconEl = document.createElement('span')
- iconEl.classList.add('peertube-plugin-livechat-button-icon')
- iconEl.setAttribute('style',
- 'background-image: url(\'' + iconUrl + '\');'
- )
- button.prepend(iconEl)
+ try {
+ const svg = icon()
+ const tmp = document.createElement('span')
+ tmp.innerHTML = svg.trim()
+ const svgDom = tmp.firstChild
+ if (svgDom) {
+ button.prepend(svgDom)
+ }
+ } catch (err) {
+ logger.error('Failed to generate the ' + name + ' button: ' + (err as string))
+ }
+
button.setAttribute('title', label)
} else {
button.textContent = label
@@ -175,14 +187,26 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
buttonContainer.classList.add('peertube-plugin-livechat-buttons')
container.append(buttonContainer)
- displayButton(buttonContainer, 'open', labelOpen, () => openChat(video), 'talking.svg')
if (showOpenBlank) {
- displayButton(buttonContainer, 'openblank', labelOpenBlank, () => {
- closeChat()
- window.open(iframeUri)
- }, 'talking-new-window.svg')
+ displayButton(
+ buttonContainer, 'open',
+ labelOpen, () => openChat(video),
+ openChatSVG,
+ ['peertube-plugin-livechat-multi-button-main']
+ )
+ displayButton(
+ buttonContainer, 'openblank',
+ labelOpenBlank, () => {
+ closeChat()
+ window.open(iframeUri)
+ },
+ openBlankChatSVG,
+ ['peertube-plugin-livechat-multi-button-secondary']
+ )
+ } else {
+ displayButton(buttonContainer, 'open', labelOpen, () => openChat(video), openChatSVG)
}
- displayButton(buttonContainer, 'close', labelClose, () => closeChat(), 'bye.svg')
+ displayButton(buttonContainer, 'close', labelClose, () => closeChat(), closeSVG)
resolve()
})
diff --git a/client/videowatch/buttons.ts b/client/videowatch/buttons.ts
new file mode 100644
index 00000000..2dcdbc35
--- /dev/null
+++ b/client/videowatch/buttons.ts
@@ -0,0 +1,92 @@
+type SVGButton = () => string
+
+const closeSVG: SVGButton = () => {
+ // This content comes from the file public/image/bye.svg, after svgo cleaning.
+ // To get the formated content, you can do:
+ // xmllint dist/client/images/bye.svg --format
+ // Then replace the main color by «currentColor»
+ return ``
+}
+
+const openChatSVG: SVGButton = () => {
+ // This content comes from the file public/image/talking.svg, after svgo cleaning.
+ // To get the formated content, you can do:
+ // xmllint dist/client/images/talking.svg --format
+ // Note: it was highly simplified in this file.
+ return ``
+}
+
+const openBlankChatSVG: SVGButton = () => {
+ // This content comes from the file public/image/new-window.svg, after svgo cleaning.
+ // To get the formated content, you can do:
+ // xmllint dist/client/images/new-window.svg --format
+ // Then replace the main color by «currentColor»
+ return ``
+}
+
+export {
+ closeSVG,
+ openChatSVG,
+ openBlankChatSVG,
+ SVGButton
+}
diff --git a/public/images/bye.svg b/public/images/bye.svg
index 3ec21c89..6267283d 100644
--- a/public/images/bye.svg
+++ b/public/images/bye.svg
@@ -7,9 +7,9 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="32"
- height="32"
- viewBox="0 0 8.4666664 8.4666669"
+ width="16"
+ height="16"
+ viewBox="0 0 4.2333332 4.2333334"
version="1.1"
id="svg1428"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
@@ -32,9 +32,9 @@
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
- inkscape:window-width="1854"
- inkscape:window-height="1136"
- inkscape:window-x="1920"
+ inkscape:window-width="1851"
+ inkscape:window-height="1016"
+ inkscape:window-x="1680"
inkscape:window-y="27"
inkscape:window-maximized="1"
units="px" />
@@ -46,7 +46,7 @@
image/svg+xml
-
+
@@ -55,22 +55,22 @@
inkscape:groupmode="layer"
id="layer1">
+ ry="0.21348622" />
+ ry="0.21348622" />
diff --git a/public/images/new-window.svg b/public/images/new-window.svg
new file mode 100644
index 00000000..2f6cd2da
--- /dev/null
+++ b/public/images/new-window.svg
@@ -0,0 +1,170 @@
+
+