duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆕 YoutubeTV Broadcasting in rooms !

Browse Source
This commit is contained in:
duckietm
2026-04-10 09:26:50 +02:00
parent c7348a9509
commit 4afdfd8f33
7 changed files with 98 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/index.ts
+1
View File
@@ -26,3 +26,4 @@ export * from './room/widgets';
export * from './user';
export * from './utils';
export * from './wired';
export * from './youtube';
src/api/youtube/YouTubeRoomState.ts
+4
View File
@@ -0,0 +1,4 @@
let _youtubeEnabled = false;
export const getYoutubeRoomEnabled = () => _youtubeEnabled;
export const setYoutubeRoomEnabled = (enabled: boolean) => { _youtubeEnabled = enabled; };
src/api/youtube/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './YouTubeRoomState';
src/components/navigator/views/room-settings/NavigatorRoomSettingsMiscTabView.tsx
+58
View File
@@ -0,0 +1,58 @@
import { YouTubeRoomSettingsComposer, YouTubeRoomSettingsEvent } from '@nitrots/nitro-renderer';
import { FC, useState } from 'react';
import { getYoutubeRoomEnabled, IRoomData, LocalizeText, SendMessageComposer, setYoutubeRoomEnabled } from '../../../../api';
import { useMessageEvent } from '../../../../hooks';
interface NavigatorRoomSettingsMiscTabViewProps
{
roomData: IRoomData;
}
export const NavigatorRoomSettingsMiscTabView: FC<NavigatorRoomSettingsMiscTabViewProps> = props =>
{
const { roomData = null } = props;
const [ youtubeEnabled, setYoutubeEnabled ] = useState(getYoutubeRoomEnabled());
const [ cooldown, setCooldown ] = useState(false);
useMessageEvent<YouTubeRoomSettingsEvent>(YouTubeRoomSettingsEvent, event =>
{
setYoutubeEnabled(event.getParser().youtubeEnabled);
});
const toggleYouTube = (enabled: boolean) =>
{
if (cooldown) return;
setYoutubeEnabled(enabled);
setYoutubeRoomEnabled(enabled);
SendMessageComposer(new YouTubeRoomSettingsComposer(enabled));
setCooldown(true);
setTimeout(() => setCooldown(false), 300);
};
return (
<>
<div className="mb-3">
<div className="font-bold text-sm mb-2">{ LocalizeText('product.type.other') }</div>
</div>
<div className="flex flex-col gap-3">
<div className={`p-3 rounded transition-colors ${cooldown ? 'bg-gray-200 opacity-60' : 'bg-gray-100'}`}>
<div className="flex items-center justify-between">
<div>
<div className="font-bold text-sm">📺 YouTube TV</div>
<div className="text-xs text-gray-500">Allow YouTube video broadcasting in this room</div>
</div>
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
checked={ youtubeEnabled }
disabled={ cooldown }
onChange={ e => toggleYouTube(e.target.checked) }
className="w-5 h-5"
/>
</label>
</div>
</div>
</div>
</>
);
};
src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
+5 -1
View File
@@ -7,6 +7,7 @@ import { NavigatorRoomSettingsAccessTabView } from './NavigatorRoomSettingsAcces
import { NavigatorRoomSettingsBasicTabView } from './NavigatorRoomSettingsBasicTabView';
import { NavigatorRoomSettingsModTabView } from './NavigatorRoomSettingsModTabView';
import { NavigatorRoomSettingsRightsTabView } from './NavigatorRoomSettingsRightsTabView';
import { NavigatorRoomSettingsMiscTabView } from './NavigatorRoomSettingsMiscTabView';
import { NavigatorRoomSettingsVipChatTabView } from './NavigatorRoomSettingsVipChatTabView';
const TABS: string[] = [
@@ -14,7 +15,8 @@ const TABS: string[] = [
'navigator.roomsettings.tab.2',
'navigator.roomsettings.tab.3',
'navigator.roomsettings.tab.4',
'navigator.roomsettings.tab.5'
'navigator.roomsettings.tab.5',
'product.type.other'
];
export const NavigatorRoomSettingsView: FC<{}> = props =>
@@ -205,6 +207,8 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
<NavigatorRoomSettingsVipChatTabView handleChange={ handleChange } roomData={ roomData } /> }
{ (currentTab === TABS[4]) &&
<NavigatorRoomSettingsModTabView handleChange={ handleChange } roomData={ roomData } /> }
{ (currentTab === TABS[5]) &&
<NavigatorRoomSettingsMiscTabView roomData={ roomData } /> }
</NitroCardContentView>
</NitroCardView>
);
src/components/toolbar/ToolbarView.tsx
+21 -5
View File
@@ -1,7 +1,7 @@
import { CreateLinkEvent, Dispose, DropBounce, EaseOut, GetSessionDataManager, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
import { CreateLinkEvent, Dispose, DropBounce, EaseOut, GetSessionDataManager, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait, YouTubeRoomSettingsEvent } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useState } from 'react';
import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
import { FC, useEffect, useState } from 'react';
import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
import { ToolbarItemView } from './ToolbarItemView';
@@ -13,6 +13,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
const { isInRoom } = props;
const [ isMeExpanded, setMeExpanded ] = useState(false);
const [ useGuideTool, setUseGuideTool ] = useState(false);
const [ youtubeEnabled, setYoutubeEnabled ] = useState(false);
const { userFigure = null } = useSessionInfo();
const { getFullCount = 0 } = useInventoryUnseenTracker();
const { getTotalUnseen = 0 } = useAchievements();
@@ -20,6 +21,20 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
const { iconState = MessengerIconState.HIDDEN } = useMessenger();
const isMod = GetSessionDataManager().isModerator;
useMessageEvent<YouTubeRoomSettingsEvent>(YouTubeRoomSettingsEvent, event =>
{
const enabled = event.getParser().youtubeEnabled;
setYoutubeEnabled(enabled);
setYoutubeRoomEnabled(enabled);
});
useEffect(() => {
if (!isInRoom) {
setYoutubeEnabled(false);
setYoutubeRoomEnabled(false);
}
}, [isInRoom]);
const openYouTubePlayer = () =>
{
window.dispatchEvent(new CustomEvent('youtube:toggle'));
@@ -71,7 +86,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
return (
<>
<YouTubePlayerView />
{ youtubeEnabled && <YouTubePlayerView /> }
<AnimatePresence> { isMeExpanded && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
</motion.div> )}
@@ -101,7 +116,8 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
</ToolbarItemView>
{ isInRoom &&
<ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
<ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } />
{ youtubeEnabled &&
<ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } /> }
{ isMod &&
<ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
{ isMod &&
src/components/toolbar/YouTubePlayerView.tsx
+8 -5
View File
@@ -1,7 +1,7 @@
import { ControlYoutubeDisplayPlaybackMessageComposer, YouTubeRoomBroadcastEvent, YouTubeRoomPlayComposer, YouTubeRoomWatchersEvent, YouTubeRoomWatchingComposer } from "@nitrots/nitro-renderer";
import { ControlYoutubeDisplayPlaybackMessageComposer, YouTubeRoomBroadcastEvent, YouTubeRoomPlayComposer, YouTubeRoomSettingsEvent, YouTubeRoomWatchersEvent, YouTubeRoomWatchingComposer } from "@nitrots/nitro-renderer";
import { FC, useEffect, useRef, useState } from "react";
import YouTube from "react-youtube";
import { GetRoomSession, GetSessionDataManager, LocalizeText, SendMessageComposer, YoutubeVideoPlaybackStateEnum } from "../../api";
import { GetRoomSession, getYoutubeRoomEnabled, GetSessionDataManager, LocalizeText, SendMessageComposer, YoutubeVideoPlaybackStateEnum } from "../../api";
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, LayoutAvatarImageView } from "../../common";
import { useFurnitureYoutubeWidget, useMessageEvent } from "../../hooks";
@@ -36,14 +36,17 @@ export const YouTubePlayerView: FC<{}> = () => {
const [history, setHistory] = useState<string[]>([]);
const [showVolumeSlider, setShowVolumeSlider] = useState(true);
const playerRef = useRef<any>(null);
const { objectId: youtubeObjectId, videoId: roomVideoId, currentVideoState, hasControl } = useFurnitureYoutubeWidget();
const [spectators, setSpectators] = useState< { id: number; name: string; look: string }[] >([]);
const [broadcastVideo, setBroadcastVideo] = useState("");
const [broadcastSender, setBroadcastSender] = useState("");
const [broadcastPlaylist, setBroadcastPlaylist] = useState<string[]>([]);
const [watcherIds, setWatcherIds] = useState<Set<number>>(new Set());
const [youtubeEnabled, setYoutubeEnabled] = useState(getYoutubeRoomEnabled());
useMessageEvent<YouTubeRoomSettingsEvent>(YouTubeRoomSettingsEvent, event => {
setYoutubeEnabled(event.getParser().youtubeEnabled);
});
useMessageEvent<YouTubeRoomBroadcastEvent>(YouTubeRoomBroadcastEvent, event => {
const parser = event.getParser();
setBroadcastVideo(parser.videoId);
@@ -385,7 +388,7 @@ export const YouTubePlayerView: FC<{}> = () => {
className={`flex-1 p-2 rounded text-white text-sm ${(!!broadcastVideo && !isMyRoom) ? "bg-gray-800" : "bg-gray-700"}`}
placeholder="YouTube URL / video ID"
/>
{isMyRoom && videoId && (
{isMyRoom && youtubeEnabled && videoId && (
<button
onClick={() => {
try {