mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-09 09:48:22 +00:00
Commit WIP changes.
This commit is contained in:
parent
84e2504d5f
commit
4094456663
@ -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": {
|
||||||
|
@ -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";
|
||||||
|
|
||||||
|
@ -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");
|
||||||
|
24
yarn.lock
24
yarn.lock
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user