minor fixes to file listing, and unifiy how we present tips
This commit is contained in:
arabcoders
parent
75911d01dc
commit
211089bead
6 changed files with 93 additions and 57 deletions
|
|
@ -145,7 +145,8 @@
|
|||
style="min-width: 1300px; table-layout: fixed;">
|
||||
<thead>
|
||||
<tr class="has-text-centered is-unselectable">
|
||||
<th colspan="2" width="10%">
|
||||
<th :colspan="config.app.browser_control_enabled ? 2 : 1"
|
||||
:width="config.app.browser_control_enabled ? '10%' : '5%'">
|
||||
#
|
||||
<span class="icon" v-if="'type' === sort_by">
|
||||
<i class="fas"
|
||||
|
|
@ -263,20 +264,19 @@
|
|||
<div class="card is-flex is-full-height is-flex-direction-column">
|
||||
<header class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block">
|
||||
<span class="icon"> <i class="fas fa-solid" :class="setIcon(item)" /></span>
|
||||
<a :href="uri(`/browser/${item.path}`)" v-if="'dir' === item.content_type"
|
||||
@click.prevent="handleClick(item)" v-tooltip="item.name">
|
||||
<span class="icon"> <i class="fas fa-solid" :class="setIcon(item)" /></span>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
<a :href="makeDownload({}, { filename: item.path, folder: '' })" @click.prevent="handleClick(item)"
|
||||
v-tooltip="item.name" v-else>
|
||||
<span class="icon"> <i class="fas fa-solid" :class="setIcon(item)" /></span>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-header-icon">
|
||||
<div class="field is-grouped">
|
||||
<div class="control" v-if="'file' === item.type">
|
||||
<div class="control" v-if="'file' === item.type && config.app.browser_control_enabled">
|
||||
<a :href="makeDownload({}, { filename: item.path, folder: '' })"
|
||||
:download="item.name.split('/').reverse()[0]" class="has-text-link" v-tooltip="`Download File`">
|
||||
<span class="icon"><i class="fa-solid fa-download" /></span>
|
||||
|
|
@ -291,6 +291,13 @@
|
|||
</div>
|
||||
</header>
|
||||
<div class="card-footer mt-auto">
|
||||
<div class="card-footer-item" v-if="'file' === item.type && !config.app.browser_control_enabled">
|
||||
<a :href="makeDownload({}, { filename: item.path, folder: '' })"
|
||||
:download="item.name.split('/').reverse()[0]" class="has-text-link" v-tooltip="`Download File`">
|
||||
<span class="icon"><i class="fa-solid fa-download" /></span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-footer-item" v-if="config.app.browser_control_enabled">
|
||||
<a class="has-text-danger" @click="handleAction('delete', item)">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
|
|
@ -351,6 +358,15 @@
|
|||
No content found in this directory.
|
||||
</Message>
|
||||
</div>
|
||||
<div class="column is-12" v-if="!config.app.browser_control_enabled">
|
||||
<div class="message is-info">
|
||||
<p class="message-body">
|
||||
<span class="icon"> <i class="fas fa-info-circle" /></span>
|
||||
You can enable file controls such as rename, delete, move, and create directory by setting
|
||||
<code>YTP_BROWSER_CONTROL_ENABLED=true</code> in your environment configuration and restart the application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal is-active" v-if="model_item">
|
||||
|
|
|
|||
|
|
@ -98,27 +98,30 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="column is-12" v-if="items && items.length > 0 && !toggleForm">
|
||||
<Message message_class="has-background-info-90 has-text-dark" title="Tips" icon="fas fa-info-circle">
|
||||
<ul>
|
||||
<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 <code>OR</code>
|
||||
( <code>||</code> ) operator, which yt-dlp does not natively support. This allows you to combine multiple
|
||||
conditions more flexibly.</li>
|
||||
<li>
|
||||
The primary use case for this feature is to apply custom cli arguments to specific returned info.
|
||||
</li>
|
||||
<li>
|
||||
For example, i follow specific channel that sometimes region lock some videos, by using the following
|
||||
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.
|
||||
</li>
|
||||
<li>
|
||||
The data which the filter is applied on is the same data that yt-dlp returns, simply, click on the
|
||||
information button, and check the data to craft your filter. You will get instant feedback if the
|
||||
filter matches or not.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
<div class="message is-info">
|
||||
<div class="message-body content pl-0">
|
||||
<ul>
|
||||
<li>Filtering is based on yt-dlp’s <b>--match-filter</b> logic. Any expression that works with yt-dlp
|
||||
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
|
||||
multiple conditions more flexibly.
|
||||
</li>
|
||||
<li>
|
||||
The primary use case for this feature is to apply custom cli arguments to specific returned info.
|
||||
</li>
|
||||
<li>
|
||||
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>.
|
||||
and set proxy for that specific video, while leaving the rest of the videos to be downloaded normally.
|
||||
</li>
|
||||
<li>
|
||||
The data which the filter is applied on is the same data that yt-dlp returns, simply, click on the
|
||||
information button, and check the data to craft your filter. You will get instant feedback if the
|
||||
filter matches or not.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@
|
|||
</p>
|
||||
<p v-if="item.request?.headers && item.request.headers.length > 0">
|
||||
<span class="icon"><i class="fa-solid fa-heading" /></span>
|
||||
<span>{{ item.request.headers.map(h => h.key).join(', ') }}</span>
|
||||
<span>{{item.request.headers.map(h => h.key).join(', ')}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -193,28 +193,30 @@
|
|||
</div>
|
||||
|
||||
<div class="column is-12" v-if="notifications && notifications.length > 0 && !toggleForm">
|
||||
<Message message_class="has-background-info-90 has-text-dark" title="Tips" icon="fas fa-info-circle">
|
||||
<ul>
|
||||
<li>
|
||||
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
|
||||
to ensure that the exported data does not contain any sensitive information for sharing.
|
||||
</li>
|
||||
<li>
|
||||
When you set the request type as <code>Form</code>, the event data will be JSON encoded and sent as
|
||||
<code>...&data_key=json_string</code>, only the <code>data</code> field will be JSON encoded.
|
||||
The other keys <code>id</code>, <code>event</code> and <code>created_at</code> will be sent as they are.
|
||||
</li>
|
||||
<li>We also send two special headers <code>X-Event-ID</code> and <code>X-Event</code> with the request.</li>
|
||||
<li>
|
||||
If you have selected specific presets or events, this will take priority, For example, if you limited the
|
||||
target to <code>default</code> preset and selected <code>ALL</code> events, only events that reference the
|
||||
<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
|
||||
<code>test</code> events can bypass these conditions.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
<div class="message is-info">
|
||||
<div class="message-body content pl-0">
|
||||
<ul>
|
||||
<li>
|
||||
When you export notification target, We remove <b>Authorization</b> header key by default,
|
||||
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.
|
||||
</li>
|
||||
<li>
|
||||
When you set the request type as <b>Form</b>, 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.
|
||||
The other keys <b>id</b>, <b>event</b> and <b>created_at</b> will be sent as they are.
|
||||
</li>
|
||||
<li>We also send two special headers <b>X-Event-ID</b> and <b>X-Event</b> with the request.</li>
|
||||
<li>
|
||||
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
|
||||
<b>default</b> 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
|
||||
<b>test</b> events can bypass these conditions.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -186,11 +186,13 @@
|
|||
|
||||
<div class="columns is-multiline" v-if="presets && presets.length > 0">
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-warning-90 has-text-dark">
|
||||
<p>When you export preset, it doesn't include the <strong>cookies</strong> field contents for security
|
||||
<div class="message is-info">
|
||||
<p class="message-body">
|
||||
<span class="icon"> <i class="fas fa-info-circle" /></span>
|
||||
When you export preset, it doesn't include the <strong>cookies</strong> field contents for security
|
||||
reasons.
|
||||
</p>
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -264,6 +264,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import 'assets/css/bulma-switch.css'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { POSITION } from 'vue-toastification'
|
||||
import { useConfigStore } from '~/stores/ConfigStore'
|
||||
|
|
|
|||
|
|
@ -386,16 +386,28 @@
|
|||
|
||||
<div class="columns is-multiline" v-if="!toggleForm && tasks && tasks.length > 0">
|
||||
<div class="column is-12">
|
||||
<Message title="Tips" class="is-info is-background-info-80" icon="fas fa-info-circle">
|
||||
<span>
|
||||
<div class="message is-info">
|
||||
<div class="message-body content pl-0 pt-1 pb-1">
|
||||
<ul>
|
||||
<li><strong>Selective Downloads:</strong> To avoid downloading all existing content from a channel/playlist, use <code><span class="icon"><i class="fa-solid fa-cogs" /></span> Actions > <span class="icon"><i class="fa-solid fa-box-archive" /></span> Archive All</code> to mark existing items as already downloaded.
|
||||
<li class="has-text-danger">
|
||||
<span class="icon">
|
||||
<i class="fas fa-triangle-exclamation" />
|
||||
</span>
|
||||
All tasks operations require <b>--download-archive</b> to be set in the <b>preset</b> or in the
|
||||
<b>command options for yt-dlp</b> for the task to be dispatched. If you have selected one of the built
|
||||
in presets it already includes this option and no further action is required.
|
||||
</li>
|
||||
<li><strong>Custom Handlers:</strong> Leave timer empty for custom handler definitions. The handler runs hourly and doesn't require a scheduled timer.
|
||||
<li>To avoid downloading all existing content from a channel/playlist, use <b><span class="icon"><i
|
||||
class="fa-solid fa-cogs" /></span> Actions > <span class="icon"><i
|
||||
class="fa-solid fa-box-archive" /></span> Archive All</b> to mark existing items as already
|
||||
downloaded.
|
||||
</li>
|
||||
<li><strong>Custom Handlers:</strong> Leave timer empty for custom handler definitions. The handler runs
|
||||
hourly and doesn't require a scheduled timer.
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue