1
1
import { UfsGlobal } from "./content-scripts/ufs_global.js" ;
2
2
import { hookFetch } from "./libs/ajax-hook/index.js" ;
3
+ import { scrollToVeryEnd } from "./scrollToVeryEnd.js" ;
3
4
4
5
export default {
5
6
icon : "https://www.tiktok.com/favicon.ico" ,
@@ -84,11 +85,21 @@ export default {
84
85
<h2 style="text-align:center">Found {{totalCount}} videos</h2>
85
86
86
87
<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" >
92
103
</div>
93
104
94
105
<div class="table_wrap">
@@ -105,44 +116,44 @@ export default {
105
116
</tr>
106
117
</thead>
107
118
<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" />
138
129
</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>
142
153
</tbody>
143
154
</table>
144
155
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>
146
157
</div>
147
158
</div>
148
159
</div>
@@ -166,8 +177,16 @@ export default {
166
177
} ;
167
178
} ,
168
179
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
+ } ,
169
188
hasSelected ( ) {
170
- return Object . values ( this . selected ) . find ( ( v ) => v ) ;
189
+ return this . selectedCount > 0 ;
171
190
} ,
172
191
videoToDownload ( ) {
173
192
return this . hasSelected
@@ -355,9 +374,18 @@ export default {
355
374
this . videosToShow . length + "_videos_tiktok.json"
356
375
) ;
357
376
} ,
377
+ scrollToVeryEnd ( ) {
378
+ setTimeout ( ( ) => scrollToVeryEnd ( ) , 100 ) ;
379
+ } ,
358
380
scrollToTop ( e ) {
359
381
e . target . parentElement . scrollTo ( { top : 0 , behavior : "smooth" } ) ;
360
382
} ,
383
+ clearSelected ( ) {
384
+ this . selectedIds . forEach ( ( vidId ) => {
385
+ CACHED . videoById . delete ( vidId ) ;
386
+ } ) ;
387
+ this . selected = { } ;
388
+ } ,
361
389
clear ( ) {
362
390
if ( confirm ( "Are you sure want to clear all?" ) ) {
363
391
CACHED . videoById . clear ( ) ;
0 commit comments