From f28fbf7ed38650e463bf2e9ebd573020ab102808 Mon Sep 17 00:00:00 2001 From: John Livingston Date: Thu, 25 Nov 2021 16:56:32 +0100 Subject: [PATCH] New buttons. --- assets/style.scss | 53 +++++---- client/videowatch-client-plugin.ts | 56 +++++++--- client/videowatch/buttons.ts | 92 ++++++++++++++++ public/images/bye.svg | 38 +++---- public/images/new-window.svg | 170 +++++++++++++++++++++++++++++ 5 files changed, 350 insertions(+), 59 deletions(-) create mode 100644 client/videowatch/buttons.ts create mode 100644 public/images/new-window.svg 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + +