Merge pull request online-go#2732 from RubyMineshaft/gotv

GoTV Updates

src/lib/preferences.ts

@@ -154,6 +154,12 @@ export const defaults = {
 
     "analysis.pencil-color": "#004cff",
     "analysis.score-color": "#3ACC2B",
+
+    "gotv.selected-chat": "Twitch",
+    "gotv.expand-chat-pane": false,
+    "gotv.show-gotv-indicator": true,
+    "gotv.auto-select-top-stream": true,
+    "gotv.allow-mature-streams": false,
 };
 
 defaults["profanity-filter"][current_language] = true;

src/views/GoTV/GoTV.tsx

@@ -23,8 +23,9 @@ import { EmbeddedChatCard } from "Chat";
 import { StreamCard } from "./StreamCard";
 import { twitchLanguageCodes } from "./twitchLanguageCodes";
 import { _ } from "translate";
+import * as preferences from "preferences";
 
-interface Stream {
+export interface Stream {
     stream_id: string;
     title: string;
     channel: string;
@@ -33,6 +34,7 @@ interface Stream {
     language: string;
     thumbnail_url: string;
     source: string;
+    is_mature: boolean;
 }
 
 interface LanguageCodes {
@@ -50,23 +52,29 @@ export const GoTV = () => {
     const [streams, setStreams] = useState<Stream[]>([]);
     const [selectedStream, setSelectedStream] = useState<Stream | null>(null);
     const [showListPane, setShowListPane] = useState(true);
-    const [showChatPane, setShowChatPane] = useState(false);
+    const [showChatPane, setShowChatPane] = preferences.usePreference("gotv.expand-chat-pane");
     const [filterLanguage, setFilterLanguage] = useState("");
-    const [activeChatTab, setActiveChatTab] = useState("OGS");
+    const [activeChatTab, setActiveChatTab] = preferences.usePreference("gotv.selected-chat");
     const [isLightTheme, setIsLightTheme] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
 
+    const autoplay = preferences.get("gotv.auto-select-top-stream");
+    const allowMatureStreams = preferences.get("gotv.allow-mature-streams");
+
     useEffect(() => {
         const url = "gotv/streams/";
         get(url)
             .then((data: Stream[]) => {
-                const streamsData = data.map((stream) => ({
+                let streamsData = data.map((stream) => ({
                     ...stream,
                     stream_id: String(stream.stream_id),
                 }));
+                streamsData = filterMatureStreams(streamsData);
                 setStreams(streamsData);
                 if (streamsData.length > 0) {
-                    setSelectedStream(streamsData[0]);
+                    if (autoplay) {
+                        setSelectedStream(streamsData[0]);
+                    }
                 } else if (isMobile) {
                     setShowListPane(false);
                 }
@@ -99,11 +107,20 @@ export const GoTV = () => {
         };
     }, []);
 
+    const filterMatureStreams = (streamsData: Stream[]) => {
+        if (!allowMatureStreams) {
+            return streamsData.filter((stream: Stream) => !stream.is_mature);
+        } else {
+            return streamsData;
+        }
+    };
+
     const handleStreamUpdate = (data: any) => {
-        const updatedStreams = JSON.parse(data).map((stream: Stream) => ({
+        let updatedStreams = JSON.parse(data).map((stream: Stream) => ({
             ...stream,
             stream_id: String(stream.stream_id),
         }));
+        updatedStreams = filterMatureStreams(updatedStreams);
         setStreams(updatedStreams);
         if (!selectedStream && updatedStreams.length > 0) {
             setSelectedStream(updatedStreams[0]);
@@ -199,26 +216,37 @@ export const GoTV = () => {
                         <div className="loading-message">{_("Loading streams...")}</div>
                     ) : filteredStreams.length > 0 && selectedStream ? (
                         <iframe
+                            key={selectedStream.stream_id}
                             src={`https://player.twitch.tv/?channel=${selectedStream.channel}&parent=${parentDomain}&autoplay=true&muted=false`}
                             allowFullScreen={true}
                             aria-label={`Live stream of ${selectedStream.title}`}
                         ></iframe>
                     ) : (
-                        <div className="no-streams-available-message">
-                            <h2>{_("No Streams Available")}</h2>
-                            <p>
-                                {_(
-                                    "Unfortunately, there are no live streams available at the moment. Please check back later for exciting Go content.",
-                                )}
-                            </p>
-                            <p>
-                                <strong>{_("Want to see your stream featured here?")}</strong>
-                                <br />{" "}
-                                {_(
-                                    "Stream in the Go category on Twitch or the Board Games category using the go, weiqi, or baduk tags. We welcome all Go enthusiasts to share their games and experiences. Your participation helps grow our community!",
-                                )}
-                            </p>
-                        </div>
+                        <>
+                            {filteredStreams.length > 0 ? (
+                                <div className="select-stream-message">
+                                    <p>{_("Select a stream from the list to start watching")}</p>
+                                </div>
+                            ) : (
+                                <div className="no-streams-available-message">
+                                    <h2>{_("No Streams Available")}</h2>
+                                    <p>
+                                        {_(
+                                            "Unfortunately, there are no live streams available at the moment. Please check back later for exciting Go content.",
+                                        )}
+                                    </p>
+                                    <p>
+                                        <strong>
+                                            {_("Want to see your stream featured here?")}
+                                        </strong>
+                                        <br />{" "}
+                                        {_(
+                                            "Stream in the Go category on Twitch or the Board Games category using the go, weiqi, or baduk tags. We welcome all Go enthusiasts to share their games and experiences. Your participation helps grow our community!",
+                                        )}
+                                    </p>
+                                </div>
+                            )}
+                        </>
                     )}
                 </div>
                 <div

src/views/GoTV/GoTVIndicator.tsx

@@ -14,27 +14,75 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { UIPush } from "UIPush";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import * as preferences from "preferences";
+import { get } from "requests";
+import { Stream } from "GoTV";
 
 export const GoTVIndicator: React.FC = () => {
     const [streamCount, setStreamCount] = useState(0);
+    const [showGoTVIndicator] = preferences.usePreference("gotv.show-gotv-indicator");
+    const [allowMatureStreams] = preferences.usePreference("gotv.allow-mature-streams");
+    const [previousPath, setPreviousPath] = useState<string | null>(null);
+
+    const location = useLocation();
 
     const handleStreamUpdate = (data: any) => {
         const updatedStreams = JSON.parse(data);
-        setStreamCount(updatedStreams.length);
+        setStreamCount(filterStreams(updatedStreams).length);
+    };
+
+    const filterStreams = (streams: Stream[]) => {
+        if (!allowMatureStreams) {
+            return streams.filter((stream: Stream) => !stream.is_mature);
+        }
+        return streams;
+    };
+
+    useEffect(() => {
+        if (showGoTVIndicator) {
+            get("gotv/streams")
+                .then((streams: Stream[]) => {
+                    setStreamCount(filterStreams(streams).length);
+                })
+                .catch((error) => {
+                    console.error("Error fetching streams:", error);
+                });
+        }
+    }, [allowMatureStreams]);
+
+    useEffect(() => {
+        if (location.pathname !== "/gotv") {
+            setPreviousPath(location.pathname);
+        }
+    }, [location.pathname]);
+
+    const setLinkURL = () => {
+        const currentPath = location.pathname;
+
+        if (currentPath === "/gotv") {
+            return previousPath || "/";
+        } else {
+            return "/gotv";
+        }
     };
 
     return (
-        <Link to="/gotv" className="GoTVIndicator" title="GoTV">
+        <>
             <UIPush channel="gotv" event="update_streams" action={handleStreamUpdate} />
-            {streamCount > 0 && (
+
+            {showGoTVIndicator && (
                 <>
-                    <i className="fa fa-tv navbar-icon"></i>
-                    <span className="count">{streamCount}</span>
+                    {streamCount > 0 && (
+                        <Link to={setLinkURL()} className="GoTVIndicator" title="GoTV">
+                            <i className="fa fa-tv navbar-icon"></i>
+                            <span className="count">{streamCount}</span>
+                        </Link>
+                    )}
                 </>
             )}
-        </Link>
+        </>
     );
 };

src/views/GoTV/StreamCard.styl

@@ -110,8 +110,6 @@
         align-items: center
         background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))
         color: white
-        border-bottom-left-radius: 8px
-        border-bottom-right-radius: 8px
 
     .stream-info h3
         margin: 0

src/views/Settings/GoTVPreferences.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C)  Online-Go.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import * as React from "react";
+import { _ } from "translate";
+import { usePreference } from "preferences";
+import { Toggle } from "Toggle";
+import { PreferenceLine } from "SettingsCommon";
+
+export function GoTVPreferences(): JSX.Element {
+    const [showGoTVIndicator, toggleGoTVIndicator] = usePreference("gotv.show-gotv-indicator");
+    const [autoSelect, toggleAutoSelect] = usePreference("gotv.auto-select-top-stream");
+    const [allowMatureStreams, toggleAllowMatureStreams] = usePreference(
+        "gotv.allow-mature-streams",
+    );
+
+    return (
+        <div>
+            <PreferenceLine title={_("Show active streams indicator in navbar")}>
+                <Toggle checked={showGoTVIndicator} onChange={toggleGoTVIndicator} />
+            </PreferenceLine>
+
+            <PreferenceLine title={_("Automatically play top stream on load")}>
+                <Toggle checked={autoSelect} onChange={toggleAutoSelect} />
+            </PreferenceLine>
+
+            <PreferenceLine title={_("Show mature streams")}>
+                <Toggle checked={allowMatureStreams} onChange={toggleAllowMatureStreams} />
+            </PreferenceLine>
+        </div>
+    );
+}

src/views/Settings/Settings.tsx

@@ -50,6 +50,7 @@ import { AnnouncementPreferences } from "./AnnouncementPreferences";
 import { EmailPreferences } from "./EmailPreferences";
 import { HelpSettings } from "./HelpSettings";
 import { Supporter } from "Supporter";
+import { GoTVPreferences } from "./GoTVPreferences";
 
 export function Settings(): JSX.Element {
     const { category } = useParams();
@@ -106,6 +107,7 @@ export function Settings(): JSX.Element {
             { key: "sound", label: _("Sound Preferences") },
             { key: "game", label: _("Game Preferences") },
             { key: "chat", label: _("Chat Preferences") },
+            { key: "gotv", label: _("GoTV Preferences") },
             {
                 key: "supporter",
                 label: (
@@ -150,6 +152,9 @@ export function Settings(): JSX.Element {
         case "chat":
             SelectedPage = ChatPreferences;
             break;
+        case "gotv":
+            SelectedPage = GoTVPreferences;
+            break;
         case "supporter":
             SelectedPage = SupporterSettings;
             break;