mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Improve download video UI
This commit is contained in:
parent
cd96cdfce2
commit
ff75764cdc
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -45,8 +45,8 @@
|
||||
"download-audio.min.js": "1F4536DE4FF302BFD026CA17E028AF8EB037FB6D0CB355692549DECAEAE0E8C9",
|
||||
"download-danmaku.min.js": "B254644525ABF064DB770FE986D2AB88063406783EC0538004EFBE0E2B2ACD62",
|
||||
"download-video-package.min.js": "9460B7FC79E4F7A2CCC35F5CC9B01A5D7476BAC9833BAD15917C6806C488E17E",
|
||||
"download-video.min.css": "B570412DD5A8AA9C10020600084CE5EB520E92CDDA03B78450E6480B6A60DB3C",
|
||||
"download-video.min.html": "08F44F7F2A6C7680D89F229CA9A99FFBCDBE2CC79C912AD6432750FC631E667E",
|
||||
"download-video.min.css": "842EAD9A022DAEC63536CB05EE3F457FA0AC1CE8A5AF04F1254465A8473E1F23",
|
||||
"download-video.min.html": "3895A4A80589993C9C34C5A0E97C2C217B9356928FE5A16DF7DDBB4B723E8D1F",
|
||||
"download-video.min.js": "6CAC0A0EFB6B3C196027D8338B50334A1BE1D02B953536BC16D7AEE9C507DB4B",
|
||||
"dpi-img.vue.min.js": "3D9D93079365DCABA8DC8970F051AD1A7F25C3EFFF850CD1000C4312E9B910DD",
|
||||
"expand-danmaku.min.js": "B21658C40085AEA8DC49652AE62EB8610BB2EBEAF7A9C9AF69EF3B11E08EEC8D",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/download-video.min.css
vendored
2
min/download-video.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
<div class=download-video><a v-bind:href=blobUrl id=video-complete style="display: none"></a><div class=header><h1>下载视频</h1><i class="mdi mdi-close"v-on:click=close()></i></div><div v-if=batch class=tabs><div class="tab download-single"v-bind:class="{active: downloadSingle}"v-on:click="downloadSingle = true">单个视频</div><div class="tab download-batch"v-bind:class="{active: !downloadSingle}"v-on:click="downloadSingle = false">批量导出</div></div><div v-show=downloadSingle class=info><img v-bind:src=coverUrl class=cover><div class=title><span class=size><div v-if=sizeWarning class=size-warning><i class="mdi mdi-alert-circle"></i><div class=size-warning-tip>警告: 过大的视频大小会在直接下载时占用大量内存, 并可能导致浏览器标签页崩溃. 请考虑降低清晰度或使用导出选项.</div></div>预计大小: {{displaySize}}</span></div></div><div class=options><div class=option-item v-if=enableDash>格式<v-dropdown style="text-transform: uppercase;"v-on:change=dashChange() v-bind:items=dashModel.items v-bind:value.sync=dashModel.value></v-dropdown></div><div class=option-item>清晰度<v-dropdown v-on:change=formatChange() v-bind:items=qualityModel.items v-bind:value.sync=qualityModel.value></v-dropdown></div><div class=option-item>弹幕<v-dropdown v-on:change=danmakuOptionChange() v-bind:items=danmakuModel.items v-bind:value.sync=danmakuModel.value></v-dropdown></div><div class=option-item v-if=enableDash>ffmpeg支持<v-dropdown v-on:change=ffmpegChange() v-bind:items=ffmpegModel.items v-bind:value.sync=ffmpegModel.value></v-dropdown></div></div><div class=separator></div><div v-show=downloadSingle class=direct-download><div class=direct-download-header><h2>直接下载</h2><span class=download-speed>{{speed}}</span></div><button v-if=!downloading class="primary start-download"v-on:click=startDownload()>开始</button><button v-else class="primary cancel-download"v-on:click=cancelDownload()>取消</button><div class=progress><div class=background><div class=foreground v-bind:style="{width: progressPercent + '%'}"></div></div><span class=percent>{{progressPercent}}%</span></div></div><div v-show=!downloadSingle class=batch-download><div class=episode-header><h2>选集</h2><button class=list-tool title=全选 v-on:click=selectAllEpisodes()><i class="mdi mdi-checkbox-multiple-marked-circle"></i></button><button class=list-tool title=全不选 v-on:click=unselectAllEpisodes()><i class="mdi mdi-checkbox-multiple-blank-circle-outline"></i></button><button class=list-tool title=反选 v-on:click=inverseAllEpisodes()><i class="mdi mdi-circle-slice-4"></i></button><span class=selected-count>{{selectedEpisodeCount}}/{{episodeList.length}}</span></div><div class=episode-list><v-checkbox v-for="ep of episodeList"v-bind:key=ep.index v-bind:title=ep.title v-bind:checked.sync=ep.checked></v-checkbox></div></div><div class=separator></div><div class=exports><h2>导出</h2><div class=actions v-bind:class="{busy: busy}"><button class=show-link v-bind:disabled="downloadSingle ? null : 'disabled'"v-on:click="exportData('showLink')">显示链接</button><button class=aria2-file v-on:click="exportData('aria2')">aria2</button><div class="button aria2-rpc"v-on:click.self=toggleRpcSettings()>{{showRpcSettings ? '取消' : 'aria2 RPC'}}<i :class="{'mdi-close': showRpcSettings, 'mdi-chevron-right': !showRpcSettings}"class=mdi v-on:click.self=toggleRpcSettings()></i><div class=rpc-settings v-bind:class="{show: showRpcSettings}"><h1>aria2 RPC</h1><rpc-profiles @profile-change=updateProfile></rpc-profiles><h2>配置</h2><div class=rpc-settings-item>主机<input type=text v-model=rpcSettings.host placeholder=127.0.0.1></div><div class=rpc-settings-item>端口<input type=text v-model=rpcSettings.port placeholder=6800></div><div class=rpc-settings-item>密钥<input type=text v-model=rpcSettings.secretKey></div><div class=rpc-settings-item>限速<input type=text v-model=rpcSettings.maxDownloadLimit placeholder=无></div><div class=rpc-settings-item>默认路径<input type=text v-model=rpcSettings.baseDir></div><div class=rpc-settings-item>路径<input type=text v-model=rpcSettings.dir></div><div class=final-dir>最终路径: {{rpcSettings.baseDir + rpcSettings.dir}}</div><div class=rpc-settings-item>方法<v-dropdown style="text-transform: uppercase;"v-bind:items="['get', 'post']"v-bind:value.sync=rpcSettings.method></v-dropdown></div><div class=operations><div class="primary button"v-on:click="saveRpcSettings();toggleRpcSettings();exportData('aria2RPC')">开始下载</div><div class=button v-on:click=saveRpcSettings()>{{saveRpcSettingsText}}</div></div></div></div></div></div></div>
|
||||
<div class=download-video><a v-bind:href=blobUrl id=video-complete style="display: none"></a><div class=header><i class="mdi mdi-download"></i><h1>下载视频</h1><div class=grow></div><i class="mdi mdi-close"v-on:click=close()></i></div><div v-if=batch class=tabs><div class="tab download-single"v-bind:class="{active: downloadSingle}"v-on:click="downloadSingle = true">单个视频</div><div class="tab download-batch"v-bind:class="{active: !downloadSingle}"v-on:click="downloadSingle = false">批量导出</div></div><div v-show=downloadSingle class=info><img v-bind:src=coverUrl class=cover><div class=title><span class=size><div v-if=sizeWarning class=size-warning><i class="mdi mdi-alert-circle"></i><div class=size-warning-tip>警告: 过大的视频大小会在直接下载时占用大量内存, 并可能导致浏览器标签页崩溃. 请考虑降低清晰度或使用导出选项.</div></div>预计大小: {{displaySize}}</span></div></div><div class=options><div class=option-item v-if=enableDash>格式<v-dropdown style="text-transform: uppercase;"v-on:change=dashChange() v-bind:items=dashModel.items v-bind:value.sync=dashModel.value></v-dropdown></div><div class=option-item>清晰度<v-dropdown v-on:change=formatChange() v-bind:items=qualityModel.items v-bind:value.sync=qualityModel.value></v-dropdown></div><div class=option-item>弹幕<v-dropdown v-on:change=danmakuOptionChange() v-bind:items=danmakuModel.items v-bind:value.sync=danmakuModel.value></v-dropdown></div><div class=option-item v-if=enableDash>ffmpeg支持<v-dropdown v-on:change=ffmpegChange() v-bind:items=ffmpegModel.items v-bind:value.sync=ffmpegModel.value></v-dropdown></div></div><div class=separator></div><div v-show=downloadSingle class=direct-download><div class=direct-download-header><h2>直接下载</h2><span class=download-speed>{{speed}}</span></div><button v-if=!downloading class="primary start-download"v-on:click=startDownload()>开始</button><button v-else class="primary cancel-download"v-on:click=cancelDownload()>取消</button><div class=progress><div class=background><div class=foreground v-bind:style="{width: progressPercent + '%'}"></div></div><span class=percent>{{progressPercent}}%</span></div></div><div v-show=!downloadSingle class=batch-download><div class=episode-header><h2>选集</h2><button class=list-tool title=全选 v-on:click=selectAllEpisodes()><i class="mdi mdi-checkbox-multiple-marked-circle"></i></button><button class=list-tool title=全不选 v-on:click=unselectAllEpisodes()><i class="mdi mdi-checkbox-multiple-blank-circle-outline"></i></button><button class=list-tool title=反选 v-on:click=inverseAllEpisodes()><i class="mdi mdi-circle-slice-4"></i></button><span class=selected-count>{{selectedEpisodeCount}}/{{episodeList.length}}</span></div><div class=episode-list><v-checkbox v-for="ep of episodeList"v-bind:key=ep.index v-bind:title=ep.title v-bind:checked.sync=ep.checked></v-checkbox></div></div><div class=separator></div><div class=exports><h2>导出</h2><div class=actions v-bind:class="{busy: busy}"><button class=show-link v-bind:disabled="downloadSingle ? null : 'disabled'"v-on:click="exportData('showLink')">显示链接</button><button class=aria2-file v-on:click="exportData('aria2')">aria2</button><div class="button aria2-rpc"v-on:click.self=toggleRpcSettings()>{{showRpcSettings ? '取消' : 'aria2 RPC'}}<i :class="{'mdi-close': showRpcSettings, 'mdi-chevron-right': !showRpcSettings}"class=mdi v-on:click.self=toggleRpcSettings()></i><div class=rpc-settings v-bind:class="{show: showRpcSettings}"><h1>aria2 RPC</h1><rpc-profiles @profile-change=updateProfile></rpc-profiles><h2>配置</h2><div class=rpc-settings-item>主机<input type=text v-model=rpcSettings.host placeholder=127.0.0.1></div><div class=rpc-settings-item>端口<input type=text v-model=rpcSettings.port placeholder=6800></div><div class=rpc-settings-item>密钥<input type=text v-model=rpcSettings.secretKey></div><div class=rpc-settings-item>限速<input type=text v-model=rpcSettings.maxDownloadLimit placeholder=无></div><div class=rpc-settings-item>默认路径<input type=text v-model=rpcSettings.baseDir></div><div class=rpc-settings-item>路径<input type=text v-model=rpcSettings.dir></div><div class=final-dir>最终路径: {{rpcSettings.baseDir + rpcSettings.dir}}</div><div class=rpc-settings-item>方法<v-dropdown style="text-transform: uppercase;"v-bind:items="['get', 'post']"v-bind:value.sync=rpcSettings.method></v-dropdown></div><div class=operations><div class="primary button"v-on:click="saveRpcSettings();toggleRpcSettings();exportData('aria2RPC')">开始下载</div><div class=button v-on:click=saveRpcSettings()>{{saveRpcSettingsText}}</div></div></div></div></div></div></div>
|
||||
@ -1,7 +1,9 @@
|
||||
<div class="download-video">
|
||||
<a v-bind:href="blobUrl" id="video-complete" style="display: none"></a>
|
||||
<div class="header">
|
||||
<i class="mdi mdi-download"></i>
|
||||
<h1>下载视频</h1>
|
||||
<div class="grow"></div>
|
||||
<i class="mdi mdi-close" v-on:click="close()"></i>
|
||||
</div>
|
||||
<div v-if="batch" class="tabs">
|
||||
|
||||
@ -49,29 +49,42 @@
|
||||
}
|
||||
}
|
||||
.cover {
|
||||
width: 240px;
|
||||
min-height: 135px;
|
||||
max-height: 200px;
|
||||
min-height: 100px;
|
||||
max-height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
h1 {
|
||||
font-size: 13pt;
|
||||
font-weight: bold;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
h2 {
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
h1 {
|
||||
.mdi-download {
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
color: var(--download-video-foreground);
|
||||
margin-right: 8px;
|
||||
}
|
||||
.header .mdi-close {
|
||||
.mdi-close {
|
||||
font-size: 16pt;
|
||||
color: var(--download-video-foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
.header .mdi-close:hover {
|
||||
.mdi-close:hover {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -115,15 +128,33 @@
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
padding-top: 12px;
|
||||
padding: 12px 0;
|
||||
font-size: 10pt;
|
||||
.tab {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
&.active {
|
||||
color: var(--theme-color);
|
||||
border-bottom-color: var(--theme-color);
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
background-color: var(--theme-color);
|
||||
height: 3px;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
bottom: -8px;
|
||||
transition: 0.2s ease-out;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
&.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -134,11 +165,6 @@
|
||||
margin: 12px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
color: var(--download-video-foreground);
|
||||
}
|
||||
.direct-download {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user