danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #537 from arabcoders/dev

Browse source 
Refactor: more UX consistency changes
This commit is contained in:
Abdulmohsen 2026-01-06 18:02:40 +03:00 committed by GitHub
commit 163be08803
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 26 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/app/components/History.vue
View file

@ -114,11 +114,12 @@
</label> </label>
</td> </td>
<td class="is-text-overflow is-vcentered"> <td class="is-text-overflow is-vcentered">
<div class="is-inline is-pulled-right" v-if="item.extras?.duration || item?.download_dir"> <div class="is-inline is-pulled-right"
v-if="item.extras?.duration || getPath(config.app.download_path, item)">
<span class="tag is-info is-unselectable" v-if="item.extras?.duration"> <span class="tag is-info is-unselectable" v-if="item.extras?.duration">
{{ formatTime(item.extras.duration) }} {{ formatTime(item.extras.duration) }}
</span> </span>
<span class="icon is-pointer" v-if="item.download_dir" <span class="icon is-pointer" v-if="getPath(config.app.download_path, item)"
v-tooltip="`Path: ${getPath(config.app.download_path, item)}`"> v-tooltip="`Path: ${getPath(config.app.download_path, item)}`">
<i class="fa-solid fa-folder-open" /> <i class="fa-solid fa-folder-open" />
</span> </span>
@ -135,8 +136,8 @@
<span class="tag is-info is-unselectable">{{ item.preset }}</span> <span class="tag is-info is-unselectable">{{ item.preset }}</span>
</strong> </strong>
</template> </template>
<img v-if="showThumbnails && getImage(config.app.download_path, item)" <img v-if="showThumbnails && getImage(config.app.download_path, item, false)"
:src="getImage(config.app.download_path, item)" class="mt-2 mb-2" /> :src="getImage(config.app.download_path, item, false)" class="mt-2 mb-2" />
<p v-if="item.description">{{ item.description }}</p> <p v-if="item.description">{{ item.description }}</p>
</Popover> </Popover>
</div> </div>
@ -276,7 +277,7 @@
</span> </span>
</div> </div>
<div class="control" v-if="item.download_dir"> <div class="control" v-if="getPath(config.app.download_path, item)">
<span class="icon" v-tooltip="`Path: ${getPath(config.app.download_path, item)}`"> <span class="icon" v-tooltip="`Path: ${getPath(config.app.download_path, item)}`">
<i class="fa-solid fa-folder-open" /> <i class="fa-solid fa-folder-open" />
</span> </span>

6
ui/app/pages/conditions.vue
View file

@ -235,9 +235,9 @@
<div class="message is-info"> <div class="message is-info">
<div class="message-body content pl-0"> <div class="message-body content pl-0">
<ul> <ul>
<li>Filtering is based on yt-dlp’s <b>--match-filter</b> logic. Any expression that works with yt-dlp <li>Filtering is based on yt-dlp’s <code>--match-filter</code> logic. Any expression that works with yt-dlp
will also work here, including the same boolean operators. We added extended support for the will also work here, including the same boolean operators. We added extended support for the
<b>OR</b> ( <b>||</b> ) operator, which yt-dlp does not natively support. This allows you to combine <code>OR</code> ( <code>||</code> ) operator, which yt-dlp does not natively support. This allows you to combine
multiple conditions more flexibly. multiple conditions more flexibly.
</li> </li>
<li> <li>
@ -245,7 +245,7 @@
</li> </li>
<li> <li>
For example, i follow specific channel that sometimes region lock some videos, by using the following For example, i follow specific channel that sometimes region lock some videos, by using the following
filter i am able to bypass it <b>availability = 'needs_auth' & channel_id = 'channel_id'</b>. filter i am able to bypass it <code>availability = 'needs_auth' & channel_id = 'channel_id'</code>.
and set proxy for that specific video, while leaving the rest of the videos to be downloaded normally. and set proxy for that specific video, while leaving the rest of the videos to be downloaded normally.
</li> </li>
<li> <li>

