@davmash/bygone 0.8.6 → 0.8.8

package/web/index.html

@@ -60,6 +60,34 @@
             <span id="tour-breadcrumb" class="tour-breadcrumb"></span>
             <button id="tour-next" type="button" title="Next tour item (Right or Page Down)">Next →</button>
         </nav>
+        <div id="tour-narration-controls" class="tour-narration-controls" role="group" aria-label="Tour narration">
+            <div class="tour-narration-transport" role="group" aria-label="Narration playback">
+                <button id="tour-narration-skip-back" type="button" title="Previous sentence" aria-label="Previous sentence" disabled>
+                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>
+                </button>
+                <button id="tour-listen" type="button" title="Listen from the current tour item" aria-label="Listen from the current tour item">
+                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path class="tour-icon-fill tour-play-pause-icon" d="m8 5 11 7-11 7Z"/></svg>
+                </button>
+                <button id="tour-stop" type="button" title="Stop narration" aria-label="Stop narration" disabled>
+                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path class="tour-icon-fill" d="M6 6h12v12H6z"/></svg>
+                </button>
+                <button id="tour-narration-skip-ahead" type="button" title="Next sentence" aria-label="Next sentence" disabled>
+                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
+                </button>
+            </div>
+            <div class="tour-narration-settings">
+                <select id="tour-narration-voice" aria-label="Narration voice" title="Narration voice" disabled>
+                    <option value="">System default voice</option>
+                </select>
+                <select id="tour-narration-rate" aria-label="Narration speed" title="Narration speed">
+                    <option value="0.75">0.75×</option>
+                    <option value="1">1×</option>
+                    <option value="1.25">1.25×</option>
+                    <option value="1.5">1.5×</option>
+                </select>
+            </div>
+            <span id="tour-narration-status" class="tour-narration-status" role="status" aria-live="polite" aria-atomic="true">Device voice ready</span>
+        </div>
         <div class="tour-narrative-layout">
             <div class="tour-narrative-prose">
                 <div id="tour-narrative-chapter" class="tour-narrative-chapter"></div>
@@ -113,13 +141,13 @@
             <div id="change-toolbar" class="change-toolbar header-align-diff" hidden>
                 <div class="change-toolbar-main">
                     <div class="change-toolbar-nav">
-                        <button id="previous-file" class="change-button icon-button" type="button" title="Open previous file" aria-label="Previous file">
+                        <button id="previous-file" class="change-button icon-button" type="button" title="Open previous file" data-tooltip="Open previous file" aria-label="Previous file">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M17 11l-5-5-5 5"></path>
                                 <path d="M17 18l-5-5-5 5"></path>
                             </svg>
                         </button>
-                        <button id="next-file" class="change-button icon-button" type="button" title="Open next file" aria-label="Next file">
+                        <button id="next-file" class="change-button icon-button" type="button" title="Open next file" data-tooltip="Open next file" aria-label="Next file">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M7 13l5 5 5-5"></path>
                                 <path d="M7 6l5 5 5-5"></path>
@@ -155,8 +183,15 @@
                             </svg>
                         </button>
                     </div>
+                    <div class="change-toolbar-actions">
                     <button id="toggle-word-wrap" class="change-button icon-button" type="button" title="Enable line wrapping (Alt+Z)" aria-label="Enable line wrapping" aria-pressed="false" hidden>
-                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <svg class="word-wrap-icon-off" viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M4 6h13a3 3 0 0 1 0 6H9"></path>
+                            <path d="M12 9l-3 3 3 3"></path>
+                            <path d="M4 18h8"></path>
+                            <path d="M5 4l14 16"></path>
+                        </svg>
+                        <svg class="word-wrap-icon-on" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M4 6h13a3 3 0 0 1 0 6H9"></path>
                             <path d="M12 9l-3 3 3 3"></path>
                             <path d="M4 18h8"></path>
@@ -168,6 +203,7 @@
                             <path d="M20 5v6h-6"></path>
                         </svg>
                     </button>
+                    </div>
                 </div>
                 <div class="change-hint">F7 / Shift+F7 · Cmd/Ctrl+Shift+Up/Down to jump.</div>
             </div>
@@ -177,14 +213,14 @@
                     <div id="history-left-time" class="history-time"></div>
                 </div>
                 <div class="history-nav">
