Bilibili-Evolved/video/download-video/download-video.html
2019-07-28 16:53:36 +08:00

107 lines
4.9 KiB
HTML

<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="bold" v-bind:title="'av' + aid + ' / cid' + cid">av{{aid}} / cid{{cid}}</span> -->
<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>
<!-- <span v-show="!downloadSingle" class="size">共{{episodeList.length}}P</span> -->
</div>
</div>
<div class="options">
<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>
<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="copy-link" v-bind:disabled="downloadSingle ? null : 'disabled'" v-on:click="exportData('copyLink')">复制链接</button>
<button class="aria2-file" v-on:click="exportData('aria2')">导出aria2</button>
<button class="vld-copy" v-on:click="exportData('copyVLD')">复制vld数据</button>
<button class="vld-export" v-on:click="exportData('exportVLD')">导出vld数据</button>
<div class="button aria2-rpc" v-on:click.self="toggleRpcSettings()">导出aria2 RPC
<i class="mdi mdi-chevron-right" v-on:click.self="toggleRpcSettings()"></i>
<div class="rpc-settings" v-bind:class="{show: showRpcSettings}">
<h1>aria2 RPC 配置</h1>
<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.dir">
</div>
<div class="rpc-settings-item">
方法<v-dropdown style="text-transform: uppercase;" v-bind:items="['get', 'post']" v-bind:value.sync="rpcSettings.method">
</div>
<div class="primary button" v-on:click="saveRpcSettings();toggleRpcSettings();exportData('aria2RPC')">确定</div>
</div>
</div>
<!--
<button class="idm-export">导出IDM</button>
-->
</div>
</div>
</div>