16
ui/app/pages/notifications.vue
View file

@ -218,22 +218,22 @@
<div class="message-body content pl-0"> <div class="message-body content pl-0">
<ul> <ul>
<li> <li>
When you export notification target, We remove <b>Authorization</b> header key by default, When you export notification target, We remove <code>Authorization</code> header key by default,
However this might not be enough to remove credentials from the exported data. it's your responsibility However this might not be enough to remove credentials from the exported data. it's your responsibility
to ensure that the exported data does not contain any sensitive information for sharing. to ensure that the exported data does not contain any sensitive information for sharing.
</li> </li>
<li> <li>
When you set the request type as <b>Form</b>, the event data will be JSON encoded and sent as When you set the request type as <code>Form</code>, the event data will be JSON encoded and sent as
<b>...&data_key=json_string</b>, only the <b>data</b> field will be JSON encoded. <code>...&data_key=json_string</code>, only the <code>data</code> field will be JSON encoded.
The other keys <b>id</b>, <b>event</b> and <b>created_at</b> will be sent as they are. The other keys <code>id</code>, <code>event</code> and <code>created_at</code> will be sent as they are.
</li> </li>
<li>We also send two special headers <b>X-Event-ID</b> and <b>X-Event</b> with the request.</li> <li>We also send two special headers <code>X-Event-ID</code> and <code>X-Event</code> with the request.</li>
<li> <li>
If you have selected specific presets or events, this will take priority, For example, if you limited the If you have selected specific presets or events, this will take priority, For example, if you limited the
target to <b>default</b> preset and selected <b>ALL</b> events, only events that reference the target to <code>default</code> preset and selected <code>ALL</code> events, only events that reference the
<b>default</b> preset will be sent to that target. Like wise, if you have limited both events and <code>default</code> preset will be sent to that target. Like wise, if you have limited both events and
presets, then ONLY events that satisfy both conditions will be sent to that target. Only the presets, then ONLY events that satisfy both conditions will be sent to that target. Only the
<b>test</b> events can bypass these conditions. <code>test</code> events can bypass these conditions.
</li> </li>
</ul> </ul>
</div> </div>

17
ui/app/utils/index.ts
View file

@ -792,26 +792,27 @@ const deepIncludes = (
} }
const getPath = (basePath: string, item: StoreItem): string => { const getPath = (basePath: string, item: StoreItem): string => {
if (!item.download_dir) { if (!item.folder && ((!item.filename && item.download_dir === basePath) || !item.download_dir)) {
return '' return shortPath(basePath)
} }
if (!item?.filename) { if (!item?.filename) {
return item.download_dir return stripPath(eTrim(basePath, '/'), '/' + sTrim(eTrim(item.download_dir || item.folder, '/'), '/'))
} }
return stripPath(basePath, eTrim(item.download_dir, '/') + '/' + sTrim(item.filename, '/')) return stripPath(eTrim(basePath, '/'), '/' + eTrim(item.download_dir, '/') + '/' + sTrim(item.filename, '/'))
} }
const getImage = (basePath: string, item: StoreItem): string => {
const getImage = (basePath: string, item: StoreItem, fallback: boolean = true): string => {
if (item.sidecar?.image && item.sidecar.image.length > 0) { if (item.sidecar?.image && item.sidecar.image.length > 0) {
return uri('/api/download/' + encodeURIComponent(stripPath(basePath, item.sidecar.image[0]?.file || ''))) return uri('/api/download/' + encodeURIComponent(stripPath(basePath, item.sidecar.image[0]?.file || '')))
} }
if (!item?.extras?.thumbnail) { if (item?.extras?.thumbnail) {
return '/images/placeholder.png' return uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))
} }
return uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail)) return fallback ? uri('/images/placeholder.png') : ''
} }
export { export {