diff --git a/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.css b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.css new file mode 100644 index 0000000000000..20e216423f167 --- /dev/null +++ b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.css @@ -0,0 +1,17 @@ +/* + Set a height to invisible/unloaded elements, so that lazy loading actually works. + If we don't set a height, they all get a height of 0px (because they have no content), + so they all bunch up together and end up loading all of them in one go. + */ +.placeholder { + block-size: 40px; +} + +.videoIndex { + color: var(--tertiary-text-color); + text-align: center; +} + +.videoIndexIcon { + font-size: 14px; +} diff --git a/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js new file mode 100644 index 0000000000000..9ed32bb8e9a89 --- /dev/null +++ b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js @@ -0,0 +1,124 @@ +import { defineComponent } from 'vue' +import FtListVideo from '../ft-list-video/ft-list-video.vue' + +export default defineComponent({ + name: 'FtListVideoNumbered', + components: { + 'ft-list-video': FtListVideo + }, + props: { + data: { + type: Object, + required: true + }, + playlistId: { + type: String, + default: null + }, + playlistType: { + type: String, + default: null + }, + playlistIndex: { + type: Number, + default: null + }, + playlistReverse: { + type: Boolean, + default: false + }, + playlistShuffle: { + type: Boolean, + default: false + }, + playlistLoop: { + type: Boolean, + default: false + }, + playlistItemId: { + type: String, + default: null, + }, + appearance: { + type: String, + required: true + }, + initialVisibleState: { + type: Boolean, + default: false, + }, + alwaysShowAddToPlaylistButton: { + type: Boolean, + default: false, + }, + quickBookmarkButtonEnabled: { + type: Boolean, + default: true, + }, + canMoveVideoUp: { + type: Boolean, + default: false, + }, + canMoveVideoDown: { + type: Boolean, + default: false, + }, + canRemoveFromPlaylist: { + type: Boolean, + default: false, + }, + videoIndex: { + type: Number, + default: -1 + }, + isCurrentVideo: { + type: Boolean, + default: false + }, + useChannelsHiddenPreference: { + type: Boolean, + default: false, + } + }, + data: function () { + return { + visible: false, + show: true + } + }, + computed: { + channelsHidden() { + // Some component users like channel view will have this disabled + if (!this.useChannelsHiddenPreference) { return [] } + + return JSON.parse(this.$store.getters.getChannelsHidden).map((ch) => { + // Legacy support + if (typeof ch === 'string') { + return { name: ch, preferredName: '', icon: '' } + } + return ch + }) + }, + + // As we only use this component in Playlist and watch-video-playlist, + // where title filtering is never desired, we don't have any title filtering logic here, + // like we do in ft-list-video-lazy + + shouldBeVisible() { + return !(this.channelsHidden.some(ch => ch.name === this.data.authorId) || + this.channelsHidden.some(ch => ch.name === this.data.author)) + } + }, + created() { + this.visible = this.initialVisibleState + }, + methods: { + onVisibilityChanged: function (visible) { + if (visible && this.shouldBeVisible) { + this.visible = visible + } else if (visible) { + this.show = false + } + } + } +}) diff --git a/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue new file mode 100644 index 0000000000000..745a704fe84c5 --- /dev/null +++ b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue @@ -0,0 +1,53 @@ + + +