Skip to content

Commit 92b5724

Browse files
HoangTran0410HoangTran0410
committed
update UI
1 parent 9e4c5f2 commit 92b5724

File tree

2 files changed

+97
-44
lines changed

2 files changed

+97
-44
lines changed

‎scripts/tiktok_batchDownload.css‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,10 @@
5151
}
5252

5353
.ufs_popup .ufs_popup_header {
54-
align-self: flex-end;
5554
padding: 10px;
55+
width: 100%;
56+
display: flex;
57+
justify-content: flex-end;
5658
}
5759

5860
.ufs_popup .table_wrap {
@@ -85,7 +87,7 @@
8587
}
8688

8789
.ufs_popup button {
88-
padding: 5px;
90+
padding: 5px 10px;
8991
background: #333;
9092
color: #eee;
9193
border: 1px solid #777;
@@ -112,7 +114,7 @@
112114
background: #666;
113115
}
114116

115-
.ufs_popup .ufs-scroll-to-top {
117+
.ufs_popup .ufs_scroll_top {
116118
position: absolute;
117119
bottom: 10px;
118120
right: 10px;
@@ -148,7 +150,30 @@
148150
transform: scale(1.3);
149151
}
150152

151-
.ufs-video-checkbox {
153+
.ufs_video_checkbox {
152154
width: 30px;
153155
height: 30px;
154156
}
157+
158+
.ufs_dropdown {
159+
position: relative;
160+
display: flex;
161+
flex-direction: column;
162+
justify-content: center;
163+
}
164+
165+
.ufs_dropdown .ufs_dropdown_content {
166+
visibility: hidden;
167+
overflow: hidden;
168+
position: absolute;
169+
width: max-content;
170+
top: 100%;
171+
z-index: 2;
172+
display: flex;
173+
flex-direction: column;
174+
}
175+
176+
.ufs_dropdown .ufs_dropdown_trigger:hover~.ufs_dropdown_content,
177+
.ufs_dropdown .ufs_dropdown_content:hover {
178+
visibility: visible;
179+
}

‎scripts/tiktok_batchDownload.js‎

Lines changed: 68 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { UfsGlobal } from "./content-scripts/ufs_global.js";
22
import { hookFetch } from "./libs/ajax-hook/index.js";
3+
import { scrollToVeryEnd } from "./scrollToVeryEnd.js";
34

45
export default {
56
icon: "https://www.tiktok.com/favicon.ico",
@@ -84,11 +85,21 @@ export default {
8485
<h2 style="text-align:center">Found {{totalCount}} videos</h2>
8586
8687
<div class="ufs_popup_header">
87-
<button id="clear" @click="clear">🗑️ Clear</button>
88-
<button id="json" @click="downloadJson">📄 Download json</button>
89-
<button id="audio" @click="downloadAudio">🎧 {{audioTitle}}</button>
90-
<button id="video" @click="downloadVideo">🎬 {{videoTitle}}</button>
91-
<input type="text" id="search" placeholder="🔎 Search..." :value="search" @input="e => search = e.target.value" >
88+
<button @click="scrollToVeryEnd">⏬ Auto scroll</button>
89+
<div class="ufs_dropdown">
90+
<button @click="clear" class="ufs_dropdown_trigger">🗑️ Clear</button>
91+
<div class="ufs_dropdown_content" v-if="selectedCount > 0">
92+
<button @click="clearSelected">🗑️ Remove {{selectedCount}} selected</button>
93+
</div>
94+
</div>
95+
<div class="ufs_dropdown">
96+
<button @click="downloadVideo" class="ufs_dropdown_trigger">🎬 {{videoTitle}}</button>
97+
<div class="ufs_dropdown_content">
98+
<button @click="downloadAudio">🎧 {{audioTitle}}</button>
99+
<button @click="downloadJson">📄 Download json</button>
100+
</div>
101+
</div>
102+
<input type="text" placeholder="🔎 Search..." :value="search" @input="e => search = e.target.value" >
92103
</div>
93104
94105
<div class="table_wrap">
@@ -105,44 +116,44 @@ export default {
105116
</tr>
106117
</thead>
107118
<tbody>
108-
<tr v-if="videosToShow.length === 0">
109-
<td colspan="7"><h2 style="text-align:center">No video</h2></td>
110-
</tr>
111-
<tr v-for="v in videosToShow" :key="v.id">
112-
<td style="text-align:center">{{v.index}}<br/>
113-
<input type="checkbox" v-model="selected[v.id]" class="ufs-video-checkbox" />
114-
</td>
115-
<td>
116-
<a target="_blank" :href="v.video.playAddr">
117-
<img :src="v.video.cover" style="width:150px" />
118-
</a>
119-
</td>
120-
<td><p style="max-width:200px">{{v.desc}}</p></td>
121-
<td>
122-
<img :src="v.author.avatarThumb" class="ufs_avatar" @click="openUser(v.author.uniqueId)"/>
123-
{{v.author.nickname}}<br/>
124-
{{v.author.uniqueId}}<br/>
125-
{{v.author.id}}
126-
</td>
127-
<td>{{format(v.stats.playCount)}}</td>
128-
<td>{{v.video.duration}}s</td>
129-
<td>
130-
<p style="max-width:200px">
131-
<a :href="v.video.playAddr" v-if="v.video.playAddr" target="_blank">🎬 Video</a><br/>
132-
<a :href="v.video.cover" target="_blank">🖼️ Cover</a><br/>
133-
<a :href="v.author.avatarLarger" target="_blank">
134-
👤 Avatar
135-
</a><br/>
136-
<a :href="v.music.playUrl" target="_blank">
137-
🎧 Music: {{v.music.title}}
119+
<tr v-if="videosToShow.length === 0">
120+
<td colspan="7"><h2 style="text-align:center">No video</h2></td>
121+
</tr>
122+
<tr v-for="v in videosToShow" :key="v.id">
123+
<td style="text-align:center">{{v.index}}<br/>
124+
<input type="checkbox" v-model="selected[v.id]" class="ufs_video_checkbox" />
125+
</td>
126+
<td>
127+
<a target="_blank" :href="v.video.playAddr">
128+
<img :src="v.video.dynamicCover || v.video.originCover || v.video.cover" style="width:150px" />
138129
</a>
139-
</p>
140-
</td>
141-
</tr>
130+
</td>
131+
<td><p style="max-width:200px">{{v.desc}}</p></td>
132+
<td>
133+
<img :src="v.author.avatarThumb" class="ufs_avatar" @click="openUser(v.author.uniqueId)"/>
134+
{{v.author.nickname}}<br/>
135+
{{v.author.uniqueId}}<br/>
136+
{{v.author.id}}
137+
</td>
138+
<td>{{format(v.stats.playCount)}}</td>
139+
<td>{{v.video.duration}}s</td>
140+
<td>
141+
<p style="max-width:200px">
142+
<a :href="v.video.playAddr" v-if="v.video.playAddr" target="_blank">🎬 Video</a><br/>
143+
<a :href="v.video.cover" target="_blank">🖼️ Cover</a><br/>
144+
<a :href="v.author.avatarLarger" target="_blank">
145+
👤 Avatar
146+
</a><br/>
147+
<a :href="v.music.playUrl" target="_blank">
148+
🎧 Music: {{v.music.title}}
149+
</a>
150+
</p>
151+
</td>
152+
</tr>
142153
</tbody>
143154
</table>
144155
145-
<button v-if="videosToShow.length > 2" @click="scrollToTop" class="ufs-scroll-to-top">⬆</button>
156+
<button v-if="videosToShow.length > 2" @click="scrollToTop" class="ufs_scroll_top">⬆</button>
146157
</div>
147158
</div>
148159
</div>
@@ -166,8 +177,16 @@ export default {
166177
};
167178
},
168179
computed: {
180+
selectedIds() {
181+
return Object.entries(this.selected)
182+
.filter((v) => v[1])
183+
.map((v) => v[0]);
184+
},
185+
selectedCount() {
186+
return Object.values(this.selected).filter((v) => v).length;
187+
},
169188
hasSelected() {
170-
return Object.values(this.selected).find((v) => v);
189+
return this.selectedCount > 0;
171190
},
172191
videoToDownload() {
173192
return this.hasSelected
@@ -355,9 +374,18 @@ export default {
355374
this.videosToShow.length + "_videos_tiktok.json"
356375
);
357376
},
377+
scrollToVeryEnd() {
378+
setTimeout(() => scrollToVeryEnd(), 100);
379+
},
358380
scrollToTop(e) {
359381
e.target.parentElement.scrollTo({ top: 0, behavior: "smooth" });
360382
},
383+
clearSelected() {
384+
this.selectedIds.forEach((vidId) => {
385+
CACHED.videoById.delete(vidId);
386+
});
387+
this.selected = {};
388+
},
361389
clear() {
362390
if (confirm("Are you sure want to clear all?")) {
363391
CACHED.videoById.clear();

0 commit comments

Comments
 (0)