New buttons.
This commit is contained in:
John Livingston
parent
6dbb6286e3
commit
f28fbf7ed3
@ -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;
|
||||
|
||||
@ -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()
|
||||
})
|
||||
|
||||
92
client/videowatch/buttons.ts
Normal file
92
client/videowatch/buttons.ts
Normal file
@ -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 `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
|
||||
<rect
|
||||
style="
|
||||
fill:currentColor;
|
||||
stroke:currentColor;stroke-width:.529167;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1
|
||||
"
|
||||
width="4.223" height=".427" x=".882" y="-.213" transform="rotate(45)" ry=".213"
|
||||
/>
|
||||
<rect
|
||||
style="
|
||||
fill:currentColor;
|
||||
stroke:currentColor;stroke-width:.529167;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1
|
||||
"
|
||||
width="4.223" height=".427" x="-2.112" y="2.78" transform="scale(-1 1) rotate(45)" ry=".213"
|
||||
/>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
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 `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467">
|
||||
<path style="fill:transparent;stroke-width:.187325" d="M.838.848h2.643v1.861H.838zM4.896 4.38h2.451v.875H4.896z"/>
|
||||
<path
|
||||
d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2ZM9 11H7V9h2zm4 0h-2V9h2zm4 0h-2V9h2z"
|
||||
style="fill:currentColor;" transform="matrix(-.18741 0 0 .18741 8.493 3.004)"
|
||||
/>
|
||||
<path
|
||||
d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2ZM6 9h12v2H6Zm8 5H6v-2h8zm4-6H6V6h12z"
|
||||
style="fill:currentColor;" transform="scale(.18741)"
|
||||
/>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
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 `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
|
||||
<g
|
||||
transform="matrix(.45208 0 0 .45208 -.526 1.335)"
|
||||
style="stroke-width:1.00021;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
>
|
||||
<path
|
||||
style="
|
||||
opacity:.998;fill:none;fill-opacity:1;
|
||||
stroke:currentColor;stroke-width:1.17052322;stroke-miterlimit:4;
|
||||
stroke-dasharray:none;stroke-opacity:1
|
||||
"
|
||||
d="
|
||||
m8.674.744.012 1.266v2.199a.94.94 0 0 1-.943.942H3.345a.94.94
|
||||
0 0 1-.942-.942V-.19a.94.94 0 0 1 .942-.943h2.2l1.255.016
|
||||
"
|
||||
/>
|
||||
<rect
|
||||
style="
|
||||
opacity:.998;fill:currentColor;fill-opacity:1;
|
||||
stroke:currentColor;stroke-width:1.17223459;stroke-miterlimit:4;
|
||||
stroke-dasharray:none;stroke-opacity:1
|
||||
"
|
||||
width="5.632" height=".569"
|
||||
x="-6.185" y="4.854" transform="scale(-1.03747 .96108) rotate(45)" ry=".285"
|
||||
/>
|
||||
<path
|
||||
style="
|
||||
opacity:.998;fill:currentColor;fill-opacity:1;
|
||||
stroke:currentColor;stroke-width:1.30528;stroke-miterlimit:4;
|
||||
stroke-dasharray:none;stroke-opacity:1
|
||||
"
|
||||
d="m5.15.374 1.091-1.89L7.333.373Z"
|
||||
transform="scale(.89676) rotate(45 9.536 3.618)"
|
||||
/>
|
||||
</g>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export {
|
||||
closeSVG,
|
||||
openChatSVG,
|
||||
openBlankChatSVG,
|
||||
SVGButton
|
||||
}
|
||||
@ -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 @@
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
@ -55,22 +55,22 @@
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
style="fill:#7d7d7d;stroke:none;stroke-width:0.222527"
|
||||
style="fill:#7d7d7d;stroke:#7d7d7d;stroke-width:0.529167;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1026"
|
||||
width="8.3277063"
|
||||
height="0.84192604"
|
||||
x="1.8229842"
|
||||
y="-0.42096302"
|
||||
width="4.2232938"
|
||||
height="0.42697245"
|
||||
x="0.8817718"
|
||||
y="-0.21348622"
|
||||
transform="rotate(45)"
|
||||
ry="0.42096302" />
|
||||
ry="0.21348622" />
|
||||
<rect
|
||||
style="fill:#7d7d7d;stroke:none;stroke-width:0.222527"
|
||||
style="fill:#7d7d7d;stroke:#7d7d7d;stroke-width:0.529167;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1026-3"
|
||||
width="8.3277063"
|
||||
height="0.84192604"
|
||||
x="-4.1638532"
|
||||
y="5.5658746"
|
||||
width="4.2232938"
|
||||
height="0.42697245"
|
||||
x="-2.1116469"
|
||||
y="2.7799325"
|
||||
transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,0,0)"
|
||||
ry="0.42096302" />
|
||||
ry="0.21348622" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.3 KiB |
170
public/images/new-window.svg
Normal file
170
public/images/new-window.svg
Normal file
@ -0,0 +1,170 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
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="16"
|
||||
height="16"
|
||||
viewBox="0 0 4.2333332 4.2333334"
|
||||
version="1.1"
|
||||
id="svg1428"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||
sodipodi:docname="new-window.svg"
|
||||
inkscape:export-xdpi="9.6000004"
|
||||
inkscape:export-ydpi="9.6000004">
|
||||
<defs
|
||||
id="defs1422">
|
||||
<linearGradient
|
||||
id="linearGradient5158"
|
||||
osb:paint="solid">
|
||||
<stop
|
||||
style="stop-color:#7d7d7d;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop5156" />
|
||||
</linearGradient>
|
||||
<filter
|
||||
style="color-interpolation-filters:sRGB"
|
||||
inkscape:label="Drop Shadow"
|
||||
id="filter1150">
|
||||
<feFlood
|
||||
flood-opacity="1"
|
||||
flood-color="rgb(0,0,0)"
|
||||
result="flood"
|
||||
id="feFlood1140" />
|
||||
<feComposite
|
||||
in="flood"
|
||||
in2="SourceGraphic"
|
||||
operator="in"
|
||||
result="composite1"
|
||||
id="feComposite1142" />
|
||||
<feGaussianBlur
|
||||
in="composite1"
|
||||
stdDeviation="0.2"
|
||||
result="blur"
|
||||
id="feGaussianBlur1144" />
|
||||
<feOffset
|
||||
dx="0"
|
||||
dy="0"
|
||||
result="offset"
|
||||
id="feOffset1146" />
|
||||
<feComposite
|
||||
in="SourceGraphic"
|
||||
in2="offset"
|
||||
operator="over"
|
||||
result="composite2"
|
||||
id="feComposite1148" />
|
||||
</filter>
|
||||
<filter
|
||||
style="color-interpolation-filters:sRGB"
|
||||
inkscape:label="Drop Shadow"
|
||||
id="filter1174">
|
||||
<feFlood
|
||||
flood-opacity="1"
|
||||
flood-color="rgb(0,0,0)"
|
||||
result="flood"
|
||||
id="feFlood1164" />
|
||||
<feComposite
|
||||
in="flood"
|
||||
in2="SourceGraphic"
|
||||
operator="in"
|
||||
result="composite1"
|
||||
id="feComposite1166" />
|
||||
<feGaussianBlur
|
||||
in="composite1"
|
||||
stdDeviation="0.2"
|
||||
result="blur"
|
||||
id="feGaussianBlur1168" />
|
||||
<feOffset
|
||||
dx="0"
|
||||
dy="0"
|
||||
result="offset"
|
||||
id="feOffset1170" />
|
||||
<feComposite
|
||||
in="SourceGraphic"
|
||||
in2="offset"
|
||||
operator="over"
|
||||
result="composite2"
|
||||
id="feComposite1172" />
|
||||
</filter>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="32"
|
||||
inkscape:cx="5.5281472"
|
||||
inkscape:cy="9.1445425"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="g1910"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1851"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="1680"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1"
|
||||
units="px"
|
||||
showguides="true" />
|
||||
<metadata
|
||||
id="metadata1425">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g1910"
|
||||
transform="matrix(0.45207703,0,0,0.45207703,-0.52645128,1.334609)"
|
||||
style="stroke-width:1.00021;stroke-miterlimit:4;stroke-dasharray:none">
|
||||
<path
|
||||
id="rect1876-6"
|
||||
style="opacity:0.998;fill:none;fill-opacity:1;stroke:#deddda;stroke-width:1.17052322;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 8.6744377,0.74387579 0.011098,1.26572141 v 2.1990882 c 0,0.5219815 -0.4202233,0.9422049 -0.9422049,0.9422049 h -4.398176 c -0.5219815,0 -0.9422049,-0.4202234 -0.9422049,-0.9422049 v -4.39817633 c 0,-0.52198151 0.4202234,-0.94220487 0.9422049,-0.94220487 h 2.1990881 l 1.2555977,0.015541"
|
||||
sodipodi:nodetypes="ccsssssscc" />
|
||||
<rect
|
||||
style="opacity:0.998;fill:#deddda;fill-opacity:1;stroke:#deddda;stroke-width:1.17223459;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1026-3"
|
||||
width="5.631897"
|
||||
height="0.56938142"
|
||||
x="-6.1849728"
|
||||
y="4.8536396"
|
||||
transform="matrix(-0.73359868,0.67958294,0.73359868,0.67958294,0,0)"
|
||||
ry="0.28469071" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="opacity:0.998;fill:#deddda;fill-opacity:1;stroke:#deddda;stroke-width:1.30528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path900"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="6.2412953"
|
||||
sodipodi:cy="-0.25623792"
|
||||
sodipodi:r1="1.2604131"
|
||||
sodipodi:r2="0.63020653"
|
||||
sodipodi:arg1="2.6179939"
|
||||
sodipodi:arg2="3.6651914"
|
||||
inkscape:flatsided="true"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 5.1497456,0.37396858 6.2412954,-1.516651 7.332845,0.37396863 Z"
|
||||
inkscape:transform-center-y="0.14627048"
|
||||
transform="matrix(0.63410699,0.63410699,-0.63410699,0.63410699,4.7986077,-5.0963298)"
|
||||
inkscape:transform-center-x="0.14627047" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
Loading…
x
Reference in New Issue
Block a user