From 55aa360c961fe01f660219c0b47d234f28dd22de Mon Sep 17 00:00:00 2001 From: Simon Date: Sun, 26 Jan 2025 18:31:31 +0700 Subject: [PATCH] add help text to appsettings page --- frontend/src/pages/SettingsApplication.tsx | 272 ++++++++++++++++++++- frontend/src/style.css | 19 ++ 2 files changed, 285 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/SettingsApplication.tsx b/frontend/src/pages/SettingsApplication.tsx index 33f9e2d7..06dc214d 100644 --- a/frontend/src/pages/SettingsApplication.tsx +++ b/frontend/src/pages/SettingsApplication.tsx @@ -19,6 +19,7 @@ import deleteCookie from '../api/actions/deleteCookie'; import validateCookie from '../api/actions/validateCookie'; import deletePoToken from '../api/actions/deletePoToken'; import updatePoToken from '../api/actions/updatePoToken'; +import { useUserConfigStore } from '../stores/UserConfigStore'; type SnapshotType = { id: string; @@ -45,6 +46,7 @@ type SettingsApplicationReponses = { }; const SettingsApplication = () => { + const { userConfig } = useUserConfigStore(); const [response, setResponse] = useState(); const [refresh, setRefresh] = useState(false); @@ -206,8 +208,21 @@ const SettingsApplication = () => { {appSettingsConfig && (
-

Subscriptions

-

Disable shorts or streams by setting their page size to 0 (zero).

+

Subscription Scan

+ {userConfig.config.show_help_text && ( +
+

Configure how a subscription Scan tracks videos.

+
    +
  • The pagesize configures how many videos are checked.
    • +
  • Max recommended page size is 50.
    • +
  • Disable shorts or streams by setting their page size to 0 (zero).
    • +
  • + Autostart automatically starts downloading videos from subscriptions with + priority. +
    • +
+
+ )}

Videos page size

@@ -260,6 +275,36 @@ const SettingsApplication = () => {

Downloads

+ {userConfig.config.show_help_text && ( +
+
    +
  • + Limit download speed, in KB/s. Can be helpful to avoid getting blocked by YT. +
    • +
  • + Throttle rate limit restarts a download if the speed falls below the defined + limit. +
    • +
  • + The sleep interval slows down requests to YT. +
      +
    • That reduces the likelihood of getting blocked by YT.
      • +
    • + The number in seconds is randomized +/- 50% from the value you enter. +
      • +
    • Minimal recommended is 10.
      • +
    +
    • +
  • + Auto delete deletes videos marked as watched after x days. +
      +
    • The cleanup task triggers after the download finishes.
      • +
    • Can also be configured on a per channel basis.
      • +
    +
    • +
+
+ )}

Download Speed limit

@@ -301,7 +346,9 @@ const SettingsApplication = () => {
-

Auto delete watched videos after x days

+

+ Danger Zone: Auto delete watched +

{

Download Format

+ {userConfig.config.show_help_text && ( +
+
    +
  • + The download format is equivalent to -f yt-dlp argument. Examples: +
      +
    • + + {'bestvideo[height<=720]+bestaudio/best[height<=720]'} + + : best audio and max video height of 720p. +
      • +
    • + + {'bestvideo[height<=1080]+bestaudio/best[height<=1080]'} + + : best audio and max video height of 1080p. +
      • +
    • + + {'bestvideo[height<=1080][vcodec*=avc1]+bestaudio[acodec*=mp4a]/mp4'} + + : Max 1080p video height with iOS compatible video and audio codecs. +
      • +
    • This can also be configured on a per channel basis.
      • +
    • + More details{' '} + + here + + . +
      • +
    +
    • +
  • + Change the criteria what is considered best by yt-dlp. That is + equivalent to --format-sort argument. Examples: +
      +
    • + res,codec:av1: prefer AV1 over + all other video codecs. +
      • +
    • Not all codecs are supported by all browsers.
      • +
    • + More details{' '} + + here + + . +
      • +
    +
    • +
  • + Extractor language will change how a video gets indexed. Index language + configuration +
      +
    • + That will only have an effect if the uploader provides translations. +
      • +
    • Add as two letter ISO language code.
      • +
    • + More details{' '} + + here + + . +
      • +
    +
    • +
  • Embedding metadata adds additional metadata directly to the mp4 file.
    • +
  • + Embedding the thumbnail embeds the video thumbnail as a cover.jpg to the mp4 + file. +
    • +
+
+ )}
-

Limit video and audio quality format

+

Select download format for yt-dlp.

{

Subtitles

+ {userConfig.config.show_help_text && ( +
+

Additional subtitle options show once you choose a language.

+
    +
  • + Choose which subtitles to download, add comma separated language codes, e.g.{' '} + en, de, zh-Hans +
    • +
  • + Enabling auto generated subtitles adds fallback to less accurate auto + generated subtitles from YT. +
    • +
  • + Indexing subtitles add the fulltext to the ES index. Not recommended on low + end hardware. +
    • +
+
+ )}

Choose subtitle language

@@ -437,6 +586,35 @@ const SettingsApplication = () => {

Comments

+ {userConfig.config.show_help_text && ( +
+

Additional options show once you set a comment index option.

+
    +
  • + Download and index comments. Browsable on the video detail page. Example: +
      +
    • + all,100,all,30: Get 100 + max-parents and 30 max-replies-per-thread. +
      • +
    • + 1000,all,all,50: Get a total of + 1000 comments over all, 50 replies per thread. +
      • +
    • + Values are in the format:{' '} + + max-comments,max-parents,max-replies,max-replies-per-thread + + . +
      • +
    • Choose wisely, as extracting comments is slow.
      • +
    +
    • +
  • The sort order changes how comments are indexed.
    • +
+
+ )}

Index comments

@@ -472,6 +650,34 @@ const SettingsApplication = () => {
+ {userConfig.config.show_help_text && ( +
+

+ Importing your cookie will authenticate requests to YT with your user account. +

+
    +
  • Adding your cookie can avoid your requests getting blocked.
    • +
  • This expects your cookie in Netscape format.
    • +
  • + For automatic cookie import use Tube Archivist Companion{' '} + + browser extension + + . +
    • +
  • + The PO Token (Proof of origin token) can authenticate your request. + Make sure to read the{' '} + + PO guide + +
    • +
+
+ )}

Use your cookie for yt-dlp

@@ -571,6 +777,41 @@ const SettingsApplication = () => {

Integrations

+ {userConfig.config.show_help_text && ( +
+
    +
  • The API token is used to make automater requests to TA through the API.
    • +
  • + Return Youtube Dislike is a crowdsourced database of dislikes. +
      +
    • Make sure to contribute to this excellent project.
      • +
    • + More details{' '} + + here + + . +
      • +
    +
    • +
  • + Sponsorblock is a crowdsourced database of timestamps marking sponsored slots + for a video. +
      +
    • This can also be configured on a per channel basis.
      • +
    • Make sure to contribute to this excellent project.
      • +
    • + More details{' '} + + here + + . +
      • +
    +
    • +
+
+ )}

API token

@@ -596,7 +837,12 @@ const SettingsApplication = () => {
-

Enable returnyoutubedislike

+

+ Enable{' '} + + returnyoutubedislike + +

{
-

Enable Sponsorblock

+

+ Enable{' '} + + Sponsorblock + +

{

Snapshots

+ {userConfig.config.show_help_text && ( +
+

+ Automatically create daily deduplicated snapshots of the index, stored in + Elasticsearch. Restoring from snapshot replaced your current index with the + index from the snapshot. +

+
+ )}

Enable Index Snapshot

diff --git a/frontend/src/style.css b/frontend/src/style.css index 0f05e638..07c82e86 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -171,6 +171,25 @@ button:hover { color: var(--accent-font-light); } +.help-text { + width: 100%; + border-left: 1px solid var(--accent-font-light); + padding: 5px 0 5px 1rem; +} + +.help-text::before { + content: '?'; + font-size: 1.5em; + font-family: Sen-Bold, sans-serif; + color: var(--main-font); + background-color: var(--accent-font-dark); + border-radius: 50%; + width: 30px; + display: block; + height: 30px; + text-align: center; +} + .top-banner { background-image: var(--banner); background-repeat: no-repeat;