feat: add toggling of larivar and vishraman

src/components/app/controls/controls.css

@@ -161,11 +161,18 @@ a.controls__option:hover {
   -webkit-tap-highlight-color: transparent;
 }
 
+.controls__option.clickable.disabled {
+  cursor: not-allowed;
+}
+
 :global(.controls__option.clickable:hover .switch) {
   --track-color-inactive: var(--toner) !important;
   outline: 2.25px solid var(--ui);
   outline-offset: 2.25px;
 }
+:global(.controls__option.clickable.disabled:hover .switch) {
+  outline: 0;
+}
 
 .controls__option.clickable:hover .controls__icon {
   background-color: var(--toner);

src/components/app/controls/controls.tsx

@@ -28,6 +28,8 @@ import Instagram from '~/components/icons/ui/instagram';
 import Youtube from '~/components/icons/ui/youtube';
 import Slack from '~/components/icons/ui/slack';
 import Github from '~/components/icons/ui/github';
+import Pause from '~/components/icons/ui/pause';
+import Continuous from '~/components/icons/ui/continuous';
 
 export default component$(() => {
   useStylesScoped$(styles);
@@ -378,6 +380,58 @@ export default component$(() => {
             <Switch toggled={!!controlsStore.notes} />
           </div>
           <hr />
+          <div
+            class='controls__option clickable'
+            onClick$={() => {
+              controlsStore.larivar = isNaN(controlsStore.larivar)
+                ? 0
+                : 1 - controlsStore.larivar;
+              setLocalStorage(
+                'controlsLarivar',
+                controlsStore.larivar.toString(),
+              );
+              document.documentElement.setAttribute(
+                'data-larivar',
+                String(controlsStore.larivar),
+              );
+            }}
+          >
+            <div class='controls__label'>
+              <Continuous />
+              Continuous
+            </div>
+            <Switch toggled={!!controlsStore.larivar} />
+          </div>
+          <div
+            class={`controls__option clickable ${
+              !!controlsStore.larivar && 'disabled'
+            }`}
+            onClick$={() => {
+              if (controlsStore.larivar) {
+                return;
+              }
+              controlsStore.vishraman = isNaN(controlsStore.vishraman)
+                ? 0
+                : 1 - controlsStore.vishraman;
+              setLocalStorage(
+                'controlsVishraman',
+                controlsStore.vishraman.toString(),
+              );
+              document.documentElement.setAttribute(
+                'data-vishraman',
+                String(controlsStore.vishraman),
+              );
+            }}
+          >
+            <div class='controls__label'>
+              <Pause />
+              Pauses
+            </div>
+            <Switch
+              disabled={!!controlsStore.larivar}
+              toggled={!!controlsStore.vishraman}
+            />
+          </div>
           <div
             class='controls__option clickable'
             onClick$={() => {

src/components/icons/ui/continuous.tsx

@@ -0,0 +1,38 @@
+// ISC License
+
+// Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+import { component$ } from '@builder.io/qwik';
+
+export default component$(() => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='16'
+    height='16'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    stroke-width='2.25'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+    class='lucide lucide-whole-word'
+  >
+    <circle cx='7' cy='12' r='3' />
+    <path d='M10 9v6' />
+    <circle cx='17' cy='12' r='3' />
+    <path d='M14 7v8' />
+    <path d='M22 17v1c0 .5-.5 1-1 1H3c-.5 0-1-.5-1-1v-1' />
+  </svg>
+));

src/components/icons/ui/pause.tsx

@@ -0,0 +1,35 @@
+// ISC License
+
+// Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+import { component$ } from '@builder.io/qwik';
+
+export default component$(() => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='16'
+    height='16'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    stroke-width='2.25'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+    class='lucide lucide-pause'
+  >
+    <rect x='14' y='4' width='4' height='16' rx='1' />
+    <rect x='6' y='4' width='4' height='16' rx='1' />
+  </svg>
+));

src/components/switch/switch.css

@@ -1,7 +1,7 @@
 .switch {
-  --thumb-size: 24px;
+  --thumb-size: 20px;
   --track-size: calc(var(--thumb-size) * 1.8);
-  --track-padding: 0px;
+  --track-padding: 2px;
   --thumb-color: #ffffff;
   --track-color-inactive: var(--toner);
   --track-color-active: var(--ui);
@@ -43,27 +43,18 @@
   background: var(--track-color-active);
   --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
   --thumb-color: #ffffff;
-  border-color: transparent;
-}
-.switch:checked::before {
-  border-color: transparent;
 }
 .switch:disabled {
   cursor: not-allowed;
-  --thumb-color: transparent;
-}
-.switch:disabled::before {
-  cursor: not-allowed;
-  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
+  opacity: 0.4;
 }
-@media (prefers-color-scheme: dark) {
-  .switch:disabled::before {
-    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5);
-  }
+
+.switch:disabled:hover {
+  outline: none;
 }
 
 @media (pointer: coarse) {
   .switch {
-    --thumb-size: 35px;
+    --thumb-size: 31px;
   }
 }

src/components/switch/switch.tsx

@@ -2,13 +2,20 @@ import { component$, useStylesScoped$ } from '@builder.io/qwik';
 import styles from './switch.css?inline';
 
 interface Props {
+  disabled?: boolean;
   toggled: boolean;
 }
 
-export default component$(({ toggled }: Props) => {
+export default component$(({ disabled = false, toggled }: Props) => {
   useStylesScoped$(styles);
 
   return (
-    <input class='switch' type='checkbox' role='switch' checked={toggled} />
+    <input
+      class='switch'
+      type='checkbox'
+      role='switch'
+      checked={toggled}
+      disabled={disabled}
+    />
   );
 });

src/global.css

@@ -368,50 +368,41 @@ input[type='range']:focus {
 }
 
 input[type='range']::-webkit-slider-runnable-track {
-  /* background-color: var(--bg); */
-  height: 100%;
   transition: background-color 0.25s ease;
 }
 input[type='range']::-moz-range-track {
-  /* background-color: var(--bg); */
-  height: 100%;
   transition: background-color 0.25s ease;
 }
 
-input[type='range']:hover::-webkit-slider-runnable-track {
-  background-color: var(--toner);
-}
-input[type='range']:hover::-moz-range-track {
-  background-color: var(--toner);
-}
-
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
-  height: 24px;
-  width: 24px;
-  border-radius: 24px;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border: 2px solid var(--toner);
   box-shadow: -412px 0 0 400px var(--ui);
+  box-sizing: content-box;
 }
 input[type='range']::-moz-range-thumb {
   -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
-  height: 24px;
-  width: 24px;
-  border-radius: 24px;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border: 2px solid var(--toner);
   box-shadow: -412px 0 0 400px var(--ui);
+  box-sizing: content-box;
 }
 
 input[type='range']:focus::-webkit-slider-thumb {
-  outline: 2.25px solid var(--toner);
-  outline-offset: -2.25px;
+  outline: 0;
 }
 
 input[type='range']:focus::-moz-range-thumb {
-  outline: 8px solid #fff;
-  outline-offset: -16px;
+  outline: 0;
 }
 
 @media (pointer: coarse) {
@@ -473,15 +464,15 @@ input[type='range']:focus::-moz-range-thumb {
     height: 35px;
   }
   input[type='range']::-webkit-slider-thumb {
-    width: 35px;
-    height: 35px;
-    border-radius: 35px;
+    width: 31px;
+    height: 31px;
+    border-radius: 31px;
     box-shadow: -419px 0 0 400px var(--ui);
   }
   input[type='range']::-moz-range-thumb {
-    width: 35px;
-    height: 35px;
-    border-radius: 35px;
+    width: 31px;
+    height: 31px;
+    border-radius: 31px;
     box-shadow: -419px 0 0 400px var(--ui);
   }
 }

src/root.tsx

@@ -56,6 +56,8 @@ export default component$(() => {
             if (path == 'app') {
               document.documentElement.setAttribute('data-mode', localStorage.controlsMode || 'classic');
               document.documentElement.setAttribute('data-width', localStorage.controlsWidth || 'wider');
+              document.documentElement.setAttribute('data-vishraman', localStorage.controlsVishraman || '1');
+              document.documentElement.setAttribute('data-larivar', localStorage.controlsLarivar || '0');
               document.documentElement.style.fontSize = localStorage.controlsZoom + 'em' || '1.5em';
             }
           `}

src/routes/app.css

@@ -220,3 +220,16 @@ html[data-mode='presenter'] header > div,
 html[data-mode='presenter'] .notes-pane {
   width: 100%;
 }
+
+html[data-larivar='1'] p.bold {
+  word-spacing: -0.2em;
+}
+
+html[data-larivar='1'] .heavy,
+html[data-larivar='1'] .medium,
+html[data-larivar='1'] .light,
+html[data-vishraman='0'] .heavy,
+html[data-vishraman='0'] .medium,
+html[data-vishraman='0'] .light {
+  color: inherit;
+}

src/routes/layout-app.tsx

@@ -32,6 +32,8 @@ export type Controls = {
   slideshowType: string;
   notes: number;
   notesContent: string;
+  larivar: number;
+  vishraman: number;
   pronunciationField: number;
   translationField: number;
 };
@@ -66,6 +68,8 @@ export default component$(() => {
     slideshowType: 'blank',
     notes: 0,
     notesContent: '',
+    larivar: 1,
+    vishraman: 1,
     pronunciationField: 0,
     translationField: 1,
   });
@@ -87,6 +91,10 @@ export default component$(() => {
       getLocalStorage('controlsSlideshowType') ?? 'blank';
     controlsStore.notes = parseInt(getLocalStorage('controlsNotes') ?? '0');
     controlsStore.notesContent = getLocalStorage('controlsNotesContent') ?? '';
+    controlsStore.larivar = parseInt(getLocalStorage('controlsLarivar') ?? '0');
+    controlsStore.vishraman = parseInt(
+      getLocalStorage('controlsVishraman') ?? '1',
+    );
     controlsStore.pronunciationField = parseInt(
       getLocalStorage('controlsPronunciationField') ?? '0',
     );