From 81f1c454a80e55a53e6e04c59def9e5e5718bbda Mon Sep 17 00:00:00 2001
From: Turing Quantrix <quantrixgunero@gmail.com>
Date: Wed, 18 Feb 2026 16:39:01 -0800
Subject: [PATCH 1/3] feat: 3 - Added user preference for disabling click to
 play/pause and added to settings menu

---
 src/controls/bar/ControlsBar.jsx         |  4 ++++
 src/controls/container/Container.jsx     |  9 ++++++++-
 src/controls/settings/MainMenu.jsx       | 12 ++++++++++++
 src/controls/settings/SettingsButton.jsx | 10 +++++++++-
 src/controls/usePreferences.js           | 22 ++++++++++++++++++++++
 5 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/controls/bar/ControlsBar.jsx b/src/controls/bar/ControlsBar.jsx
index c752ca1..076aa5c 100644
--- a/src/controls/bar/ControlsBar.jsx
+++ b/src/controls/bar/ControlsBar.jsx
@@ -20,6 +20,8 @@ export default function ControlsBar({
   isPlaying,
   handlePlayPause,
   showControls,
+  clickToPlayPause,
+  onClickToPlayChange,
 }) {
   const { volume, isMuted, handleVolumeChange, handleMuteToggle } =
     useVolumeControl(core);
@@ -72,6 +74,8 @@ export default function ControlsBar({
             core={core}
             container={barRef.current}
             shouldShow={shouldShow}
+            clickToPlayPause={clickToPlayPause}
+            onClickToPlayChange={onClickToPlayChange}
           />
 
           <FullscreenButton
diff --git a/src/controls/container/Container.jsx b/src/controls/container/Container.jsx
index df688bb..31afbd7 100644
--- a/src/controls/container/Container.jsx
+++ b/src/controls/container/Container.jsx
@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 import ControlsBar from "../bar/ControlsBar.jsx";
 import { useControlsVisibility } from "./useControlsVisibility.js";
 import { usePlaybackControl } from "../play/usePlaybackControl.js";
+import { usePreferences } from "../usePreferences.js";
 
 export default function Container({ core, videoContainer }) {
   const containerRef = useRef(null);
@@ -11,11 +12,15 @@ export default function Container({ core, videoContainer }) {
     barRef,
   );
   const { isPlaying, handlePlayPause } = usePlaybackControl(core);
+  const { clickToPlayPause, setClickToPlayPause } = usePreferences();
 
   const handleContainerClick = (e) => {
     const isInControlsBar = barRef.current?.contains(e.target);
     if (!isInControlsBar) {
-      handlePlayPause();
+      if (clickToPlayPause) {
+        handlePlayPause();
+      }
+      showControls();
     }
   };
 
@@ -33,6 +38,8 @@ export default function Container({ core, videoContainer }) {
         isPlaying={isPlaying}
         handlePlayPause={handlePlayPause}
         showControls={showControls}
+        clickToPlayPause={clickToPlayPause}
+        onClickToPlayChange={setClickToPlayPause}
       />
     </div>
   );
diff --git a/src/controls/settings/MainMenu.jsx b/src/controls/settings/MainMenu.jsx
index 76c59d6..5e03386 100644
--- a/src/controls/settings/MainMenu.jsx
+++ b/src/controls/settings/MainMenu.jsx
@@ -8,6 +8,8 @@ export default function MainMenu({
   selectedQuality,
   isIvsDebug,
   onIvsDebugChange,
+  clickToPlayPause,
+  onClickToPlayChange,
 }) {
   return (
     <>
@@ -25,6 +27,16 @@ export default function MainMenu({
         </span>
       </DropdownMenu.Item>
 
+      <DropdownMenu.Item
+        className="dropdown__item dropdown__item--nav"
+        onSelect={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <span>Pause on Click</span>
+        <Switch checked={clickToPlayPause} onCheckedChange={onClickToPlayChange} />
+      </DropdownMenu.Item>
+
       {process.env.NODE_ENV === "dev" && (
         <DropdownMenu.Item
           className="dropdown__item dropdown__item--nav"
diff --git a/src/controls/settings/SettingsButton.jsx b/src/controls/settings/SettingsButton.jsx
index 383eb76..83aaa09 100644
--- a/src/controls/settings/SettingsButton.jsx
+++ b/src/controls/settings/SettingsButton.jsx
@@ -10,7 +10,13 @@ import { useSettings } from "./useSettings.js";
 import { useQualitySelector } from "./useQualitySelector.js";
 import { useIvsDebug } from "./useIvsDebug.js";
 
-export default function SettingsButton({ core, container, shouldShow }) {
+export default function SettingsButton({
+  core,
+  container,
+  shouldShow,
+  clickToPlayPause,
+  onClickToPlayChange,
+}) {
   const {
     currentMenu,
     handleOpenChange,
@@ -59,6 +65,8 @@ export default function SettingsButton({ core, container, shouldShow }) {
                 selectedQuality={selectedQuality}
                 isIvsDebug={isIvsDebug}
                 onIvsDebugChange={setIsIvsDebug}
+                clickToPlayPause={clickToPlayPause}
+                onClickToPlayChange={onClickToPlayChange}
               />
             )}
 
diff --git a/src/controls/usePreferences.js b/src/controls/usePreferences.js
index 67741fc..67b9c15 100644
--- a/src/controls/usePreferences.js
+++ b/src/controls/usePreferences.js
@@ -3,6 +3,7 @@ import { useState, useCallback } from "react";
 const QUALITY_STORAGE_KEY = "kickstiny.preference.quality";
 const VOLUME_STORAGE_KEY = "kickstiny.preference.volume";
 const IVS_DEBUG_STORAGE_KEY = "kickstiny.preference.ivsDebug";
+const CLICK_TO_PLAY_PAUSE_STORAGE_KEY = "kickstiny.preference.clickToPlayPause";
 
 const DEFAULT_VOLUME = 100;
 
@@ -36,6 +37,16 @@ export function usePreferences() {
     }
   });
 
+  const [clickToPlayPause, setClickToPlayPauseState] = useState(() => {
+    try {
+      const stored = window.localStorage.getItem(CLICK_TO_PLAY_PAUSE_STORAGE_KEY);
+      return stored !== null ? stored === "true" : true;
+    } catch (err) {
+      console.log("[Kickstiny] Unable to read click to play/pause preference", err);
+      return true;
+    }
+  });
+
   const setSavedQuality = useCallback((value) => {
     try {
       window.localStorage.setItem(QUALITY_STORAGE_KEY, value);
@@ -63,12 +74,23 @@ export function usePreferences() {
     }
   }, []);
 
+  const setClickToPlayPause = useCallback((value) => {
+    try {
+      window.localStorage.setItem(CLICK_TO_PLAY_PAUSE_STORAGE_KEY, value.toString());
+      setClickToPlayPauseState(value);
+    } catch (err) {
+      console.log("[Kickstiny] Unable to persist click to play/pause preference", err);
+    }
+  }, []);
+
   return {
     savedQuality,
     savedVolume,
     isIvsDebug,
+    clickToPlayPause,
     setSavedQuality,
     setSavedVolume,
     setIsIvsDebug,
+    setClickToPlayPause,
   };
 }

From 237f60951d5d7c32dd4a89fcf8fd48298f4726da Mon Sep 17 00:00:00 2001
From: Turing Quantrix <quantrixgunero@gmail.com>
Date: Wed, 18 Feb 2026 16:46:07 -0800
Subject: [PATCH 2/3] fix: #3 - Ran prettier

---
 src/controls/settings/MainMenu.jsx |  5 ++++-
 src/controls/usePreferences.js     | 19 +++++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/controls/settings/MainMenu.jsx b/src/controls/settings/MainMenu.jsx
index 5e03386..c76d6f4 100644
--- a/src/controls/settings/MainMenu.jsx
+++ b/src/controls/settings/MainMenu.jsx
@@ -34,7 +34,10 @@ export default function MainMenu({
         }}
       >
         <span>Pause on Click</span>
-        <Switch checked={clickToPlayPause} onCheckedChange={onClickToPlayChange} />
+        <Switch
+          checked={clickToPlayPause}
+          onCheckedChange={onClickToPlayChange}
+        />
       </DropdownMenu.Item>
 
       {process.env.NODE_ENV === "dev" && (
diff --git a/src/controls/usePreferences.js b/src/controls/usePreferences.js
index 67b9c15..9ec56ba 100644
--- a/src/controls/usePreferences.js
+++ b/src/controls/usePreferences.js
@@ -39,10 +39,15 @@ export function usePreferences() {
 
   const [clickToPlayPause, setClickToPlayPauseState] = useState(() => {
     try {
-      const stored = window.localStorage.getItem(CLICK_TO_PLAY_PAUSE_STORAGE_KEY);
+      const stored = window.localStorage.getItem(
+        CLICK_TO_PLAY_PAUSE_STORAGE_KEY,
+      );
       return stored !== null ? stored === "true" : true;
     } catch (err) {
-      console.log("[Kickstiny] Unable to read click to play/pause preference", err);
+      console.log(
+        "[Kickstiny] Unable to read click to play/pause preference",
+        err,
+      );
       return true;
     }
   });
@@ -76,10 +81,16 @@ export function usePreferences() {
 
   const setClickToPlayPause = useCallback((value) => {
     try {
-      window.localStorage.setItem(CLICK_TO_PLAY_PAUSE_STORAGE_KEY, value.toString());
+      window.localStorage.setItem(
+        CLICK_TO_PLAY_PAUSE_STORAGE_KEY,
+        value.toString(),
+      );
       setClickToPlayPauseState(value);
     } catch (err) {
-      console.log("[Kickstiny] Unable to persist click to play/pause preference", err);
+      console.log(
+        "[Kickstiny] Unable to persist click to play/pause preference",
+        err,
+      );
     }
   }, []);
 

From d049a027a53e1bda73a83fa10bce3a5e1d07e083 Mon Sep 17 00:00:00 2001
From: Turing Quantrix <quantrixgunero@gmail.com>
Date: Mon, 23 Mar 2026 16:00:06 -0700
Subject: [PATCH 3/3] Fix: #3 - make settings dropdown menu dynamix width

---
 src/components/Dropdown.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Dropdown.scss b/src/components/Dropdown.scss
index b7e4f6e..26728bd 100644
--- a/src/components/Dropdown.scss
+++ b/src/components/Dropdown.scss
@@ -39,6 +39,7 @@
       align-items: center;
       justify-content: space-between;
       gap: dgg.$space-2;
+      white-space: nowrap;
     }
 
     &-value {
@@ -73,7 +74,8 @@
 }
 
 .settings-dropdown {
-  width: 180px;
+  width: max-content;
+  min-width: 180px;
   max-height: var(--radix-dropdown-menu-content-available-height, auto);
   overflow-x: hidden;
   overflow-y: auto;