-
Notifications
You must be signed in to change notification settings - Fork 223
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add video player section (#213)
- Loading branch information
Showing
14 changed files
with
443 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <script setup lang="ts"> | ||
| defineProps<{ title: string; color: string }>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <span class='color-tag'> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :fill="color"><rect width="24" height="24" rx="6"/> | ||
| </svg> | ||
| <span class="name">{{ title }}</span> | ||
| </span> | ||
| </template> | ||
|
|
||
| <style lang="stylus" scoped> | ||
| .color-tag { | ||
| font-weight: 600 | ||
| margin-left: 6px | ||
| svg, | ||
| span.name { | ||
| vertical-align: middle // Align both SVG and <span> vertically | ||
| position: relative | ||
| bottom: 1px | ||
| } | ||
| svg { | ||
| height: 1em | ||
| width: 1em | ||
| display: inline-block | ||
| margin-right: 4px | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| <script setup lang="ts"> | ||
| defineProps<{ name: string }>() | ||
| const paths = { | ||
| episode_list: [ | ||
| { | ||
| d: 'M10,6L8.59,7.41 13.17,12l-4.58,4.59L10,18l6,-6z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| back_arrow: [ | ||
| { | ||
| d: 'M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| autoplay: [ | ||
| { | ||
| d: 'M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| }, | ||
| { | ||
| d: 'M8.15094 7.24528H10.8679V16.7547H8.15094V7.24528Z', | ||
| fill: '#757780' | ||
| }, | ||
| { | ||
| d: 'M13.1321 7.24528H15.8491V16.7547H13.1321V7.24528Z', | ||
| fill: '#757780' | ||
| } | ||
| ], | ||
| chapters: [ | ||
| { | ||
| d: 'M19,1l-5,5v11l5,-4.5L19,1zM1,6v14.65c0,0.25 0.25,0.5 0.5,0.5 0.1,0 0.15,-0.05 0.25,-0.05C3.1,20.45 5.05,20 6.5,20c1.95,0 4.05,0.4 5.5,1.5L12,6c-1.45,-1.1 -3.55,-1.5 -5.5,-1.5S2.45,4.9 1,6zM23,19.5L23,6c-0.6,-0.45 -1.25,-0.75 -2,-1v13.5c-1.1,-0.35 -2.3,-0.5 -3.5,-0.5 -1.7,0 -4.15,0.65 -5.5,1.5v2c1.35,-0.85 3.8,-1.5 5.5,-1.5 1.65,0 3.35,0.3 4.75,1.05 0.1,0.05 0.15,0.05 0.25,0.05 0.25,0 0.5,-0.25 0.5,-0.5v-1.1z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| video_settings: [ | ||
| { | ||
| d: 'M3,6h18v5h2V6c0-1.1-0.9-2-2-2H3C1.9,4,1,4.9,1,6v12c0,1.1,0.9,2,2,2h9v-2H3V6z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| }, | ||
| { | ||
| d: 'M 15 12 L 9 8 L 9 16 Z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| }, | ||
| { | ||
| d: 'M22.71,18.43c0.03-0.29,0.04-0.58,0.01-0.86l1.07-0.85c0.1-0.08,0.12-0.21,0.06-0.32l-1.03-1.79 c-0.06-0.11-0.19-0.15-0.31-0.11L21.23,15c-0.23-0.17-0.48-0.31-0.75-0.42l-0.2-1.36C20.26,13.09,20.16,13,20.03,13h-2.07 c-0.12,0-0.23,0.09-0.25,0.21l-0.2,1.36c-0.26,0.11-0.51,0.26-0.74,0.42l-1.28-0.5c-0.12-0.05-0.25,0-0.31,0.11l-1.03,1.79 c-0.06,0.11-0.04,0.24,0.06,0.32l1.07,0.86c-0.03,0.29-0.04,0.58-0.01,0.86l-1.07,0.85c-0.1,0.08-0.12,0.21-0.06,0.32l1.03,1.79 c0.06,0.11,0.19,0.15,0.31,0.11l1.27-0.5c0.23,0.17,0.48,0.31,0.75,0.42l0.2,1.36c0.02,0.12,0.12,0.21,0.25,0.21h2.07 c0.12,0,0.23-0.09,0.25-0.21l0.2-1.36c0.26-0.11,0.51-0.26,0.74-0.42l1.28,0.5c0.12,0.05,0.25,0,0.31-0.11l1.03-1.79 c0.06-0.11,0.04-0.24-0.06-0.32L22.71,18.43z M19,19.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5 S19.83,19.5,19,19.5z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| settings: [ | ||
| { | ||
| d: 'M9.25 22L8.85 18.8C8.63333 18.7167 8.42916 18.6167 8.2375 18.5C8.04583 18.3833 7.85833 18.2583 7.675 18.125L4.7 19.375L1.95 14.625L4.525 12.675C4.50833 12.5583 4.5 12.4458 4.5 12.3375V11.6625C4.5 11.5542 4.50833 11.4417 4.525 11.325L1.95 9.375L4.7 4.625L7.675 5.875C7.85833 5.74167 8.05 5.61667 8.25 5.5C8.45 5.38333 8.65 5.28333 8.85 5.2L9.25 2H14.75L15.15 5.2C15.3667 5.28333 15.5708 5.38333 15.7625 5.5C15.9542 5.61667 16.1417 5.74167 16.325 5.875L19.3 4.625L22.05 9.375L19.475 11.325C19.4917 11.4417 19.5 11.5542 19.5 11.6625V12.3375C19.5 12.4458 19.4833 12.5583 19.45 12.675L22.025 14.625L19.275 19.375L16.325 18.125C16.1417 18.2583 15.95 18.3833 15.75 18.5C15.55 18.6167 15.35 18.7167 15.15 18.8L14.75 22H9.25ZM11 20H12.975L13.325 17.35C13.8417 17.2167 14.3208 17.0208 14.7625 16.7625C15.2042 16.5042 15.6083 16.1917 15.975 15.825L18.45 16.85L19.425 15.15L17.275 13.525C17.3583 13.2917 17.4167 13.0458 17.45 12.7875C17.4833 12.5292 17.5 12.2667 17.5 12C17.5 11.7333 17.4833 11.4708 17.45 11.2125C17.4167 10.9542 17.3583 10.7083 17.275 10.475L19.425 8.85L18.45 7.15L15.975 8.2C15.6083 7.81667 15.2042 7.49583 14.7625 7.2375C14.3208 6.97917 13.8417 6.78333 13.325 6.65L13 4H11.025L10.675 6.65C10.1583 6.78333 9.67916 6.97917 9.2375 7.2375C8.79583 7.49583 8.39166 7.80833 8.025 8.175L5.55 7.15L4.575 8.85L6.725 10.45C6.64166 10.7 6.58333 10.95 6.55 11.2C6.51666 11.45 6.5 11.7167 6.5 12C6.5 12.2667 6.51666 12.525 6.55 12.775C6.58333 13.025 6.64166 13.275 6.725 13.525L4.575 15.15L5.55 16.85L8.025 15.8C8.39166 16.1833 8.79583 16.5042 9.2375 16.7625C9.67916 17.0208 10.1583 17.2167 10.675 17.35L11 20ZM12.05 15.5C13.0167 15.5 13.8417 15.1583 14.525 14.475C15.2083 13.7917 15.55 12.9667 15.55 12C15.55 11.0333 15.2083 10.2083 14.525 9.525C13.8417 8.84167 13.0167 8.5 12.05 8.5C11.0667 8.5 10.2375 8.84167 9.5625 9.525C8.8875 10.2083 8.55 11.0333 8.55 12C8.55 12.9667 8.8875 13.7917 9.5625 14.475C10.2375 15.1583 11.0667 15.5 12.05 15.5Z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| overflow: [ | ||
| { | ||
| d: 'M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| previous: [ | ||
| { | ||
| d: 'M6,6h2v12L6,18zM9.5,12l8.5,6L18,6z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| play: [ | ||
| { | ||
| d: 'M8,5v14l11,-7z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| pause: [ | ||
| { | ||
| d: 'M6,19h4L10,5L6,5v14zM14,5v14h4L18,5h-4z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| next: [ | ||
| { | ||
| d: 'M6,18l8.5,-6L6,6v12zM16,6v12h2V6h-2z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| lock: [ | ||
| { | ||
| d: 'M18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM12,17c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2zM15.1,8L8.9,8L8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1 1.71,0 3.1,1.39 3.1,3.1v2z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| rotate: [ | ||
| { | ||
| d: 'M16.48,2.52c3.27,1.55 5.61,4.72 5.97,8.48h1.5C23.44,4.84 18.29,0 12,0l-0.66,0.03 3.81,3.81 1.33,-1.32zM10.23,1.75c-0.59,-0.59 -1.54,-0.59 -2.12,0L1.75,8.11c-0.59,0.59 -0.59,1.54 0,2.12l12.02,12.02c0.59,0.59 1.54,0.59 2.12,0l6.36,-6.36c0.59,-0.59 0.59,-1.54 0,-2.12L10.23,1.75zM14.83,21.19L2.81,9.17l6.36,-6.36 12.02,12.02 -6.36,6.36zM7.52,21.48C4.25,19.94 1.91,16.76 1.55,13L0.05,13C0.56,19.16 5.71,24 12,24l0.66,-0.03 -3.81,-3.81 -1.33,1.32z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| fullscreen: [ | ||
| { | ||
| d: 'M7,14L5,14v5h5v-2L7,17v-3zM5,10h2L7,7h3L10,5L5,5v5zM17,17h-3v2h5v-5h-2v3zM14,5v2h3v3h2L19,5h-5z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| pip: [ | ||
| { | ||
| d: 'M19,11h-8v6h8v-6zM23,19L23,4.98C23,3.88 22.1,3 21,3L3,3c-1.1,0 -2,0.88 -2,1.98L1,19c0,1.1 0.9,2 2,2h18c1.1,0 2,-0.9 2,-2zM21,19.02L3,19.02L3,4.97h18v14.05z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| font_family: [ | ||
| { | ||
| d: 'M14 20V7H9V4H22V7H17V20H14ZM5 20V12H2V9H11V12H8V20H5Z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| font_bold: [ | ||
| { | ||
| d: 'M6.80005 19V5H12.325C13.4084 5 14.4084 5.33333 15.325 6C16.2417 6.66667 16.7 7.59167 16.7 8.775C16.7 9.625 16.5084 10.2792 16.125 10.7375C15.7417 11.1958 15.3834 11.525 15.05 11.725C15.4667 11.9083 15.9292 12.25 16.4375 12.75C16.9459 13.25 17.2 14 17.2 15C17.2 16.4833 16.6584 17.5208 15.575 18.1125C14.4917 18.7042 13.475 19 12.525 19H6.80005ZM9.82505 16.2H12.425C13.225 16.2 13.7125 15.9958 13.8875 15.5875C14.0625 15.1792 14.15 14.8833 14.15 14.7C14.15 14.5167 14.0625 14.2208 13.8875 13.8125C13.7125 13.4042 13.2 13.2 12.35 13.2H9.82505V16.2ZM9.82505 10.5H12.15C12.7 10.5 13.1 10.3583 13.35 10.075C13.6 9.79167 13.725 9.475 13.725 9.125C13.725 8.725 13.5834 8.4 13.3 8.15C13.0167 7.9 12.65 7.775 12.2 7.775H9.82505V10.5Z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ], | ||
| font_italic: [ | ||
| { | ||
| d: 'M5 19V16.5H9L12 7.5H8V5H18V7.5H14.5L11.5 16.5H15V19H5Z', | ||
| fill: 'var(--vp-c-text-1)' | ||
| } | ||
| ] | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <svg class="title-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
| <template v-for="path in paths[name]"> | ||
| <path :d="path.d" :fill="path.fill" /> | ||
| </template> | ||
| </svg> | ||
| </template> | ||
|
|
||
| <style lang="stylus" scoped> | ||
| .title-icon { | ||
| margin-right: 6px | ||
| height: 24px | ||
| width: 24px | ||
| display: inline-block | ||
| // Align | ||
| vertical-align: middle | ||
| position: relative | ||
| bottom: 2px | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
website/src/docs/guides/video-player/audio-and-subtitle-settings.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| --- | ||
| title: Audio and subtitle settings | ||
| titleTemplate: Video player - Guides | ||
| description: Additional settings for audio and subtitle tracks. | ||
| --- | ||
|
|
||
| <script setup> | ||
| import TitleIcon from "@theme/components/TitleIcon.vue"; | ||
| </script> | ||
|
|
||
| # Audio and subtitle settings | ||
|
|
||
| Additional settings for audio and subtitle tracks. | ||
|
|
||
| ## Delay | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| ### Remember audio delay <Badge text="Off" type="info" /> | ||
|
|
||
| If enabled, audio delay will be saved. Otherwise it will reset upon exiting the player. | ||
|
|
||
| ### Audio delay <Badge text="0 ms" type="info" /> | ||
|
|
||
| Delay for audio, in milliseconds. | ||
|
|
||
| ### Remember subtitle delay <Badge text="Off" type="info" /> | ||
|
|
||
| If enabled, audio delay will be saved. Otherwise it will reset upon exiting the player. | ||
|
|
||
| ### subtitle delay <Badge text="0 ms" type="info" /> | ||
|
|
||
| Delay for subtitle, in milliseconds. | ||
|
|
||
| ## Font | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| Tab to customize some aspects of the subtitles, along with a preview window. | ||
|
|
||
| ### <TitleIcon name="font_family"/> Font family <Badge text="Sans serif" type="info" /> | ||
|
|
||
| <!-- TODO: add link to `data and storage` when/if it get its own page for `Storage location` --> | ||
| Tap to get a dropdown of available fonts placed in the `fonts` subdirectory for `Storage location`. | ||
|
|
||
| ### Font size <Badge text="55" type="info" /> | ||
|
|
||
| Font size used. | ||
|
|
||
| ### <TitleIcon name="font_bold"/> Bold <Badge text="Off" type="info" /> | ||
|
|
||
| Tap to toggle between bold styling. | ||
|
|
||
| ### <TitleIcon name="font_italic"/> Bold <Badge text="Off" type="info" /> | ||
|
|
||
| Tap to toggle between italic styling. | ||
|
|
||
| ### Override ASS subtitles <Badge text="Off" type="info" /> | ||
|
|
||
| When enabled, styling will apply to `.ass/.ssa` subtitles as well. | ||
|
|
||
| ## Color | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| ### Text <Badge text="#FFFFFFFF" type="info" /> | ||
|
|
||
| Color of the text. Tap to show sliders. | ||
|
|
||
| ### Border <Badge text="#FF000000" type="info" /> | ||
|
|
||
| Color of the text border. Tap to show sliders. | ||
|
|
||
| ### Background <Badge text="#00000000" type="info" /> | ||
|
|
||
| Color of the text background. Tap to show sliders. | ||
|
|
||
| ## Example configurations | ||
|
|
||
| TBA |
Oops, something went wrong.