Merge pull request ajayyy#2355 from FelixFourcolor/segment-list-default-tab

Add option to configure segment list default tab

Author: ajayyy

public/_locales

@@ -329,6 +329,17 @@
 							</label>
 						</div>
 					</div>
+
+					<br />
+
+					<div data-type="selector" data-sync="segmentListDefaultTab">
+						<label class="optionLabel" for="segmentListDefaultTab">__MSG_segmentListDefaultTab__:</label>
+
+						<select id="segmentListDefaultTab" class="selector-element optionsSelector">
+							<option value="0">__MSG_SegmentsCap__</option>
+							<option value="1">__MSG_Chapters__</option>
+						</select>
+					</div>
 				</div>
 
 				<div data-type="toggle" data-sync="darkMode">

public/options/options.html

@@ -1,6 +1,6 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
+import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType, SegmentListDefaultTab } from "./types";
 import { Keybind, ProtoConfig, keybindEquals } from "../maze-utils/src/config";
 import { HashedValue } from "../maze-utils/src/hash";
 import { Permission, AdvancedSkipRuleSet } from "./utils/skipRule";
@@ -10,6 +10,7 @@ interface SBConfig {
     isVip: boolean;
     permissions: Record<Category, Permission>;
     defaultCategory: Category;
+    segmentListDefaultTab: SegmentListDefaultTab;
     renderSegmentsAsChapters: boolean;
     forceChannelCheck: boolean;
     minutesSaved: number;
@@ -337,6 +338,7 @@ const syncDefaults = {
     isVip: false,
     permissions: {},
     defaultCategory: "chooseACategory" as Category,
+    segmentListDefaultTab: SegmentListDefaultTab.Segments,
     renderSegmentsAsChapters: false,
     forceChannelCheck: false,
     minutesSaved: 0,

src/config.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ActionType, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
+import { ActionType, SegmentListDefaultTab, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
 import Config from "../config";
 import { waitFor } from "../../maze-utils/src";
 import { shortCategoryName } from "../utils/categoryUtils";
@@ -61,12 +61,21 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
     }, [props.segments]);
 
     React.useEffect(() => {
-        if (hasSegments){
-            setTab(SegmentListTab.Segments);
+        const setTabBasedOnConfig = () => {
+            const preferChapters = Config.config.segmentListDefaultTab === SegmentListDefaultTab.Chapters;
+            if (preferChapters) {
+                setTab(hasChapters ? SegmentListTab.Chapter : SegmentListTab.Segments);
+            } else {
+                setTab(hasSegments ? SegmentListTab.Segments : SegmentListTab.Chapter);
+            }
+        };
+
+        if (Config.isReady()) {
+            setTabBasedOnConfig();
         } else {
-            setTab(SegmentListTab.Chapter);
+            waitFor(() => Config.isReady()).then(setTabBasedOnConfig);
         }
-    }, [props.videoID, hasSegments]);
+    }, [props.videoID, hasSegments, hasChapters]);
 
     const segmentsWithNesting = React.useMemo(() => {
         const result: SegmentWithNesting[] = [];

src/popup/SegmentListComponent.tsx

@@ -227,4 +227,9 @@ export enum NoticeVisibilityMode {
     MiniForAll = 2,
     FadedForAutoSkip = 3,
     FadedForAll = 4
+}
+
+export enum SegmentListDefaultTab {
+    Segments,
+    Chapters,
 }