Add progress bar

This commit is contained in:
Chocobozzz 2020-09-02 15:33:15 +02:00
parent 870d710c68
commit bb359bead9
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
5 changed files with 112 additions and 18 deletions

View File

@ -16,6 +16,7 @@
"@vue/cli-service": "^4.0.5", "@vue/cli-service": "^4.0.5",
"axios": "^0.20.0", "axios": "^0.20.0",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"nprogress": "^0.2.0",
"register-service-worker": "^1.0.0", "register-service-worker": "^1.0.0",
"rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-vue": "^6.0.0-beta.10", "rollup-plugin-vue": "^6.0.0-beta.10",

View File

@ -1,4 +1,5 @@
@import "_variables"; @import "_variables";
@import "./progress";
* { * {
box-sizing: border-box; box-sizing: border-box;

View File

@ -0,0 +1,76 @@
@import "_variables";
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: $orange-darken;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px $orange-darken, 0 0 5px $orange-darken;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: $orange-darken;
border-left-color: $orange-darken;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

View File

@ -387,6 +387,7 @@
import VueTagsInput from '@johmun/vue-tags-input' import VueTagsInput from '@johmun/vue-tags-input'
import Pagination from '../components/Pagination.vue' import Pagination from '../components/Pagination.vue'
import { VideosSearchQuery, VideoChannelsSearchQuery, ResultList } from '../../../PeerTube/shared/models' import { VideosSearchQuery, VideoChannelsSearchQuery, ResultList } from '../../../PeerTube/shared/models'
import Nprogress from 'nprogress'
export default Vue.extend({ export default Vue.extend({
components: { components: {
@ -601,29 +602,39 @@
this.results = [] this.results = []
const [ videosResult, channelsResult ] = await Promise.all([ Nprogress.start()
this.searchVideos(),
this.searchChannels()
])
this.channelsCount = channelsResult.total try {
this.videosCount = videosResult.total const [ videosResult, channelsResult ] = await Promise.all([
this.searchVideos(),
this.searchChannels()
])
this.resultsCount = videosResult.total + channelsResult.total Nprogress.done()
this.results = channelsResult.data.concat(videosResult.data)
if (this.formSort === '-match') { this.channelsCount = channelsResult.total
this.results.sort((r1, r2) => { this.videosCount = videosResult.total
if (r1.score < r2.score) return 1
else if (r1.score === r2.score) return 0
return -1 this.resultsCount = videosResult.total + channelsResult.total
}) this.results = channelsResult.data.concat(videosResult.data)
if (this.formSort === '-match') {
this.results.sort((r1, r2) => {
if (r1.score < r2.score) return 1
else if (r1.score === r2.score) return 0
return -1
})
}
this.buildPages()
this.searchDone = true
this.searchedTerm = this.formSearch
} catch (err) {
console.error('Cannot do search.', err)
} finally {
Nprogress.done()
} }
this.buildPages()
this.searchDone = true
this.searchedTerm = this.formSearch
}, },
isVideo (result: EnhancedVideo | EnhancedVideoChannel) { isVideo (result: EnhancedVideo | EnhancedVideoChannel) {

View File

@ -4768,6 +4768,11 @@ npm-run-path@^4.0.0:
gauge "~2.7.3" gauge "~2.7.3"
set-blocking "~2.0.0" set-blocking "~2.0.0"
nprogress@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
nth-check@^1.0.2, nth-check@~1.0.1: nth-check@^1.0.2, nth-check@~1.0.1:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c" resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"