🆕 YoutubeTV Broadcasting in rooms !

2026-06-20 15:36:18 +00:00 · 2026-04-10 09:26:50 +02:00
parent c7348a9509
commit 4afdfd8f33
7 changed files with 98 additions and 11 deletions
@@ -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>
+        </>
+    );
+};