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-i18n": "^9.1.7",
"vue-router": "^4.0.11",
"vue-virtual-scroller": "^2.0.0-alpha.1",
"xml-js": "^1.6.11"
},
"devDependencies": {

View File

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

View File

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

View File

@ -5944,6 +5944,11 @@ mississippi@^3.0.0:
stream-each "^1.1.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:
version "1.3.2"
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-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:
version "4.0.11"
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"
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:
version "3.2.8"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.8.tgz#9124e4c31ebc9c592b2b9f293df5c9a88a78e944"