Commit WIP changes.

This commit is contained in:
FireMasterK 2021-09-05 00:16:09 +05:30
parent 84e2504d5f
commit 4094456663
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD
4 changed files with 46 additions and 8 deletions

View File

@ -24,6 +24,7 @@
"vue": "^3.2.8", "vue": "^3.2.8",
"vue-i18n": "^9.1.7", "vue-i18n": "^9.1.7",
"vue-router": "^4.0.11", "vue-router": "^4.0.11",
"vue-virtual-scroller": "^2.0.0-alpha.1",
"xml-js": "^1.6.11" "xml-js": "^1.6.11"
}, },
"devDependencies": { "devDependencies": {

View File

@ -30,17 +30,25 @@
<hr /> <hr />
<div class="uk-grid-xl" uk-grid="parallax: 0"> <div class="uk-grid-xl" uk-grid="parallax: 0">
<div <RecycleScroller :items="videos" :item-size="videos.length" key-field="url" v-slot="{ item }" page-mode>
:style="[{ background: backgroundColor }]" <div
class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl" :style="[{ background: backgroundColor }]"
v-bind:key="video.url" class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
v-for="video in videos" >
> <VideoItem :video="item" />
<VideoItem :video="video" /> </div>
</div> </RecycleScroller>
</div> </div>
</template> </template>
<style>
.vue-recycle-scroller__item-view {
position: relative !important;
transform: inherit !important;
will-change: unset !important;
}
</style>
<script> <script>
import VideoItem from "@/components/VideoItem.vue"; import VideoItem from "@/components/VideoItem.vue";

View File

@ -47,6 +47,10 @@ import enLocale from "@/locales/en.json";
const timeAgo = new TimeAgo("en-US"); const timeAgo = new TimeAgo("en-US");
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import("./registerServiceWorker"); import("./registerServiceWorker");
const mixin = { const mixin = {
@ -229,5 +233,6 @@ const app = createApp(App);
app.use(i18n); app.use(i18n);
app.use(router); app.use(router);
app.mixin(mixin); app.mixin(mixin);
app.component("RecycleScroller", RecycleScroller);
app.component("font-awesome-icon", FontAwesomeIcon); app.component("font-awesome-icon", FontAwesomeIcon);
app.mount("#app"); app.mount("#app");

View File

@ -5944,6 +5944,11 @@ mississippi@^3.0.0:
stream-each "^1.1.0" stream-each "^1.1.0"
through2 "^2.0.0" through2 "^2.0.0"
mitt@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==
mixin-deep@^1.2.0: mixin-deep@^1.2.0:
version "1.3.2" version "1.3.2"
resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566" resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
@ -8775,6 +8780,16 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0" vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0" vue-style-loader "^4.1.0"
vue-observe-visibility@^2.0.0-alpha.1:
version "2.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"
integrity sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==
vue-resize@^2.0.0-alpha.1:
version "2.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
vue-router@^4.0.11: vue-router@^4.0.11:
version "4.0.11" version "4.0.11"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"
@ -8795,6 +8810,15 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue-virtual-scroller@^2.0.0-alpha.1:
version "2.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-alpha.1.tgz#5b5410105b8e60ca57bbd5f2faf5ad1d8108d046"
integrity sha512-Mn5w3Qe06t7c3Imm2RHD43RACab1CCWplpdgzq+/FWJcpQtcGKd5vDep8i+nIwFtzFLsWAqEK0RzM7KrfAcBng==
dependencies:
mitt "^2.1.0"
vue-observe-visibility "^2.0.0-alpha.1"
vue-resize "^2.0.0-alpha.1"
vue@^3.2.8: vue@^3.2.8:
version "3.2.8" version "3.2.8"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.8.tgz#9124e4c31ebc9c592b2b9f293df5c9a88a78e944" resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.8.tgz#9124e4c31ebc9c592b2b9f293df5c9a88a78e944"