pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Allow embedding HTML for external actions (#2693) 

* 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
pull/2708/head
Philipp 2 years ago 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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      models/externalAction.go
  2. 21
      web/components/ui/Content/Content.tsx
  3. 1
      web/components/ui/Modal/Modal.module.scss
  4. 3
      web/interfaces/external-action.ts
  5. 1
      web/package-lock.json
  6. 1
      web/package.json
  7. 129
      web/pages/admin/actions.tsx

2
models/externalAction.go
Unescape View File

@ -4,6 +4,8 @@ package models @@ -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
Unescape View File

@ -75,7 +75,7 @@ const OwncastPlayer = dynamic( @@ -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 }) @@ -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 = () => { @@ -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 = () => { @@ -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
Unescape View File

@ -11,3 +11,4 @@ @@ -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
Unescape View File

@ -2,7 +2,8 @@ export interface ExternalAction { @@ -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
Unescape View File

@ -10,6 +10,7 @@ @@ -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
Unescape View File

@ -14,6 +14,7 @@ @@ -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
Unescape View File

@ -1,5 +1,7 @@ @@ -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 { @@ -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 { @@ -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) => { @@ -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) => { @@ -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) => { @@ -74,6 +90,7 @@ const ActionModal = (props: Props) => {
openExternally,
);
setActionUrl('');
setActionHTML('');
setActionTitle('');
setActionDescription('');
setActionIcon('');
@ -82,6 +99,9 @@ const ActionModal = (props: Props) => { @@ -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) => { @@ -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) => { @@ -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) => { @@ -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) => { @@ -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 = () => { @@ -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 = () => { @@ -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 = () => { @@ -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 = () => { @@ -232,6 +284,7 @@ const Actions = () => {
const newAction: ExternalAction = {
url,
html,
title,
description,
icon,
@ -240,9 +293,8 @@ const Actions = () => { @@ -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 = () => { @@ -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 = () => { @@ -276,7 +332,9 @@ const Actions = () => {
setIsModalOpen(false);
handleSave(
oldAction,
oldActionIndex,
actionUrl,
actionHTML,
actionTitle,
actionDescription,
actionIcon,
@ -284,6 +342,7 @@ const Actions = () => { @@ -284,6 +342,7 @@ const Actions = () => {
openExternally,
);
setEditAction(null);
setEditActionIndex(-1);
};
const handleModalCancelButton = () => {
@ -294,10 +353,10 @@ const Actions = () => { @@ -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 = () => { @@ -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 = () => { @@ -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 = () => { @@ -370,6 +432,7 @@ const Actions = () => {
<ActionModal
action={editAction}
index={editActionIndex}
open={isModalOpen}
onOk={handleModalSaveButton}
onCancel={handleModalCancelButton}

Write Preview
Loading…
Cancel
Save