pstream is dead; long live pstream taciturnaxolotl.github.io/pstream-ng/
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add setting to make captions lower

Pas 648df78a df21c1e3

+112 -7
+4 -1
src/assets/locales/en.json
··· 766 766 "previewQuote": "Convinced life is meaningless, I lack the courage of my conviction.", 767 767 "textSizeLabel": "Text size", 768 768 "title": "Subtitles", 769 - "textBoldLabel": "Bold text" 769 + "textBoldLabel": "Bold text", 770 + "verticalPositionLabel": "Vertical position", 771 + "default": "Default", 772 + "low": "Low" 770 773 }, 771 774 "unsaved": "You have unsaved changes... ฅ^•ﻌ•^ฅ" 772 775 },
+41
src/components/player/atoms/settings/CaptionSettingsView.tsx
··· 327 327 /> 328 328 <div className="flex justify-between items-center"> 329 329 <Menu.FieldTitle> 330 + {t("settings.subtitles.verticalPositionLabel")} 331 + </Menu.FieldTitle> 332 + <div className="flex justify-center items-center space-x-2"> 333 + <button 334 + type="button" 335 + className={classNames( 336 + "px-3 py-1 rounded transition-colors duration-100", 337 + styling.verticalPosition === 3 338 + ? "bg-video-context-buttonFocus" 339 + : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50", 340 + )} 341 + onClick={() => 342 + handleStylingChange({ 343 + ...styling, 344 + verticalPosition: 3, 345 + }) 346 + } 347 + > 348 + {t("settings.subtitles.default")} 349 + </button> 350 + <button 351 + type="button" 352 + className={classNames( 353 + "px-3 py-1 rounded transition-colors duration-100", 354 + styling.verticalPosition === 1 355 + ? "bg-video-context-buttonFocus" 356 + : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50", 357 + )} 358 + onClick={() => 359 + handleStylingChange({ 360 + ...styling, 361 + verticalPosition: 1, 362 + }) 363 + } 364 + > 365 + {t("settings.subtitles.low")} 366 + </button> 367 + </div> 368 + </div> 369 + <div className="flex justify-between items-center"> 370 + <Menu.FieldTitle> 330 371 {t("settings.subtitles.colorLabel")} 331 372 </Menu.FieldTitle> 332 373 <div className="flex justify-center items-center space-x-2">
+7 -5
src/components/player/base/SubtitleView.tsx
··· 1 - import classNames from "classnames"; 2 1 import { useMemo } from "react"; 3 2 4 3 import { ··· 123 122 const captionAsTrack = usePlayerStore((s) => s.caption.asTrack); 124 123 const display = usePlayerStore((s) => s.display); 125 124 const isCasting = display?.getType() === "casting"; 125 + const styling = useSubtitleStore((s) => s.styling); 126 126 127 127 if (captionAsTrack || !caption || isCasting) return null; 128 128 ··· 133 133 show 134 134 > 135 135 <div 136 - className={classNames([ 137 - "text-white absolute flex w-full flex-col items-center transition-[bottom]", 138 - props.controlsShown ? "bottom-24" : "bottom-12", 139 - ])} 136 + className="text-white absolute flex w-full flex-col items-center transition-[bottom]" 137 + style={{ 138 + bottom: props.controlsShown 139 + ? "6rem" 140 + : `${styling.verticalPosition}rem`, 141 + }} 140 142 > 141 143 <SubtitleRenderer /> 142 144 </div>
+48 -1
src/pages/parts/settings/CaptionsPart.tsx
··· 53 53 <Icon icon={props.fullscreen ? Icons.X : Icons.EXPAND} /> 54 54 </button> 55 55 56 - <div className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] bottom-0 p-4"> 56 + <div 57 + className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] p-4" 58 + style={{ 59 + bottom: `${props.styling.verticalPosition * 4}px`, 60 + }} 61 + > 57 62 <div 58 63 className={ 59 64 props.fullscreen ? "" : "transform origin-bottom text-[0.5rem]" ··· 98 103 size: 1, 99 104 backgroundBlur: 0.5, 100 105 bold: false, 106 + verticalPosition: 3, 101 107 }); 102 108 }; 103 109 ··· 145 151 } 146 152 value={props.styling.size * 100} 147 153 /> 154 + <div className="flex justify-between items-center"> 155 + <Menu.FieldTitle> 156 + {t("settings.subtitles.verticalPositionLabel")} 157 + </Menu.FieldTitle> 158 + <div className="flex justify-center items-center space-x-2"> 159 + <button 160 + type="button" 161 + className={classNames( 162 + "px-3 py-1 rounded transition-colors duration-100", 163 + props.styling.verticalPosition === 3 164 + ? "bg-video-context-buttonFocus" 165 + : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50", 166 + )} 167 + onClick={() => 168 + handleStylingChange({ 169 + ...props.styling, 170 + verticalPosition: 3, 171 + }) 172 + } 173 + > 174 + {t("settings.subtitles.default")} 175 + </button> 176 + <button 177 + type="button" 178 + className={classNames( 179 + "px-3 py-1 rounded transition-colors duration-100", 180 + props.styling.verticalPosition === 1 181 + ? "bg-video-context-buttonFocus" 182 + : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50", 183 + )} 184 + onClick={() => 185 + handleStylingChange({ 186 + ...props.styling, 187 + verticalPosition: 1, 188 + }) 189 + } 190 + > 191 + {t("settings.subtitles.low")} 192 + </button> 193 + </div> 194 + </div> 148 195 <div className="flex justify-between items-center"> 149 196 <Menu.FieldTitle> 150 197 {t("settings.subtitles.textBoldLabel")}
+12
src/stores/subtitles/index.ts
··· 28 28 * bold, boolean 29 29 */ 30 30 bold: boolean; 31 + 32 + /** 33 + * vertical position percentage, ranges between 1 and 3 (rem) 34 + */ 35 + verticalPosition: number; 31 36 } 32 37 33 38 export interface SubtitleStore { ··· 70 75 size: 1, 71 76 backgroundBlur: 0.5, 72 77 bold: false, 78 + verticalPosition: 3, 73 79 }, 74 80 showDelayIndicator: false, 75 81 resetSubtitleSpecificSettings() { ··· 95 101 if (newStyling.size !== undefined) 96 102 s.styling.size = Math.min(10, Math.max(0.01, newStyling.size)); 97 103 if (newStyling.bold !== undefined) s.styling.bold = newStyling.bold; 104 + if (newStyling.verticalPosition !== undefined) 105 + s.styling.verticalPosition = Math.min( 106 + 100, 107 + Math.max(0, newStyling.verticalPosition), 108 + ); 98 109 }); 99 110 }, 100 111 resetStyling() { ··· 105 116 size: 1, 106 117 backgroundBlur: 0.5, 107 118 bold: false, 119 + verticalPosition: 3, 108 120 }; 109 121 }); 110 122 },