matty
/
peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
peertube-plugin-livechat/client/videowatch/buttons.ts

142 lines
6.3 KiB
TypeScript
Raw Normal View History

Adding SPDX headers (WIP)
2024-05-23 09:42:14 +00:00
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
//
// SPDX-License-Identifier: AGPL-3.0-only
Share chat url Modal for video owner (and instance's moderators) that allows to generate a link to the chat. So you can - for example - obtain the url to use for OBS integration. WIP
2021-12-14 14:41:34 +00:00
/* eslint-disable max-len */
New buttons.
2021-11-25 15:56:32 +00:00
type SVGButton = () => string
const closeSVG: SVGButton = () => {
Moving `public` directory away: Moving `public/images` dir to `assets/images`, because it conflicts with gitlab CI/CD for documentation. Moving `assets/styles.css` to `assets/styles/styles.css`. Related to #117.
2023-02-14 09:19:55 +00:00
// This content comes from the file assets/images/bye.svg, after svgo cleaning.
New buttons.
2021-11-25 15:56:32 +00:00
// 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 = () => {
Moving `public` directory away: Moving `public/images` dir to `assets/images`, because it conflicts with gitlab CI/CD for documentation. Moving `assets/styles.css` to `assets/styles/styles.css`. Related to #117.
2023-02-14 09:19:55 +00:00
// This content comes from the file assets/images/talking.svg, after svgo cleaning.
New buttons.
2021-11-25 15:56:32 +00:00
// 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 = () => {
Moving `public` directory away: Moving `public/images` dir to `assets/images`, because it conflicts with gitlab CI/CD for documentation. Moving `assets/styles.css` to `assets/styles/styles.css`. Related to #117.
2023-02-14 09:19:55 +00:00
// This content comes from the file assets/images/new-window.svg, after svgo cleaning.
New buttons.
2021-11-25 15:56:32 +00:00
// 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>`
}
Share chat url Modal for video owner (and instance's moderators) that allows to generate a link to the chat. So you can - for example - obtain the url to use for OBS integration. WIP
2021-12-14 14:41:34 +00:00
const shareChatUrlSVG: SVGButton = () => {
Moving `public` directory away: Moving `public/images` dir to `assets/images`, because it conflicts with gitlab CI/CD for documentation. Moving `assets/styles.css` to `assets/styles/styles.css`. Related to #117.
2023-02-14 09:19:55 +00:00
// This content comes from the file assets/images/url.svg, after svgo cleaning.
Share chat url Modal for video owner (and instance's moderators) that allows to generate a link to the chat. So you can - for example - obtain the url to use for OBS integration. WIP
2021-12-14 14:41:34 +00:00
// To get the formated content, you can do:
// xmllint dist/client/images/url.svg --format
// Then replace the color by `currentColor`
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
<g style="stroke-width:1.17052;stroke-miterlimit:4;stroke-dasharray:none">
<path style="opacity:.998;fill:none;fill-opacity:1;stroke:currentColor;stroke-width:1.17052;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m6.556-.435 1.132-1.132c.269-.268.618-.351.784-.186L9.867-.357c.166.165.083.515-.186.784L7.418 2.69c-.269.269-.618.352-.784.186l-.698-.697-.39-.407" transform="matrix(.45208 0 0 .45208 -.73 1.423)"/>
<path style="opacity:.998;fill:none;fill-opacity:1;stroke:currentColor;stroke-width:1.17052;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M6.038 3.505 4.906 4.637c-.268.268-.618.351-.784.186L2.727 3.427c-.166-.165-.083-.515.186-.784L5.176.38c.27-.269.619-.352.784-.186l.698.697.39.407" transform="matrix(.45208 0 0 .45208 -.73 1.423)"/>
</g>
</svg>
`
}
Links to online documentation: * Adding a help button on top of the chat, that links to the online documentation on frama.io. * Replaced github.io documentation links by frama.io documentation. * Adding links to the documentation in the diagnostic tool.
2023-07-26 16:16:30 +00:00
const helpButtonSVG: SVGButton = () => {
// This content comes from the file assets/images/help.svg, after svgo cleaning.
// To get the formated content, you can do:
// xmllint dist/client/images/url.svg --format
// Then replace the color by `currentColor`
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
<path style="display:inline;opacity:.998;fill:none;fill-opacity:1;stroke:currentColor;stroke-width:.529167;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1.48 1.583V.86c0-.171.085-.31.19-.31h.893c.106 0 .19.139.19.31v.838c0 .171-.107.219-.19.284l-.404.314c-.136.106-.219.234-.221.489l-.003.247"/>
<path style="display:inline;fill:currentColor;stroke-width:.235169" d="M1.67 3.429h.529v.597H1.67z"/>
</svg>
`
}
Changing defaults MUC affiliation (#385): * For Peertube moderators/admins, we add a button "Promote". Clicking on it will promote them as MUC owner.
2024-05-17 13:17:36 +00:00
const promoteSVG: SVGButton = () => {
// This content comes from the file assets/images/moderator.svg, after svgo cleaning.
// To get the formated content, you can do:
// xmllint dist/client/images/moderator.svg --format
// Then replace the color by `currentColor`
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
<g style="stroke-width:1.00021;stroke-miterlimit:4;stroke-dasharray:none">
Better "become moderator" icon.
2024-05-22 15:40:16 +00:00
<path style="opacity:.998;fill:none;fill-opacity:1;stroke:currentColor;stroke-width:1.17052;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M2.943 1.626V-.34a.94.94 0 0 1 .942-.943l1.962-.023 1.961.01a.94.94 0 0 1 .942.942v1.968S7.126 4.746 5.847 4.767c-1.28.02-2.904-3.14-2.904-3.14Z" transform="matrix(.45208 0 0 .45208 -.526 1.335)"/>
Changing defaults MUC affiliation (#385): * For Peertube moderators/admins, we add a button "Promote". Clicking on it will promote them as MUC owner.
2024-05-17 13:17:36 +00:00
</g>
</svg>
`
}
New buttons.
2021-11-25 15:56:32 +00:00
export {
closeSVG,
openChatSVG,
openBlankChatSVG,
Links to online documentation: * Adding a help button on top of the chat, that links to the online documentation on frama.io. * Replaced github.io documentation links by frama.io documentation. * Adding links to the documentation in the diagnostic tool.
2023-07-26 16:16:30 +00:00
shareChatUrlSVG,
Changing defaults MUC affiliation (#385): * For Peertube moderators/admins, we add a button "Promote". Clicking on it will promote them as MUC owner.
2024-05-17 13:17:36 +00:00
helpButtonSVG,
promoteSVG
Use ESBuild for frontend build. Replacing webpack by ESBuild for client code compilation (as in the official quickstart plugin). So we can remove deprecated webpack dependencies. Note: webpack is still used for ConverseJS build. This may be removed soon. Related to issue #122.
2022-12-07 17:36:16 +00:00
}
export type {
New buttons.
2021-11-25 15:56:32 +00:00
SVGButton
}