mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-23 21:28:29 +03:00
Code Issues Projects Releases Packages Wiki Activity

Allow embedding HTML for external actions (#2693)

Browse source 
* Admin UI: implement HTML embeds

* Admin UI External Actions: set correct useHTML on edits

* Admin UI: edit by index, not URL

* External Actions: render HTML on stream frontend

* Don't open embeds externally

* Remove TODO comment

* Add HTML as unique action key

* Admin UI: Actions: use CodeMirror editor, dropdown
This commit is contained in:
Philipp 2023-02-14 18:08:54 +01:00 committed by GitHub
parent c372c9b36e
commit a290770ac9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 120 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
models/externalAction.go
View file

@ -4,6 +4,8 @@ package models
type ExternalAction struct {
// URL is the URL to load.
URL string `json:"url"`
// HTML is the HTML to embed into the modal. When this is set, OpenExternally and URL are ignored
HTML string `json:"html"`
// Title is the name of this action, displayed in the modal.
Title string `json:"title"`
// Description is the description of this action.

21
web/components/ui/Content/Content.tsx
View file

@ -75,7 +75,7 @@ const OwncastPlayer = dynamic(
);
const ExternalModal = ({ externalActionToDisplay, setExternalActionToDisplay }) => {
const { title, description, url } = externalActionToDisplay;
const { title, description, url, html } = externalActionToDisplay;
return (
<Modal
title={description || title}
@ -83,7 +83,19 @@ const ExternalModal = ({ externalActionToDisplay, setExternalActionToDisplay })
open={!!externalActionToDisplay}
height="80vh"
handleCancel={() => setExternalActionToDisplay(null)}
/>
>
{html ? (
<div
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: html }}
style={{
height: '100%',
width: '100%',
overflow: 'auto',
}}
/>
) : null}
</Modal>
);
};
@ -127,7 +139,8 @@ export const Content: FC = () => {
const externalActionSelected = (action: ExternalAction) => {
const { openExternally, url } = action;
if (openExternally) {
// apply openExternally only if we don't have an HTML embed
if (openExternally && url) {
window.open(url, '_blank');
} else {
setExternalActionToDisplay(action);
@ -136,7 +149,7 @@ export const Content: FC = () => {
const externalActionButtons = externalActions.map(action => (
<ActionButton
key={action.url}
key={action.url || action.html}
action={action}
externalActionSelected={externalActionSelected}
/>

1
web/components/ui/Modal/Modal.module.scss
View file

@ -11,3 +11,4 @@
background-color: var(--theme-color-components-modal-content-background);
color: var(--theme-color-components-modal-content-text);
}

3
web/interfaces/external-action.ts
View file

@ -2,7 +2,8 @@ export interface ExternalAction {
title: string;
description?: string;
color?: string;
url: string;
url?: string;
html?: string;
icon?: string;
openExternally?: boolean;
}

1
web/package-lock.json generated
View file

@ -10,6 +10,7 @@
"dependencies": {
"@ant-design/icons": "4.8.0",
"@codemirror/lang-css": "6.0.2",
"@codemirror/lang-html": "^6.4.2",
"@codemirror/lang-javascript": "^6.1.2",
"@codemirror/lang-markdown": "6.0.5",
"@codemirror/language-data": "6.1.0",

1
web/package.json
View file

@ -14,6 +14,7 @@
"dependencies": {
"@ant-design/icons": "4.8.0",
"@codemirror/lang-css": "6.0.2",
"@codemirror/lang-html": "^6.4.2",
"@codemirror/lang-javascript": "^6.1.2",
"@codemirror/lang-markdown": "6.0.5",
"@codemirror/language-data": "6.1.0",

129
web/pages/admin/actions.tsx
View file

@ -1,5 +1,7 @@
import { Button, Checkbox, Form, Input, Modal, Space, Table, Typography } from 'antd';
import _ from 'lodash';
import { Button, Checkbox, Form, Input, Modal, Select, Space, Table, Typography } from 'antd';
import CodeMirror from '@uiw/react-codemirror';
import { bbedit } from '@uiw/codemirror-theme-bbedit';
import { html as codeMirrorHTML } from '@codemirror/lang-html';
import dynamic from 'next/dynamic';
import React, { ReactElement, useContext, useEffect, useState } from 'react';
import { FormStatusIndicator } from '../../components/admin/FormStatusIndicator';
@ -33,7 +35,9 @@ interface Props {
onCancel: () => void;
onOk: (
oldAction: ExternalAction | null,
oldActionIndex: number | null,
actionUrl: string,
actionHTML: string,
actionTitle: string,
actionDescription: string,
actionIcon: string,
@ -42,12 +46,19 @@ interface Props {
) => void;
open: boolean;
action: ExternalAction | null;
index: number | null;
}
// ActionType is only used here to save either only the URL or only the HTML.
type ActionType = 'url' | 'html';
const ActionModal = (props: Props) => {
const { onOk, onCancel, open, action } = props;
const [actionType, setActionType] = useState<ActionType>('url');
const [actionUrl, setActionUrl] = useState('');
const [actionHTML, setActionHTML] = useState('');
const [actionTitle, setActionTitle] = useState('');
const [actionDescription, setActionDescription] = useState('');
const [actionIcon, setActionIcon] = useState('');
@ -55,7 +66,9 @@ const ActionModal = (props: Props) => {
const [openExternally, setOpenExternally] = useState(false);
useEffect(() => {
setActionType((action?.html?.length || 0) > 0 ? 'html' : 'url');
setActionUrl(action?.url || '');
setActionHTML(action?.html || '');
setActionTitle(action?.title || '');
setActionDescription(action?.description || '');
setActionIcon(action?.icon || '');
@ -66,7 +79,10 @@ const ActionModal = (props: Props) => {
function save() {
onOk(
action,
actionUrl,
props.index,
// Save only one of the properties
actionType === 'html' ? '' : actionUrl,
actionType === 'html' ? actionHTML : '',
actionTitle,
actionDescription,
actionIcon,
@ -74,6 +90,7 @@ const ActionModal = (props: Props) => {
openExternally,
);
setActionUrl('');
setActionHTML('');
setActionTitle('');
setActionDescription('');
setActionIcon('');
@ -82,6 +99,9 @@ const ActionModal = (props: Props) => {
}
function canSave(): Boolean {
if (actionType === 'html') {
return actionHTML !== '' && actionTitle !== '';
}
return isValidUrl(actionUrl, ['https:']) && actionTitle !== '';
}
@ -93,6 +113,10 @@ const ActionModal = (props: Props) => {
setOpenExternally(checkbox.target.checked);
};
const onActionHTMLChanged = (newActionHTML: string) => {
setActionHTML(newActionHTML);
};
return (
<Modal
destroyOnClose
@ -104,7 +128,7 @@ const ActionModal = (props: Props) => {
>
<Form initialValues={action}>
Add the URL for the external action you want to present.{' '}
<strong>Only HTTPS urls are supported.</strong>
<strong>Only HTTPS URLs and embeds are supported.</strong>
<p>
<a
href="https://owncast.online/thirdparty/actions/"
@ -114,15 +138,39 @@ const ActionModal = (props: Props) => {
Read more about external actions.
</a>
</p>
<Form.Item name="url">
<Input
required
placeholder="https://myserver.com/action (required)"
onChange={input => setActionUrl(input.currentTarget.value.trim())}
type="url"
pattern={DEFAULT_TEXTFIELD_URL_PATTERN}
<Form.Item>
<Select
value={actionType}
onChange={setActionType}
placeholder="Select an action type"
options={[
{ label: 'Link or embed an URL', value: 'url' },
{ label: 'Custom HTML', value: 'html' },
]}
/>
</Form.Item>
{actionType === 'html' ? (
<Form.Item name="html">
<CodeMirror
value={actionHTML}
placeholder="HTML embed code (required)"
theme={bbedit}
height="200px"
extensions={[codeMirrorHTML()]}
onChange={onActionHTMLChanged}
/>
</Form.Item>
) : (
<Form.Item name="url">
<Input
required
placeholder="https://myserver.com/action (required)"
onChange={input => setActionUrl(input.currentTarget.value.trim())}
type="url"
pattern={DEFAULT_TEXTFIELD_URL_PATTERN}
/>
</Form.Item>
)}
<Form.Item name="title">
<Input
value={actionTitle}
@ -155,15 +203,17 @@ const ActionModal = (props: Props) => {
</Form.Item>
Optional background color of the action button.
</div>
<Form.Item name="openExternally">
<Checkbox
checked={openExternally}
defaultChecked={openExternally}
onChange={onOpenExternallyChanged}
>
Open in a new tab instead of within your page.
</Checkbox>
</Form.Item>
{actionType === 'html' ? null : (
<Form.Item name="openExternally">
<Checkbox
checked={openExternally}
defaultChecked={openExternally}
onChange={onOpenExternallyChanged}
>
Open in a new tab instead of within your page.
</Checkbox>
</Form.Item>
)}
</Form>
</Modal>
);
@ -177,6 +227,7 @@ const Actions = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [submitStatus, setSubmitStatus] = useState(null);
const [editAction, setEditAction] = useState<ExternalAction>(null);
const [editActionIndex, setEditActionIndex] = useState(-1);
const resetStates = () => {
setSubmitStatus(null);
@ -205,9 +256,8 @@ const Actions = () => {
});
}
async function handleDelete(action) {
async function handleDelete(action, index) {
const actionsData = [...actions];
const index = actions.findIndex(item => item.url === action.url);
actionsData.splice(index, 1);
try {
@ -220,7 +270,9 @@ const Actions = () => {
async function handleSave(
oldAction: ExternalAction | null,
oldActionIndex: number,
url: string,
html: string,
title: string,
description: string,
icon: string,
@ -232,6 +284,7 @@ const Actions = () => {
const newAction: ExternalAction = {
url,
html,
title,
description,
icon,
@ -240,9 +293,8 @@ const Actions = () => {
};
// Replace old action if edited or append the new action
const index = oldAction ? actions.findIndex(item => _.isEqual(item, oldAction)) : -1;
if (index >= 0) {
actionsData[index] = newAction;
if (oldActionIndex >= 0) {
actionsData[oldActionIndex] = newAction;
} else {
actionsData.push(newAction);
}
@ -254,19 +306,23 @@ const Actions = () => {
}
}
async function handleEdit(action: ExternalAction) {
async function handleEdit(action: ExternalAction, index) {
setEditActionIndex(index);
setEditAction(action);
setIsModalOpen(true);
}
const showCreateModal = () => {
setEditAction(null);
setEditActionIndex(-1);
setIsModalOpen(true);
};
const handleModalSaveButton = (
oldAction: ExternalAction | null,
oldActionIndex: number,
actionUrl: string,
actionHTML: string,
actionTitle: string,
actionDescription: string,
actionIcon: string,
@ -276,7 +332,9 @@ const Actions = () => {
setIsModalOpen(false);
handleSave(
oldAction,
oldActionIndex,
actionUrl,
actionHTML,
actionTitle,
actionDescription,
actionIcon,
@ -284,6 +342,7 @@ const Actions = () => {
openExternally,
);
setEditAction(null);
setEditActionIndex(-1);
};
const handleModalCancelButton = () => {
@ -294,10 +353,10 @@ const Actions = () => {
{
title: '',
key: 'delete-edit',
render: (text, record) => (
render: (text, record, index) => (
<Space size="middle">
<Button onClick={() => handleDelete(record)} icon={<DeleteOutlined />} />
<Button onClick={() => handleEdit(record)} icon={<EditOutlined />} />
<Button onClick={() => handleDelete(record, index)} icon={<DeleteOutlined />} />
<Button onClick={() => handleEdit(record, index)} icon={<EditOutlined />} />
</Space>
),
},
@ -312,9 +371,10 @@ const Actions = () => {
key: 'description',
},
{
title: 'URL',
dataIndex: 'url',
title: 'URL / Embed',
key: 'url',
dataIndex: 'url',
render: (text, record) => (record.html ? 'HTML embed' : record.url),
},
{
title: 'Icon',
@ -331,9 +391,11 @@ const Actions = () => {
},
{
title: 'Opens',
dataIndex: 'openExternally',
key: 'openExternally',
render: (openExternally: boolean) => (openExternally ? 'In a new tab' : 'In a modal'),
dataIndex: 'openExternally',
// Note: embeds will alway open in the same tab / in a modal
render: (openExternally: boolean, record) =>
!openExternally || record.html ? 'In the same tab' : 'In a new tab',
},
];
@ -370,6 +432,7 @@ const Actions = () => {
<ActionModal
action={editAction}
index={editActionIndex}
open={isModalOpen}
onOk={handleModalSaveButton}
onCancel={handleModalCancelButton}