-                    <button id="history-back" class="history-button icon-button" type="button" title="Open older commit" aria-label="Older commit">
+                    <button id="history-back" class="history-button icon-button" type="button" title="Open older commit" data-tooltip="Open older commit" aria-label="Older commit">
                         <svg viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M15 18l-6-6 6-6"></path>
                             <path d="M10 18l-6-6 6-6" opacity="0.7"></path>
                         </svg>
                     </button>
                     <div id="history-position" class="history-position" role="status" aria-live="polite" aria-atomic="true"></div>
-                    <button id="history-forward" class="history-button icon-button" type="button" title="Open newer commit" aria-label="Newer commit">
+                    <button id="history-forward" class="history-button icon-button" type="button" title="Open newer commit" data-tooltip="Open newer commit" aria-label="Newer commit">
                         <svg viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M9 18l6-6-6-6"></path>
                             <path d="M14 18l6-6-6-6" opacity="0.7"></path>

package/web/presenter.css

@@ -319,6 +319,121 @@ body.tour-discussion .tour-narrative-resizer {
     cursor: default;
 }
 
+.tour-narration-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    margin: -4px 0 12px;
+    padding: 5px;
+    border: 1px solid var(--tour-border);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.025);
+}
+
+.tour-narration-controls select {
+    height: 28px;
+    padding: 3px 7px;
+    color: var(--tour-muted);
+    border: 1px solid var(--tour-border);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.035);
+    font: inherit;
+}
+
+.tour-narration-transport,
+.tour-narration-settings {
+    display: inline-flex;
+    align-items: center;
+}
+
+.tour-narration-transport {
+    overflow: hidden;
+    border: 1px solid var(--tour-border);
+    border-radius: 6px;
+}
+
+.tour-narration-transport button {
+    display: grid;
+    width: 30px;
+    height: 28px;
+    padding: 0;
+    place-items: center;
+    color: var(--tour-muted);
+    border: 0;
+    border-right: 1px solid var(--tour-border);
+    background: rgba(255, 255, 255, 0.035);
+    cursor: pointer;
+}
+
+.tour-narration-transport button:last-child {
+    border-right: 0;
+}
+
+.tour-narration-transport button svg {
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.tour-narration-transport button svg .tour-icon-fill {
+    fill: currentColor;
+    stroke: none;
+}
+
+.tour-narration-transport #tour-listen {
+    color: var(--tour-accent-bright);
+}
+
+.tour-narration-transport button:hover:not(:disabled),
+.tour-narration-transport button:focus-visible,
+.tour-narration-controls select:focus-visible {
+    color: #fff;
+    outline: none;
+    background: rgba(169, 159, 255, 0.13);
+    box-shadow: inset 0 0 0 1px rgba(169, 159, 255, 0.55);
+}
+
+.tour-narration-transport button:disabled,
+.tour-narration-controls select:disabled {
+    opacity: 0.36;
+}
+
+.tour-narration-settings {
+    gap: 5px;
+}
+
+.tour-narration-controls select {
+    max-width: min(210px, 29vw);
+}
+
+.tour-narration-status {
+    margin-left: auto;
+    color: var(--tour-faint);
+    text-align: right;
+}
+
+.tour-narration-segment {
+    border-radius: 3px;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+    transition: background-color 100ms ease, box-shadow 100ms ease;
+}
+
+.tour-narration-segment.is-speaking {
+    background: rgba(255, 211, 92, 0.18);
+    box-shadow: inset 0 -2px 0 rgba(255, 211, 92, 0.78);
+}
+
+.tour-narration-segment.is-speaking.is-paused {
+    background: rgba(169, 159, 255, 0.16);
+    box-shadow: inset 0 -2px 0 rgba(169, 159, 255, 0.72);
+}
+
 .tour-breadcrumb {
     min-width: 0;
     color: var(--tour-muted);
@@ -674,6 +789,11 @@ body.tour-discussion .tour-narrative-nav {
     margin-bottom: clamp(22px, 4vh, 36px);
 }
 
+body.tour-discussion .tour-narration-controls {
+    max-width: 1000px;
+    margin-bottom: clamp(18px, 3vh, 28px);
+}
+
 body.tour-discussion .tour-narrative-layout {
     display: block;
 }
@@ -811,4 +931,20 @@ body.tour-discussion .tour-narrative-takeaway {
         min-width: 64px;
         padding-inline: 7px;
     }
+
+    .tour-narration-controls select {
+        max-width: 150px;
+    }
+
+    .tour-narration-status {
+        width: 100%;
+        margin-left: 0;
+        text-align: left;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .tour-narration-segment {
+        transition: none;
+    }
 }