diff --git a/public/UITexts.example b/public/UITexts.example index b75666b..d872126 100644 --- a/public/UITexts.example +++ b/public/UITexts.example @@ -17,5 +17,7 @@ "widget.room.chat.hide_avatars": "Verberg avatars", "widget.room.chat.hide_balloon": "Verberg Spreekballon", "widget.room.chat.show_balloon": "Spreekballon", - "widget.room.chat.clear_history": "leeg geschiedenis" + "widget.room.chat.clear_history": "leeg geschiedenis", + "widget.room.youtube.shared": "YouTube word gedeeld", + "widget.room.youtube.open_video": "Open de video" } diff --git a/src/api/utils/RoomChatFormatter.ts b/src/api/utils/RoomChatFormatter.ts index f87840b..6ca8964 100644 --- a/src/api/utils/RoomChatFormatter.ts +++ b/src/api/utils/RoomChatFormatter.ts @@ -1,3 +1,6 @@ +import { GetConfigurationValue } from '../nitro/GetConfigurationValue'; +import { LocalizeText } from './LocalizeText'; + const allowedColours: Map = new Map(); allowedColours.set('r', 'red'); @@ -44,6 +47,16 @@ export const RoomChatFormatter = (content: string) => content = encodeHTML(content); //content = (joypixels.shortnameToUnicode(content) as string) + if(!GetConfigurationValue('youtube.publish.disabled', false)) + { + const labelShared = LocalizeText('widget.room.youtube.shared'); + const labelOpen = LocalizeText('widget.room.youtube.open_video'); + content = content.replace( + /(?:http:\/\/|https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?.*v=|shorts\/)?([a-zA-Z0-9_-]{11})/g, + `
📺 ${ labelShared }
▶ ${ labelOpen }
` + ); + } + if(content.startsWith('@') && content.indexOf('@', 1) > -1) { let match = null; diff --git a/src/components/MainView.tsx b/src/components/MainView.tsx index e8b838d..3fef0cc 100644 --- a/src/components/MainView.tsx +++ b/src/components/MainView.tsx @@ -27,6 +27,7 @@ import { ToolbarView } from './toolbar/ToolbarView'; import { UserProfileView } from './user-profile/UserProfileView'; import { UserSettingsView } from './user-settings/UserSettingsView'; import { WiredView } from './wired/WiredView'; +import { YoutubeTvView } from './youtube-tv/YoutubeTvView'; export const MainView: FC<{}> = props => { @@ -114,6 +115,7 @@ export const MainView: FC<{}> = props => + ); }; diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx index bb5db40..8e6c819 100644 --- a/src/components/chat-history/ChatHistoryView.tsx +++ b/src/components/chat-history/ChatHistoryView.tsx @@ -2,13 +2,14 @@ import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from ' import { FC, useEffect, useMemo, useRef, useState } from 'react'; import { ChatEntryType, LocalizeText } from '../../api'; import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common'; -import { useChatHistory } from '../../hooks'; +import { useChatHistory, useOnClickChat } from '../../hooks'; import { NitroInput } from '../../layout'; export const ChatHistoryView: FC<{}> = props => { const [isVisible, setIsVisible] = useState(false); const [searchText, setSearchText] = useState(''); const {chatHistory = []} = useChatHistory(); + const { onClickChat } = useOnClickChat(); const elementRef = useRef(null); const isFirstRender = useRef(true); const prevChatLength = useRef(0); @@ -94,7 +95,7 @@ export const ChatHistoryView: FC<{}> = props => {
- +
diff --git a/src/components/room/widgets/chat/ChatWidgetMessageView.tsx b/src/components/room/widgets/chat/ChatWidgetMessageView.tsx index 9163f2b..c19bb3c 100644 --- a/src/components/room/widgets/chat/ChatWidgetMessageView.tsx +++ b/src/components/room/widgets/chat/ChatWidgetMessageView.tsx @@ -1,6 +1,7 @@ import { GetRoomEngine, RoomChatSettings, RoomObjectCategory } from '@nitrots/nitro-renderer'; import { FC, useEffect, useMemo, useRef, useState } from 'react'; import { ChatBubbleMessage } from '../../../../api'; +import { useOnClickChat } from '../../../../hooks'; interface ChatWidgetMessageViewProps { @@ -18,6 +19,7 @@ export const ChatWidgetMessageView: FC = ({ const [ isVisible, setIsVisible ] = useState(false); const [ isReady, setIsReady ] = useState(false); const elementRef = useRef(null); + const { onClickChat } = useOnClickChat(); const getBubbleWidth = useMemo(() => { @@ -90,7 +92,7 @@ export const ChatWidgetMessageView: FC = ({
- +
diff --git a/src/components/youtube-tv/YoutubeTvView.tsx b/src/components/youtube-tv/YoutubeTvView.tsx new file mode 100644 index 0000000..166bcc3 --- /dev/null +++ b/src/components/youtube-tv/YoutubeTvView.tsx @@ -0,0 +1,57 @@ +import { AddLinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer'; +import { FC, useEffect, useMemo, useState } from 'react'; +import { GetConfigurationValue } from '../../api'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; + +export const YoutubeTvView: FC<{}> = props => +{ + const [ videoId, setVideoId ] = useState(''); + const [ isVisible, setIsVisible ] = useState(false); + + const close = () => setIsVisible(false); + + useEffect(() => + { + const linkTracker: ILinkEventTracker = { + linkReceived: (url: string) => + { + const parts = url.split('/'); + + if(parts.length < 3) return; + + switch(parts[1]) + { + case 'show': + setVideoId(parts[2]); + setIsVisible(true); + return; + } + }, + eventUrlPrefix: 'youtube-tv/' + }; + + AddLinkEventTracker(linkTracker); + + return () => RemoveLinkEventTracker(linkTracker); + }, []); + + const originUrl = useMemo(() => GetConfigurationValue('url.prefix', ''), []); + + if(!isVisible) return null; + + return ( + + + + { (videoId.length > 0) && +