Social features / ActivityPub federation (#1629)
* Support webfinger requests for the live account. Closes https://github.com/owncast/owncast/issues/1193 * Support for actor requests. Returns response for live actor. Closes https://github.com/owncast/owncast/issues/1203 * Handle follow and unfollow requests. Closes https://github.com/owncast/owncast/issues/1191 and https://github.com/owncast/owncast/issues/1205 and https://github.com/owncast/owncast/issues/1206 and https://github.com/owncast/owncast/issues/1194 * Add basic support for sending out text activities. For https://github.com/owncast/owncast/issues/1192 * Some error handling and passing of dynamic local account names. * Add hardcoded example image attachment to test post * Centralize the map of accounts and inboxes * No longer disable the preview generator based on YP toggle * Send a federated message to followers when stream starts. For https://github.com/owncast/owncast/issues/1192 * Placeholder for attaching tags * Add image description * Save and get to outbox persistence. Return using outbox endpoint for actor * Pass payloads to be handled through the gochan * Handle undo follow requests explitly, not all undo requests * Add API for manually sending simple federated messages. Closes #1215 * Verify inbox requests. Closes #1321 * Add route to fetch a single AP object by ID. For #1329 * Add responses to fediverse nodeinfo requests * Set and get federation config values for admin * Handle host-meta requests * Do not send out message if disabled. Use saved go live message. * Require AP-compatible content types for AP-related requests * Rename ap models to apmodels for clarity * Change how content type matching takes place. * io -> ioutil * Add stub delete activity callback * Handle likes and announces to surface engagement in chat. Part of #1229 * Append url to go live posts * Do not require specific content types for nodeinfo requests * Add follow engagement chat message via AP * add owncast user-agent to requests * Set note visibility to public (for now) * Fix saving/fetching a single object * Add support for x-nodeinfo2 responses * Point to the dev admin branch for ap * Bundle in dev admin for testing * Add error logging * Add AP middleware back * Point to the new external compatible logo endpoint * Clean up more AP logging to help testing * Tweak go live text and link hashtags * Fix bug in fetching init time * Send update actor activities when server details/profile is updated * Add federation config overview to web client config * Add additional actor properties * Make the AP middleware checking more flexible when looking at types * First pass at remote fediverse follow flow. For #1371 * Added a basic AP actor followers endpoint * WIP client followers API * Add profile-page reference to webfinger response * Add aliases to webfinger response * Fix content-type returned to be expected activitypub+json * First pass at followers api * Point at local dev copy of go-fed/activity * Add custom toot Hashtag objects to posts * Store additional user details to followers table * Fix AP followers endpoint. Closes #1204 * Add owncast hashtag as an invisible tag to go live posts * Reject AP requests when it is disabled * Add actor util for generating full account user from person object * Verify inbox requests before performing any other work * Accept actor update requests * Fix linter errors in federation branch * Migrate AP SQL to sqlc for type safe queries * Use the @unclearParadigm REST parameter helper * Fix verifying post ID on AP engagement * WIP privacy/request approval * Style the remote follow modal * First pass at a followers list component w/ mock data. #1370 * Revert "Use the @unclearParadigm REST parameter helper" This reverts commit c8af8a413f6f53e7d1a15a7d823ff28be2db3c23. * Fix get followers API * Add support for requiring approval. Closes https://github.com/owncast/owncast/issues/1208 * Handle Applications as Actors partly for PeerTube support * add temp todo list * check route on load, this might change later * style followers * account for just 1 tab case * Remove mock data. Allow showing follow button even when there are no external actions defined * Point to actual followers API * Support fallback img for follower views * Remove duplicate verification. Add some additional verbose logging * Bundle dev admin * Add type to host-meta webfinger template response * Tweak remote follow modal content * WIP federation followers refactor * Do not send pointer to middleware * Update admin * Add setting for toggling displaying fediverse engagement. Closes #1404 * Add in-development admin * Do not enable cors on admin followers api * Add db migration for updating messages table * Enable empty string go live messages to disable * Remove debug messages * Rework some ActivityPub handling. Create new Actor->Person handling. Create new Actor->Service handling. Add engagement handlers to send chat events and store event objects. Store inbound activities to new ap_inbound_activities table. * Support federated engagement events. Store them in the messages table and surface them via chat events. * Support federated event engatement in the chat * Tweak web UI followers handling * Point go.mod at remote fork instead of local * Update admin * Merged in develop. Couple fixes * Update dev admin * Update fedi engagement posts. - Fix incorrect action text. - Add action icons. * Set public as to instead of cc for ap msg * Updated styling for federated actions in chat * Add support for blocking federated domains. Closes #1209 * Force checking of https in verify step * Update dev admin * Return user scopes in chat history api. Closes #1586 * Update dev admin * Add AP outbound request worker pool. Closes #1571 * Disable (temporarily?) owncast tag on AP posts * Consolidate creating activity+notes in outbound AP messages * Add inbox worker pool. Closes #1570 * Update dev admin bundle * Clean up some logs * Re-enable inbound verfication * Save full IRI to outbox instead of path * Reject if full IRI is not found in outbox * Use full ActivityPub user account in chat event * Fix and expand follower APIs - Add missing IDs to AP follower endpoints - Split AP follower endpoints into initial request and pages. - Support pagination in AP requests. * Include IRI in error message * Hide chat toggle when chat is hidden. Closes #1606 * Updates to followers pagination * Set default go live message * Remove log * indirect -> direct import * Updates for inbound federated event handling. - Keep track of existing events and reject duplicates. - Change what is sent to chat for surfing federated engagement. - Keep track if outbound events are automated "go live" events or not. * Update chat federated engagement. * Update dev admin. * Move from being a person to a bot (service). Closes #1619 * Only set server init date if not already set * Only save notes to outbox able * Rework private-mode followers/approvals * API for returning a list of federated actions for #1573 * Fix too-small follower cells and jumpy tabs. Closes #1616 and closes #1516 * Fix shortcuts getting fired on inputs. Fixes #1489 and #1201 * Add spinner, autoclose + other fixes to follow modal. Fixes #1593 * Fix fetching a single object by IRI * SendFederationMessage -> SendFederatedMessage * Autolink and create tag objects from manual posts. Closes #1620 * Update dev admin bundle * Handle engagement from non-automated/live posts * Reject federated engagement actions if they do not match a local post * Update dev admin bundle * A bunch of cleanup * Fix unused assignments and logic * Remove unused function * Add content warning and sentive content flag if stream is NSFW. Closes #1624 * Disable fetching objects by IRI when in private mode. Closes #1623 * Update the error message of the remote follow dialog. closes #1622 * Update dev admin * Fix NREs throwing in test content * Fix query that wasn't properly filtering out hidden messages * Test against user being disabled instead of message visibility * Fix automated test NRE * Update comment * Adjust federated engagement chat views. Closes #1617 * Add additional index to users table * Add support for removing followers/requests. Closes #1630 * Reject federated actions from blocked actors. #1631 * Use fallback avatar if it fails to load. Closes #1635 * Fix styling of follower list. Closes #1636 * Add basic blurb stating they should follow the server. Closes #1641 * Update dev admin * Set default go live message in migration. Closes #1642 * Reset the messages table on 0.0.11 schema migration * Fix js error with moderation actions. Closes #1621 * Add a bit more clarification on follow modal. Closes #1599 * Remove todos * Split out actor and domain blocking checks * Check for errors on default values being set * Clean up actor rejection due to being blocked * Update dev admin * Add colon to error to make it easier to read * Remove markdown rendering of go live message. Reorganize text. Remove content warning. Closes #1645 * Break out the sort+render messages logic so it can be fired on visibility change. Closes #1643 * Do not send profile updates if federation is disabled * Save follow references to inbound activities table * Update dev admin * Add blocked actor test * Remove the overloaded term of Follow from social links * Fix test running in memory only * Remove "just" in engagement messags * Replace star with heart for like action. * Update dev admin * Explicitly set cc as public * Remove overly using the stream name in fediverse engagement messages * Some federated/follow UI tweaks * Remove explicit cc and bcc as they are not required * Explicitly set the audience * Remove extra margin * Add Join Fediverse button to follow modal. Closes #1651 * Do not allow multiple follows to send multiple events. Closes #1650 * Give events a min height * Do not allow old posts to be liked/shared. Closes #1652 * Remove value from log message * Alert followers on private mode toggle * Ignore clicks to follow button if disabled * Remove underline from action buttons * Add moderator icon to join message * Update admin * Post-merge remove unused var * Remove pointing at feature branch Co-authored-by: Ginger Wong <omqmail@gmail.com>
This commit is contained in:
Gabe Kangas
77
webroot/js/TEMP-TODO.md
Normal file
77
webroot/js/TEMP-TODO.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# TEMP TODO FILE
|
||||
|
||||
# ~~Mockup for Recordings and Scheduling~~
|
||||
# Mockup for Fediverse Social, Tabbed User Content
|
||||
This used to be setting up to display Recordings, but the progress can be used towards Fediverse work.
|
||||
|
||||
- Rearranges some logic around when to display the chat panel vs when video is playing
|
||||
- Improves user content styling for improved positioning across screen sizes.
|
||||
- Add accessible Tab Bar navigation
|
||||
|
||||
## Move some things around
|
||||
|
||||
- [x] move social icons under Profile image
|
||||
- [x] move External Actions to top right, below video element
|
||||
- [x] disable/hide chat panel + chat icon when there is no Recording, nor Live video playing
|
||||
- [ ] add tab bar below tags list
|
||||
- [ ] style Follow on Fediverse Modal
|
||||
|
||||
### Add more local React States
|
||||
- [ ] add offline / no-video state (? what was this again?)
|
||||
- [ ] add tab states
|
||||
- [ ] **DEFER** add route states
|
||||
- [ ] **DEFER** add recordings[] when comes in from config
|
||||
- [ ] **DEFER** add schedule[] when comes in from config
|
||||
|
||||
## Add Tab bar
|
||||
Tab bar includes:
|
||||
- `About` - User custom info
|
||||
- `Followers` - display tab if schedule info exists
|
||||
- **DEFER** `Videos` - display if user has Recordings
|
||||
- **DEFER** `Schedule` - display tab if schedule info exists
|
||||
|
||||
|
||||
## **DEFER?** Routing, Url Handling
|
||||
- do we need it for Followers?
|
||||
#### Recording urls
|
||||
- `server.com/recordings`
|
||||
- `server.com/recordings/id123`
|
||||
|
||||
#### Schedule urls
|
||||
- `server.com/schedule`
|
||||
- `server.com/schedule/id123`
|
||||
|
||||
#### Followers Url?
|
||||
|
||||
### Todo
|
||||
- [ ] modify server side go to just load up index.html/app.js when url routes to /recording or /schedule
|
||||
- [ ] update app js to detect url route and display appropriate tab content
|
||||
|
||||
|
||||
## **DEFER** Recordings
|
||||
|
||||
### `server.com/recordings`
|
||||
- [ ] don't show chat elements
|
||||
- [ ] list avilable recordings, display list similar to directory.owncast.
|
||||
- [ ] display recording length
|
||||
- [ ] display num views?
|
||||
|
||||
|
||||
### `server.com/recordings/id123`
|
||||
- [ ] display video, full size with recording loaded
|
||||
- [ ] display chat
|
||||
- [ ] do not enable chat message input
|
||||
- [ ] render chat messages as they came in relative to video timestamp
|
||||
|
||||
|
||||
## Schedule
|
||||
- [ ] don't show chat elements
|
||||
|
||||
### `server.com/schedule`
|
||||
- [ ] list items ASC
|
||||
|
||||
|
||||
### `server.com/schedule/id123`
|
||||
- [ ] display info
|
||||
|
||||
|
||||
@@ -6,6 +6,8 @@ import { OwncastPlayer } from './components/player.js';
|
||||
import SocialIconsList from './components/platform-logos-list.js';
|
||||
import UsernameForm from './components/chat/username.js';
|
||||
import VideoPoster from './components/video-poster.js';
|
||||
import Followers from './components/federation/followers.js';
|
||||
|
||||
import Chat from './components/chat/chat.js';
|
||||
import Websocket, {
|
||||
CALLBACKS,
|
||||
@@ -17,10 +19,14 @@ import ExternalActionModal, {
|
||||
ExternalActionButton,
|
||||
} from './components/external-action-modal.js';
|
||||
|
||||
import FediverseFollowModal, {
|
||||
FediverseFollowButton,
|
||||
} from './components/fediverse-follow-modal.js';
|
||||
|
||||
import {
|
||||
addNewlines,
|
||||
checkUrlPathForDisplay,
|
||||
classNames,
|
||||
clearLocalStorage,
|
||||
debounce,
|
||||
getLocalStorage,
|
||||
getOrientation,
|
||||
@@ -28,6 +34,7 @@ import {
|
||||
makeLastOnlineString,
|
||||
parseSecondsToDurationString,
|
||||
pluralize,
|
||||
ROUTE_RECORDINGS,
|
||||
setLocalStorage,
|
||||
} from './utils/helpers.js';
|
||||
import {
|
||||
@@ -52,6 +59,7 @@ import {
|
||||
WIDTH_SINGLE_COL,
|
||||
} from './utils/constants.js';
|
||||
import { checkIsModerator } from './utils/chat.js';
|
||||
import TabBar from './components/tab-bar.js';
|
||||
|
||||
export default class App extends Component {
|
||||
constructor(props, context) {
|
||||
@@ -92,7 +100,13 @@ export default class App extends Component {
|
||||
windowHeight: window.innerHeight,
|
||||
orientation: getOrientation(this.hasTouchScreen),
|
||||
|
||||
externalAction: null,
|
||||
// modals
|
||||
externalActionModalData: null,
|
||||
fediverseModalData: null,
|
||||
|
||||
// routing & tabbing
|
||||
section: '',
|
||||
sectionId: '',
|
||||
};
|
||||
|
||||
// timers
|
||||
@@ -119,6 +133,9 @@ export default class App extends Component {
|
||||
this.handleKeyPressed = this.handleKeyPressed.bind(this);
|
||||
this.displayExternalAction = this.displayExternalAction.bind(this);
|
||||
this.closeExternalActionModal = this.closeExternalActionModal.bind(this);
|
||||
this.displayFediverseFollowModal =
|
||||
this.displayFediverseFollowModal.bind(this);
|
||||
this.closeFediverseFollowModal = this.closeFediverseFollowModal.bind(this);
|
||||
|
||||
// player events
|
||||
this.handlePlayerReady = this.handlePlayerReady.bind(this);
|
||||
@@ -158,6 +175,9 @@ export default class App extends Component {
|
||||
onError: this.handlePlayerError,
|
||||
});
|
||||
this.player.init();
|
||||
|
||||
// check routing
|
||||
this.getRoute();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
@@ -176,6 +196,13 @@ export default class App extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
getRoute() {
|
||||
const routeInfo = checkUrlPathForDisplay();
|
||||
this.setState({
|
||||
...routeInfo,
|
||||
});
|
||||
}
|
||||
|
||||
// fetch /config data
|
||||
getConfig() {
|
||||
fetch(URL_CONFIG)
|
||||
@@ -478,12 +505,13 @@ export default class App extends Component {
|
||||
}
|
||||
|
||||
handleKeyPressed(e) {
|
||||
if (
|
||||
e.target !== document.getElementById('message-input') &&
|
||||
e.target !== document.getElementById('username-change-input') &&
|
||||
e.target !== document.getElementsByClassName('emoji-picker__search')[0] &&
|
||||
this.state.streamOnline
|
||||
) {
|
||||
// Only handle shortcuts if the focus is on the general page body,
|
||||
// not a specific input field.
|
||||
if (e.target !== document.getElementById('app-body')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.state.streamOnline) {
|
||||
switch (e.code) {
|
||||
case 'MediaPlayPause':
|
||||
case 'KeyP':
|
||||
@@ -527,7 +555,7 @@ export default class App extends Component {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
externalAction: {
|
||||
externalActionModalData: {
|
||||
...action,
|
||||
url: fullUrl,
|
||||
},
|
||||
@@ -535,10 +563,17 @@ export default class App extends Component {
|
||||
}
|
||||
closeExternalActionModal() {
|
||||
this.setState({
|
||||
externalAction: null,
|
||||
externalActionModalData: null,
|
||||
});
|
||||
}
|
||||
|
||||
displayFediverseFollowModal(data) {
|
||||
this.setState({ fediverseModalData: data });
|
||||
}
|
||||
closeFediverseFollowModal() {
|
||||
this.setState({ fediverseModalData: null });
|
||||
}
|
||||
|
||||
handleWebsocketMessage(e) {
|
||||
if (e.type === SOCKET_MESSAGE_TYPES.ERROR_USER_DISABLED) {
|
||||
// User has been actively disabled on the backend. Turn off chat for them.
|
||||
@@ -645,9 +680,13 @@ export default class App extends Component {
|
||||
websocket,
|
||||
windowHeight,
|
||||
windowWidth,
|
||||
externalAction,
|
||||
fediverseModalData,
|
||||
externalActionModalData,
|
||||
lastDisconnectTime,
|
||||
section,
|
||||
sectionId,
|
||||
} = state;
|
||||
|
||||
const {
|
||||
version: appVersion,
|
||||
logo = TEMP_IMAGE,
|
||||
@@ -660,6 +699,7 @@ export default class App extends Component {
|
||||
externalActions,
|
||||
customStyles,
|
||||
maxSocketPayloadSize,
|
||||
federation = {},
|
||||
} = configData;
|
||||
|
||||
const bgUserLogo = { backgroundImage: `url(${logo})` };
|
||||
@@ -680,11 +720,19 @@ export default class App extends Component {
|
||||
const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
|
||||
const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;
|
||||
|
||||
const shouldDisplayChat = displayChatPanel && canChat && !chatDisabled;
|
||||
const noVideoContent =
|
||||
!playerActive || (section === ROUTE_RECORDINGS && sectionId !== '');
|
||||
const shouldDisplayChat =
|
||||
displayChatPanel && !chatDisabled && !noVideoContent;
|
||||
const usernameStyle = chatDisabled ? 'none' : 'flex';
|
||||
// const shouldDisplayChat = displayChatPanel && canChat && !chatDisabled;
|
||||
|
||||
const extraAppClasses = classNames({
|
||||
'config-loading': configData.loading,
|
||||
|
||||
chat: shouldDisplayChat,
|
||||
'no-chat': !shouldDisplayChat,
|
||||
'no-video': noVideoContent,
|
||||
'chat-hidden': !displayChatPanel && canChat && !chatDisabled, // hide panel
|
||||
'chat-disabled': !canChat || chatDisabled,
|
||||
'single-col': singleColMode,
|
||||
@@ -699,31 +747,53 @@ export default class App extends Component {
|
||||
: html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;
|
||||
|
||||
// modal buttons
|
||||
const externalActionButtons =
|
||||
externalActions &&
|
||||
externalActions.length > 0 &&
|
||||
html`<div
|
||||
id="external-actions-container"
|
||||
class="flex flex-row align-center"
|
||||
>
|
||||
${externalActions.map(
|
||||
function (action) {
|
||||
return html`<${ExternalActionButton}
|
||||
onClick=${this.displayExternalAction}
|
||||
action=${action}
|
||||
/>`;
|
||||
}.bind(this)
|
||||
)}
|
||||
</div>`;
|
||||
const externalActionButtons = html`<div
|
||||
id="external-actions-container"
|
||||
class="flex flex-row flex-wrap justify-end"
|
||||
>
|
||||
${externalActions &&
|
||||
externalActions.map(
|
||||
function (action) {
|
||||
return html`<${ExternalActionButton}
|
||||
onClick=${this.displayExternalAction}
|
||||
action=${action}
|
||||
/>`;
|
||||
}.bind(this)
|
||||
)}
|
||||
|
||||
<!-- fediverse follow button -->
|
||||
${federation.enabled &&
|
||||
html`<${FediverseFollowButton}
|
||||
onClick=${this.displayFediverseFollowModal}
|
||||
federationInfo=${federation}
|
||||
serverName=${name}
|
||||
/>`}
|
||||
</div>`;
|
||||
|
||||
// modal component
|
||||
const externalActionModal =
|
||||
externalAction &&
|
||||
externalActionModalData &&
|
||||
html`<${ExternalActionModal}
|
||||
action=${externalAction}
|
||||
action=${externalActionModalData}
|
||||
onClose=${this.closeExternalActionModal}
|
||||
/>`;
|
||||
|
||||
const fediverseFollowModal =
|
||||
fediverseModalData &&
|
||||
html`
|
||||
<${ExternalActionModal}
|
||||
onClose=${this.closeFediverseFollowModal}
|
||||
action=${fediverseModalData}
|
||||
useIframe=${false}
|
||||
customContent=${html`<${FediverseFollowModal}
|
||||
name=${name}
|
||||
logo=${logo}
|
||||
federationInfo=${federation}
|
||||
onClose=${this.closeFediverseFollowModal}
|
||||
/>`}
|
||||
/>
|
||||
`;
|
||||
|
||||
const chat = this.state.websocket
|
||||
? html`
|
||||
<${Chat}
|
||||
@@ -738,6 +808,36 @@ export default class App extends Component {
|
||||
`
|
||||
: null;
|
||||
|
||||
const TAB_CONTENT = [
|
||||
{
|
||||
label: 'About',
|
||||
content: html`
|
||||
<div>
|
||||
<div
|
||||
id="stream-summary"
|
||||
class="stream-summary my-4"
|
||||
dangerouslySetInnerHTML=${{ __html: summary }}
|
||||
></div>
|
||||
<div id="tag-list" class="tag-list text-gray-600 mb-3">
|
||||
${tagList && `#${tagList}`}
|
||||
</div>
|
||||
<div
|
||||
id="extra-user-content"
|
||||
class="extra-user-content"
|
||||
dangerouslySetInnerHTML=${{ __html: extraPageContent }}
|
||||
></div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
if (federation.enabled) {
|
||||
TAB_CONTENT.push({
|
||||
label: 'Followers',
|
||||
content: html`<${Followers} />`,
|
||||
});
|
||||
}
|
||||
|
||||
return html`
|
||||
<div
|
||||
id="app-container"
|
||||
@@ -784,7 +884,9 @@ export default class App extends Component {
|
||||
id="chat-toggle"
|
||||
onClick=${this.handleChatPanelToggle}
|
||||
class="flex cursor-pointer text-center justify-center items-center min-w-12 h-full bg-gray-800 hover:bg-gray-700"
|
||||
style=${{ display: chatDisabled ? 'none' : 'block' }}
|
||||
style=${{
|
||||
display: chatDisabled || noVideoContent ? 'none' : 'block',
|
||||
}}
|
||||
>
|
||||
💬
|
||||
</button>
|
||||
@@ -819,41 +921,42 @@ export default class App extends Component {
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<section id="user-content" aria-label="User information" class="p-8">
|
||||
<section
|
||||
id="user-content"
|
||||
aria-label="Owncast server information"
|
||||
class="p-2"
|
||||
>
|
||||
${externalActionButtons && html`${externalActionButtons}`}
|
||||
|
||||
<div class="user-content flex flex-row p-8">
|
||||
<div
|
||||
class="user-image rounded-full bg-white p-4 mr-8 bg-no-repeat bg-center"
|
||||
style=${bgUserLogo}
|
||||
class="user-logo-icons flex flex-col items-center justify-start mr-8"
|
||||
>
|
||||
<img class="logo visually-hidden" alt="" src=${logo} />
|
||||
<div
|
||||
class="user-image rounded-full bg-white p-4 bg-no-repeat bg-center"
|
||||
style=${bgUserLogo}
|
||||
>
|
||||
<img class="logo visually-hidden" alt="" src=${logo} />
|
||||
</div>
|
||||
<div class="social-actions">
|
||||
<${SocialIconsList} handles=${socialHandles} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="user-content-header border-b border-gray-500 border-solid"
|
||||
>
|
||||
<h2 class="font-semibold text-5xl">
|
||||
|
||||
<div class="user-content-header">
|
||||
<h2 class="server-name font-semibold text-5xl">
|
||||
<span class="streamer-name text-indigo-600">${name}</span>
|
||||
</h2>
|
||||
${externalActionButtons &&
|
||||
html`<div>${externalActionButtons}</div>`}
|
||||
<h3 class="font-semibold text-3xl">
|
||||
${streamOnline && streamTitle}
|
||||
</h3>
|
||||
<${SocialIconsList} handles=${socialHandles} />
|
||||
<div
|
||||
id="stream-summary"
|
||||
class="stream-summary my-4"
|
||||
dangerouslySetInnerHTML=${{ __html: summary }}
|
||||
></div>
|
||||
<div id="tag-list" class="tag-list text-gray-600 mb-3">
|
||||
${tagList && `#${tagList}`}
|
||||
|
||||
<!-- tab bar -->
|
||||
<div class="${TAB_CONTENT.length > 1 ? 'my-8' : 'my-3'}">
|
||||
<${TabBar} tabs=${TAB_CONTENT} ariaLabel="User Content" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="extra-user-content"
|
||||
class="extra-user-content px-8"
|
||||
dangerouslySetInnerHTML=${{ __html: extraPageContent }}
|
||||
></div>
|
||||
</section>
|
||||
|
||||
<footer class="flex flex-row justify-start p-8 opacity-50 text-xs">
|
||||
@@ -864,7 +967,7 @@ export default class App extends Component {
|
||||
</span>
|
||||
</footer>
|
||||
|
||||
${chat} ${externalActionModal}
|
||||
${chat} ${externalActionModal} ${fediverseFollowModal}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -25,6 +25,9 @@ const renderableChatStyleMessages = [
|
||||
SOCKET_MESSAGE_TYPES.CHAT_ACTION,
|
||||
SOCKET_MESSAGE_TYPES.SYSTEM,
|
||||
SOCKET_MESSAGE_TYPES.CHAT,
|
||||
SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_FOLLOW,
|
||||
SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_LIKE,
|
||||
SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_REPOST,
|
||||
];
|
||||
export default class Chat extends Component {
|
||||
constructor(props, context) {
|
||||
@@ -47,10 +50,6 @@ export default class Chat extends Component {
|
||||
this.receivedMessageUpdate = false;
|
||||
this.hasFetchedHistory = false;
|
||||
|
||||
// Force render is a state to force the messages to re-render when visibility
|
||||
// changes for messages. This overrides componentShouldUpdate logic.
|
||||
this.forceRender = false;
|
||||
|
||||
// Unordered dictionary of messages keyed by ID.
|
||||
this.messages = {};
|
||||
|
||||
@@ -98,10 +97,6 @@ export default class Chat extends Component {
|
||||
sortedMessages,
|
||||
} = this.state;
|
||||
|
||||
if (this.forceRender) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const {
|
||||
webSocketConnected: nextSocket,
|
||||
chatUserNames: nextUserNames,
|
||||
@@ -224,7 +219,8 @@ export default class Chat extends Component {
|
||||
};
|
||||
|
||||
this.messages = updatedMessagesList;
|
||||
this.forceRender = true;
|
||||
|
||||
this.resortAndRenderMessages();
|
||||
}
|
||||
|
||||
handleChangeModeratorStatus(isModerator) {
|
||||
@@ -261,12 +257,16 @@ export default class Chat extends Component {
|
||||
};
|
||||
this.messages = updatedMessagesList;
|
||||
|
||||
this.resortAndRenderMessages();
|
||||
}
|
||||
|
||||
resortAndRenderMessages() {
|
||||
// Convert the unordered dictionary of messages to an ordered array.
|
||||
// NOTE: This sorts the entire collection of messages on every new message
|
||||
// because the order a message comes in cannot be trusted that it's the order
|
||||
// it was sent, you need to sort by timestamp. I don't know if there
|
||||
// is a performance problem waiting to occur here for larger chat feeds.
|
||||
var sortedMessages = Object.values(updatedMessagesList)
|
||||
var sortedMessages = Object.values(this.messages)
|
||||
// Filter out messages set to not be visible
|
||||
.filter((message) => message.visible !== false)
|
||||
.sort((a, b) => {
|
||||
|
||||
@@ -26,6 +26,62 @@ function SystemMessage(props) {
|
||||
`;
|
||||
}
|
||||
|
||||
function SingleFederatedUser(props) {
|
||||
const { message } = props;
|
||||
const { type, body, title, image, link } = message;
|
||||
|
||||
let icon = null;
|
||||
switch (type) {
|
||||
case SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_FOLLOW:
|
||||
icon = '/img/follow.svg';
|
||||
break;
|
||||
case SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_LIKE:
|
||||
icon = '/img/like.svg';
|
||||
break;
|
||||
case SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_REPOST:
|
||||
icon = '/img/repost.svg';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return html`
|
||||
<a
|
||||
href=${link}
|
||||
target="_blank"
|
||||
class="hover:no-underline"
|
||||
title="Visit profile"
|
||||
>
|
||||
<div
|
||||
class="federated-action m-2 mt-3 bg-white flex items-center px-2 rounded-xl shadow border"
|
||||
>
|
||||
<div class="relative" style="top: -6px">
|
||||
<img
|
||||
src="${image || '/img/logo.svg'}"
|
||||
style="max-width: unset"
|
||||
class="rounded-full border border-slate-500 w-16"
|
||||
/>
|
||||
<span
|
||||
style=${{
|
||||
backgroundImage: `url(${icon})`,
|
||||
}}
|
||||
class="absolute h-6 w-6 rounded-full border-2 border-white action-icon"
|
||||
></span>
|
||||
</div>
|
||||
<div class="px-4 py-2">
|
||||
<span class=" text-gray-500 text-sm hover:no-underline truncate">
|
||||
${title}
|
||||
</span>
|
||||
<p
|
||||
class=" text-gray-700 w-full text-base leading-6"
|
||||
dangerouslySetInnerHTML=${{ __html: body }}
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
export default function Message(props) {
|
||||
const { message } = props;
|
||||
const { type, oldName, user, body } = message;
|
||||
@@ -46,8 +102,18 @@ export default function Message(props) {
|
||||
return html`<${SystemMessage} contents=${contents} />`;
|
||||
} else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) {
|
||||
const { displayName } = user;
|
||||
const contents = html`<span class="font-bold">${displayName}</span> joined
|
||||
the chat.`;
|
||||
const isAuthorModerator = checkIsModerator(message);
|
||||
const messageAuthorFlair = isAuthorModerator
|
||||
? html`<img
|
||||
title="Moderator"
|
||||
class="inline-block mr-1 w-3 h-3"
|
||||
src="/img/moderator-nobackground.svg"
|
||||
/>`
|
||||
: null;
|
||||
const contents = html`<div>
|
||||
<span class="font-bold">${messageAuthorFlair}${displayName}</span>
|
||||
${' '}joined the chat.
|
||||
</div>`;
|
||||
return html`<${SystemMessage} contents=${contents} />`;
|
||||
} else if (type === SOCKET_MESSAGE_TYPES.CHAT_ACTION) {
|
||||
const contents = html`<span
|
||||
@@ -64,6 +130,12 @@ export default function Message(props) {
|
||||
</div>`;
|
||||
return html`<${SystemMessage} contents=${contents} />`;
|
||||
}
|
||||
} else if (
|
||||
type === SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_FOLLOW ||
|
||||
SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_LIKE ||
|
||||
SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_REPOST
|
||||
) {
|
||||
return html` <${SingleFederatedUser} message=${message} /> `;
|
||||
} else {
|
||||
console.log('Unknown message type:', type);
|
||||
}
|
||||
|
||||
@@ -237,7 +237,7 @@ function ModeratorMoreInfoContainer({
|
||||
}) {
|
||||
const { user, timestamp, body } = message;
|
||||
const { displayName, createdAt, previousNames, displayColor } = user;
|
||||
const isAuthorModerator = user.scopes && user.scopes.contains('MODERATOR');
|
||||
const isAuthorModerator = user.scopes && user.scopes.includes('MODERATOR');
|
||||
|
||||
const authorTextColor = { color: textColorForHue(displayColor) };
|
||||
const createDate = new Date(createdAt);
|
||||
|
||||
@@ -35,14 +35,13 @@ export default class ExternalActionModal extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { action } = this.props;
|
||||
const { action, useIframe = true, customContent = null } = this.props;
|
||||
const { url, title, description } = action;
|
||||
const { iframeLoaded } = this.state;
|
||||
const iframeStyle = iframeLoaded
|
||||
? null
|
||||
: {
|
||||
backgroundImage: 'url(/img/loading.gif)',
|
||||
};
|
||||
: { backgroundImage: 'url(/img/loading.gif)' };
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="modal micromodal-slide"
|
||||
@@ -61,7 +60,10 @@ export default class ExternalActionModal extends Component {
|
||||
id="modal-header"
|
||||
class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md"
|
||||
>
|
||||
<h2 class="modal__title text-indigo-600 font-semibold">
|
||||
<h2
|
||||
id="external-action-modal-header"
|
||||
class="modal__title text-indigo-600 font-semibold"
|
||||
>
|
||||
${title || description}
|
||||
</h2>
|
||||
<button
|
||||
@@ -70,23 +72,30 @@ export default class ExternalActionModal extends Component {
|
||||
data-micromodal-close
|
||||
></button>
|
||||
</header>
|
||||
<div id="modal-content-content" class="modal-content-content">
|
||||
<div
|
||||
id="modal-content"
|
||||
class="modal__content text-gray-600 rounded-b-md overflow-y-auto overflow-x-hidden"
|
||||
>
|
||||
<iframe
|
||||
id="external-modal-iframe"
|
||||
style=${iframeStyle}
|
||||
class="bg-gray-100 bg-center bg-no-repeat"
|
||||
width="100%"
|
||||
allowpaymentrequest="true"
|
||||
allowfullscreen="false"
|
||||
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
|
||||
src=${url}
|
||||
onload=${this.setIframeLoaded}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="modal-content-content"
|
||||
class="modal-content-content rounded-b-md"
|
||||
>
|
||||
${useIframe
|
||||
? html`
|
||||
<div
|
||||
id="modal-content"
|
||||
class="modal__content text-gray-600 overflow-y-auto overflow-x-hidden"
|
||||
>
|
||||
<iframe
|
||||
id="external-modal-iframe"
|
||||
style=${iframeStyle}
|
||||
class="bg-gray-100 bg-center bg-no-repeat"
|
||||
width="100%"
|
||||
allowpaymentrequest="true"
|
||||
allowfullscreen="false"
|
||||
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
|
||||
src=${url}
|
||||
onload=${this.setIframeLoaded}
|
||||
/>
|
||||
</div>
|
||||
`
|
||||
: customContent}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,8 +104,8 @@ export default class ExternalActionModal extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
export function ExternalActionButton({ action, onClick }) {
|
||||
const { title, icon, color = undefined } = action;
|
||||
export function ExternalActionButton({ action, onClick, label = '' }) {
|
||||
const { title, icon, color = undefined, description } = action;
|
||||
const logo =
|
||||
icon &&
|
||||
html`
|
||||
@@ -106,12 +115,14 @@ export function ExternalActionButton({ action, onClick }) {
|
||||
const handleClick = () => onClick(action);
|
||||
return html`
|
||||
<button
|
||||
class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800"
|
||||
class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden m-1 px-3 py-1 text-base text-white bg-gray-800 rounded"
|
||||
onClick=${handleClick}
|
||||
style=${bgcolor}
|
||||
aria-label=${description}
|
||||
title=${description || title}
|
||||
>
|
||||
${logo}
|
||||
<span class="external-action-label">${title}</span>
|
||||
<span class="external-action-label">${label || title}</span>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
91
webroot/js/components/federation/followers.js
Normal file
91
webroot/js/components/federation/followers.js
Normal file
@@ -0,0 +1,91 @@
|
||||
import { h, Component } from '/js/web_modules/preact.js';
|
||||
import htm from '/js/web_modules/htm.js';
|
||||
import { URL_FOLLOWERS } from '/js/utils/constants.js';
|
||||
const html = htm.bind(h);
|
||||
|
||||
export default class FollowerList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
followers: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
try {
|
||||
this.getFollowers();
|
||||
} catch (e) {
|
||||
console.error('followers error: ', e);
|
||||
}
|
||||
}
|
||||
|
||||
async getFollowers() {
|
||||
const response = await fetch(URL_FOLLOWERS);
|
||||
const followers = await response.json();
|
||||
|
||||
this.setState({ followers: followers });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { followers } = this.state;
|
||||
if (!followers) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const noFollowersInfo = html`<div>
|
||||
<p class="mb-5 text-2xl">Be the first to follow this live stream.</p>
|
||||
<p class="text-md">
|
||||
By following this stream you'll get updates when it goes live, receive
|
||||
posts from the streamer, and be featured here as a follower.
|
||||
</p>
|
||||
<p class="text-md mt-5">
|
||||
Learn more about ${' '}
|
||||
<a class="underline" href="https://en.wikipedia.org/wiki/Fediverse"
|
||||
>The Fediverse</a
|
||||
>, where you can follow this server as well as so much more.
|
||||
</p>
|
||||
</div>`;
|
||||
|
||||
return html`
|
||||
<div class="flex flex-wrap">
|
||||
${followers.length === 0 && noFollowersInfo}
|
||||
${followers.map((follower) => {
|
||||
return html` <${SingleFollower} user=${follower} /> `;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function SingleFollower(props) {
|
||||
const { user } = props;
|
||||
const { name, username, link, image } = user;
|
||||
|
||||
var displayName = name;
|
||||
var displayUsername = username;
|
||||
|
||||
if (!displayName) {
|
||||
displayName = displayUsername.split('@', 1)[0];
|
||||
}
|
||||
return html`
|
||||
<a
|
||||
href=${link}
|
||||
class="following-list-follower block bg-white flex p-2 rounded-xl shadow border hover:no-underline m-4"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="${image || '/img/logo.svg'}"
|
||||
class="w-16 h-16 rounded-full"
|
||||
onError=${({ currentTarget }) => {
|
||||
currentTarget.onerror = null;
|
||||
currentTarget.src = '/img/logo.svg';
|
||||
}}
|
||||
/>
|
||||
<div class="p-3 truncate flex-grow">
|
||||
<p class="font-semibold text-gray-700 truncate">${displayName}</p>
|
||||
<p class="text-sm text-gray-500 truncate">${displayUsername}</p>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
196
webroot/js/components/fediverse-follow-modal.js
Normal file
196
webroot/js/components/fediverse-follow-modal.js
Normal file
@@ -0,0 +1,196 @@
|
||||
import { h, Component } from '/js/web_modules/preact.js';
|
||||
import htm from '/js/web_modules/htm.js';
|
||||
import { ExternalActionButton } from './external-action-modal.js';
|
||||
|
||||
const html = htm.bind(h);
|
||||
|
||||
function validateAccount(account) {
|
||||
account = account.replace(/^@+/, '');
|
||||
var regex =
|
||||
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return regex.test(String(account).toLowerCase());
|
||||
}
|
||||
|
||||
export default class FediverseFollowModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.remoteFollowButtonPressed = this.remoteFollowButtonPressed.bind(this);
|
||||
|
||||
this.state = {
|
||||
errorMessage: null,
|
||||
value: '',
|
||||
loading: false,
|
||||
valid: false,
|
||||
};
|
||||
}
|
||||
|
||||
async remoteFollowButtonPressed() {
|
||||
if (!this.state.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ loading: true, errorMessage: null });
|
||||
const { value } = this.state;
|
||||
const { onClose } = this.props;
|
||||
|
||||
const account = value.replace(/^@+/, '');
|
||||
const request = { account: account };
|
||||
const requestURL = '/api/remotefollow';
|
||||
const rawResponse = await fetch(requestURL, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(request),
|
||||
});
|
||||
const result = await rawResponse.json();
|
||||
|
||||
if (!result.redirectUrl) {
|
||||
this.setState({ errorMessage: result.message, loading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
window.open(result.redirectUrl, '_blank');
|
||||
onClose();
|
||||
}
|
||||
|
||||
navigateToFediverseJoinPage() {
|
||||
window.open('https://owncast.online/join-fediverse', '_blank');
|
||||
}
|
||||
|
||||
onInput = (e) => {
|
||||
const { value } = e.target;
|
||||
const valid = validateAccount(value);
|
||||
this.setState({ value, valid });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { name, federationInfo = {}, logo } = this.props;
|
||||
const { account } = federationInfo;
|
||||
const { errorMessage, value, valid, loading } = this.state;
|
||||
const buttonState = valid ? '' : 'cursor-not-allowed opacity-50';
|
||||
|
||||
const error = errorMessage
|
||||
? html`
|
||||
<div
|
||||
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<div class="font-bold mb-2">
|
||||
There was an error following this Owncast server.
|
||||
</div>
|
||||
<span class="block">
|
||||
Please verify you entered the correct user account. It's also
|
||||
possible your server may not support remote following, so you may
|
||||
want to manually follow ${' '}
|
||||
<span class="font-semibold">${account}</span> using your service's
|
||||
own interface.
|
||||
</span>
|
||||
<div class="block mt-2">
|
||||
Server error: <span class="">${errorMessage}</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: null;
|
||||
|
||||
const loaderStyle = loading ? 'flex' : 'none';
|
||||
|
||||
return html`
|
||||
<div class="bg-gray-100 bg-center bg-no-repeat p-4">
|
||||
<p class="text-gray-700 text-md">
|
||||
By following this stream you'll get posts and notifications such as
|
||||
when it goes live.
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="p-4 my-2 rounded bg-gray-300 border border-indigo-400 border-solid flex items-center justify-start"
|
||||
>
|
||||
<img src=${logo} style=${{ height: '3em', width: '3em' }} />
|
||||
<p class="ml-4">
|
||||
<span class="font-bold">${name}</span>
|
||||
<br />
|
||||
<span class="">${account}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
${error}
|
||||
|
||||
<div class="mb34">
|
||||
<label
|
||||
class="block text-gray-700 text-sm font-semibold mt-6"
|
||||
for="username"
|
||||
>
|
||||
Enter your username@server to follow:
|
||||
</label>
|
||||
<input
|
||||
onInput=${this.onInput}
|
||||
value="${value}"
|
||||
class="border bg-white rounded w-full py-2 px-3 mb-2 mt-2 text-indigo-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="Fediverse account@instance.tld"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 text-xs italic">
|
||||
You'll be redirected to your Fediverse server and asked to confirm
|
||||
this action. ${' '}
|
||||
<a
|
||||
class=" text-blue-500"
|
||||
href="https://owncast.online/join-fediverse"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Join the Fediverse if you haven't.</a
|
||||
>
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 mt-6 px-4 rounded focus:outline-none focus:shadow-outline ${buttonState}"
|
||||
type="button"
|
||||
onClick=${this.remoteFollowButtonPressed}
|
||||
>
|
||||
Follow
|
||||
</button>
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 ml-4 mt-6 px-4 rounded focus:outline-none focus:shadow-outline"
|
||||
type="button"
|
||||
onClick=${this.navigateToFediverseJoinPage}
|
||||
>
|
||||
Join the Fediverse
|
||||
</button>
|
||||
<div
|
||||
id="follow-loading-spinner-container"
|
||||
style="display: ${loaderStyle}"
|
||||
>
|
||||
<img id="follow-loading-spinner" src="/img/loading.gif" />
|
||||
<p class="text-gray-700 text-lg">Contacting your server.</p>
|
||||
<p class="text-gray-600 text-lg">Please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export function FediverseFollowButton({ serverName, federationInfo, onClick }) {
|
||||
const fediverseFollowAction = {
|
||||
color: 'rgba(28, 26, 59, 1)',
|
||||
description: `Follow ${serverName} at ${federationInfo.account}`,
|
||||
icon: '/img/fediverse-color.png',
|
||||
openExternally: false,
|
||||
title: `Follow ${serverName}`,
|
||||
url: '',
|
||||
};
|
||||
|
||||
const handleClick = () => onClick(fediverseFollowAction);
|
||||
return html`
|
||||
<span id="fediverse-follow-button-container">
|
||||
<${ExternalActionButton}
|
||||
onClick=${handleClick}
|
||||
action=${fediverseFollowAction}
|
||||
label=${`Follow ${
|
||||
federationInfo.followerCount > 10
|
||||
? ` (${federationInfo.followerCount})`
|
||||
: ''
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
@@ -1,64 +1,70 @@
|
||||
import {h} from '/js/web_modules/preact.js';
|
||||
import { h } from '/js/web_modules/preact.js';
|
||||
import htm from '/js/web_modules/htm.js';
|
||||
import {classNames} from '../utils/helpers.js';
|
||||
import { classNames } from '../utils/helpers.js';
|
||||
|
||||
const html = htm.bind(h);
|
||||
|
||||
function SocialIcon(props) {
|
||||
const {platform, icon, url} = props;
|
||||
const iconSupplied = !!icon
|
||||
const { platform, icon, url } = props;
|
||||
const iconSupplied = !!icon;
|
||||
const name = platform;
|
||||
|
||||
const finalIcon = iconSupplied ? icon : '/img/platformlogos/default.svg';
|
||||
|
||||
const style = `background-image: url(${finalIcon});`
|
||||
const style = `background-image: url(${finalIcon});`;
|
||||
|
||||
const itemClass = classNames({
|
||||
"user-social-item": true,
|
||||
"flex": true,
|
||||
"justify-start": true,
|
||||
"items-center": true,
|
||||
"-mr-1": true,
|
||||
'user-social-item': true,
|
||||
flex: true,
|
||||
'justify-start': true,
|
||||
'items-center': true,
|
||||
'm-1': true,
|
||||
});
|
||||
const labelClass = classNames({
|
||||
"platform-label": true,
|
||||
"visually-hidden": !!finalIcon,
|
||||
"text-indigo-800": true,
|
||||
"text-xs": true,
|
||||
"uppercase": true,
|
||||
"max-w-xs": true,
|
||||
"inline-block": true,
|
||||
'platform-label': true,
|
||||
'visually-hidden': !!finalIcon,
|
||||
'text-indigo-800': true,
|
||||
'text-xs': true,
|
||||
uppercase: true,
|
||||
'max-w-xs': true,
|
||||
'inline-block': true,
|
||||
});
|
||||
|
||||
return (
|
||||
html`
|
||||
<a class=${itemClass} target="_blank" rel="me" href=${url}>
|
||||
<span class="platform-icon rounded-lg bg-no-repeat"
|
||||
style=${style} title="Find me on ${name}"></span>
|
||||
<span class=${labelClass}>Find me on ${name}</span>
|
||||
</a>
|
||||
`);
|
||||
return html`
|
||||
<a class=${itemClass} target="_blank" rel="me" href=${url}>
|
||||
<span
|
||||
class="platform-icon rounded-lg bg-no-repeat"
|
||||
style=${style}
|
||||
title="Find me on ${name}"
|
||||
></span>
|
||||
<span class=${labelClass}>Find me on ${name}</span>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
export default function (props) {
|
||||
const {handles} = props;
|
||||
const { handles } = props;
|
||||
if (handles == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const list = handles.map((item, index) => html`
|
||||
<li key="social${index}">
|
||||
<${SocialIcon} platform=${item.platform} icon=${item.icon}
|
||||
url=${item.url}/>
|
||||
</li>
|
||||
`);
|
||||
const list = handles.map(
|
||||
(item, index) => html`
|
||||
<li key="social${index}">
|
||||
<${SocialIcon}
|
||||
platform=${item.platform}
|
||||
icon=${item.icon}
|
||||
url=${item.url}
|
||||
/>
|
||||
</li>
|
||||
`
|
||||
);
|
||||
|
||||
return html`
|
||||
<ul
|
||||
id="social-list"
|
||||
class="social-list flex flex-row items-center justify-start flex-wrap">
|
||||
<span
|
||||
class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
|
||||
return html` <ul id="social-list" class="social-list m-2 text-center">
|
||||
<p
|
||||
class="follow-icon-list flex flex-row items-center justify-center flex-wrap"
|
||||
>
|
||||
${list}
|
||||
</ul>`;
|
||||
</p>
|
||||
</ul>`;
|
||||
}
|
||||
|
||||
70
webroot/js/components/tab-bar.js
Normal file
70
webroot/js/components/tab-bar.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import { h, Component } from '/js/web_modules/preact.js';
|
||||
|
||||
import htm from '/js/web_modules/htm.js';
|
||||
|
||||
const html = htm.bind(h);
|
||||
|
||||
export default class TabBar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeIndex: 0,
|
||||
};
|
||||
|
||||
this.handleTabClick = this.handleTabClick.bind(this);
|
||||
}
|
||||
|
||||
handleTabClick(index) {
|
||||
this.setState({ activeIndex: index });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { tabs, ariaLabel } = this.props;
|
||||
if (!tabs.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (tabs.length === 1) {
|
||||
return html`
|
||||
${tabs[0].content}
|
||||
`;
|
||||
|
||||
} else {
|
||||
return html`
|
||||
<div class="tab-bar">
|
||||
<div role="tablist" aria-label=${ariaLabel}>
|
||||
${
|
||||
tabs.map((tabItem, index) => {
|
||||
const handleClick = () => this.handleTabClick(index);
|
||||
return html`
|
||||
<button
|
||||
role="tab"
|
||||
aria-selected=${index === this.state.activeIndex}
|
||||
aria-controls=${`tabContent${index}`}
|
||||
id=${`tab-${tabItem.label}`}
|
||||
onclick=${handleClick}
|
||||
>${tabItem.label}</button>
|
||||
`;
|
||||
})
|
||||
}
|
||||
</div>
|
||||
${
|
||||
tabs.map((tabItem, index) => {
|
||||
return html`
|
||||
<div
|
||||
tabindex="0"
|
||||
role="tabpanel"
|
||||
id=${`tabContent${index}`}
|
||||
aria-labelledby=${`tab-${tabItem.label}`}
|
||||
hidden=${index !== this.state.activeIndex}
|
||||
>
|
||||
${tabItem.content}
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -43,11 +43,13 @@ export function generatePlaceholderText(isEnabled, hasSentFirstChatMessage) {
|
||||
export function extraUserNamesFromMessageHistory(messages) {
|
||||
const list = [];
|
||||
if (messages) {
|
||||
messages.forEach(function (message) {
|
||||
if (!list.includes(message.user.displayName)) {
|
||||
list.push(message.user.displayName);
|
||||
}
|
||||
});
|
||||
messages
|
||||
.filter((m) => m.user && m.user.displayName)
|
||||
.forEach(function (message) {
|
||||
if (!list.includes(message.user.displayName)) {
|
||||
list.push(message.user.displayName);
|
||||
}
|
||||
});
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@ export const URL_WEBSOCKET = `${
|
||||
location.protocol === 'https:' ? 'wss' : 'ws'
|
||||
}://${location.host}/ws`;
|
||||
export const URL_CHAT_REGISTRATION = `/api/chat/register`;
|
||||
export const URL_FOLLOWERS = `/api/followers`;
|
||||
|
||||
export const TIMER_STATUS_UPDATE = 5000; // ms
|
||||
export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
|
||||
|
||||
@@ -177,3 +177,24 @@ export function makeLastOnlineString(timestamp) {
|
||||
|
||||
return `Last live: ${string}`;
|
||||
}
|
||||
|
||||
|
||||
// Routing & Tabs
|
||||
export const ROUTE_RECORDINGS = 'recordings';
|
||||
export const ROUTE_SCHEDULE = 'schedule';
|
||||
// looks for `/recording|schedule/id` pattern to determine what to display from the tab view
|
||||
export function checkUrlPathForDisplay() {
|
||||
const pathTest = [ROUTE_RECORDINGS, ROUTE_SCHEDULE];
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
|
||||
if (pathParts.length >= 2) {
|
||||
const part = pathParts[1].toLowerCase();
|
||||
if (pathTest.includes(part)) {
|
||||
return {
|
||||
section: part,
|
||||
sectionId: pathParts[2] || '',
|
||||
};
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -12,6 +12,9 @@ export const SOCKET_MESSAGE_TYPES = {
|
||||
SYSTEM: 'SYSTEM',
|
||||
USER_JOINED: 'USER_JOINED',
|
||||
CHAT_ACTION: 'CHAT_ACTION',
|
||||
FEDIVERSE_ENGAGEMENT_FOLLOW: 'FEDIVERSE_ENGAGEMENT_FOLLOW',
|
||||
FEDIVERSE_ENGAGEMENT_LIKE: 'FEDIVERSE_ENGAGEMENT_LIKE',
|
||||
FEDIVERSE_ENGAGEMENT_REPOST: 'FEDIVERSE_ENGAGEMENT_REPOST',
|
||||
CONNECTED_USER_INFO: 'CONNECTED_USER_INFO',
|
||||
ERROR_USER_DISABLED: 'ERROR_USER_DISABLED',
|
||||
ERROR_NEEDS_REGISTRATION: 'ERROR_NEEDS_REGISTRATION',
|
||||
|
||||
Reference in New Issue
Block a user