Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: Artist/Album thumgnail style

Browse source
This commit is contained in:
Phan An 2024-04-29 21:50:03 +02:00
parent 9d49281261
commit 64d6e6db30
19 changed files with 31 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/assets/js/components/album/AlbumCard.vue
View file

@ -1,5 +1,5 @@
<template>
<ArtistAlbumCard
<BaseCard
v-if="showing"
:entity="album"
:layout="layout"
@ -27,7 +27,7 @@
Download
</a>
</template>
</ArtistAlbumCard>
</BaseCard>
</template>
<script lang="ts" setup>
@ -37,7 +37,7 @@ import { albumStore, artistStore, commonStore, songStore } from '@/stores'
import { downloadService, playbackService } from '@/services'
import { useDraggable, useRouter } from '@/composables'
import ArtistAlbumCard from '@/components/ui/ArtistAlbumCard.vue'
import BaseCard from '@/components/ui/album-artist/AlbumOrArtistCard.vue'
const { go } = useRouter()
const { startDragging } = useDraggable('album')

2
resources/assets/js/components/album/AlbumInfo.vue
View file

@ -36,7 +36,7 @@ import { defineAsyncComponent, ref, toRefs, watch } from 'vue'
import { mediaInfoService } from '@/services'
import { useThirdPartyServices } from '@/composables'
import AlbumThumbnail from '@/components/ui/ArtistAlbumThumbnail.vue'
import AlbumThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
import AlbumArtistInfo from '@/components/ui/album-artist/AlbumOrArtistInfo.vue'
import ExpandableContentBlock from '@/components/ui/album-artist/ExpandableContentBlock.vue'

10
resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
View file

@ -1,11 +1,11 @@
// Vitest Snapshot v1
exports[`renders 1`] = `
<article data-v-f01bdc56="" class="full relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200" data-testid="artist-album-card" draggable="true" tabindex="0" title="IV by Led Zeppelin">
<div data-v-a14c1d10="" data-v-f01bdc56="" class="cover relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-a14c1d10="" alt="IV" src="http://loremflickr.com/640/480" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-a14c1d10="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-a14c1d10="" class="hidden">Play all songs in the album IV</span><span data-v-a14c1d10="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>
<footer data-v-f01bdc56="" class="flex flex-1 flex-col gap-1.5 overflow-hidden">
<div data-v-f01bdc56="" class="name flex flex-col gap-2 whitespace-nowrap"><a href="#/album/42" class="font-medium" data-testid="name">IV</a><a href="#/artist/17">Led Zeppelin</a></div>
<p data-v-f01bdc56="" class="meta text-[0.9rem] flex gap-1.5 opacity-70 hover:opacity-100"><a title="Shuffle all songs in the album IV" role="button"> Shuffle </a><a title="Download all songs in the album IV" role="button"> Download </a></p>
<article data-v-2487c4e3="" class="full relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200" data-testid="artist-album-card" draggable="true" tabindex="0" title="IV by Led Zeppelin">
<div data-v-40f79232="" data-v-2487c4e3="" class="thumbnail relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-40f79232="" alt="IV" src="http://loremflickr.com/640/480" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-40f79232="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-40f79232="" class="hidden">Play all songs in the album IV</span><span data-v-40f79232="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>
<footer data-v-2487c4e3="" class="flex flex-1 flex-col gap-1.5 overflow-hidden">
<div data-v-2487c4e3="" class="name flex flex-col gap-2 whitespace-nowrap"><a href="#/album/42" class="font-medium" data-testid="name">IV</a><a href="#/artist/17">Led Zeppelin</a></div>
<p data-v-2487c4e3="" class="meta text-[0.9rem] flex gap-1.5 opacity-70 hover:opacity-100"><a title="Shuffle all songs in the album IV" role="button"> Shuffle </a><a title="Download all songs in the album IV" role="button"> Download </a></p>
</footer>
</article>
`;

6
resources/assets/js/components/artist/ArtistCard.vue
View file

@ -1,5 +1,5 @@
<template>
<ArtistAlbumCard
<BaseCard
v-if="showing"
:entity="artist"
:layout="layout"
@ -19,7 +19,7 @@
Download
</a>
</template>
</ArtistAlbumCard>
</BaseCard>
</template>
<script lang="ts" setup>
@ -29,7 +29,7 @@ import { artistStore, commonStore, songStore } from '@/stores'
import { downloadService, playbackService } from '@/services'
import { useDraggable, useRouter } from '@/composables'
import ArtistAlbumCard from '@/components/ui/ArtistAlbumCard.vue'
import BaseCard from '@/components/ui/album-artist/AlbumOrArtistCard.vue'
const { go } = useRouter()
const { startDragging } = useDraggable('artist')

2
resources/assets/js/components/artist/ArtistInfo.vue
View file

@ -26,7 +26,7 @@ import { ref, toRefs, watch } from 'vue'
import { mediaInfoService } from '@/services'
import { useThirdPartyServices } from '@/composables'
import ArtistThumbnail from '@/components/ui/ArtistAlbumThumbnail.vue'
import ArtistThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
import AlbumArtistInfo from '@/components/ui/album-artist/AlbumOrArtistInfo.vue'
import ExpandableContentBlock from '@/components/ui/album-artist/ExpandableContentBlock.vue'

10
resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
View file

@ -1,11 +1,11 @@
// Vitest Snapshot v1
exports[`renders 1`] = `
<article data-v-f01bdc56="" class="full relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200" data-testid="artist-album-card" draggable="true" tabindex="0" title="Led Zeppelin">
<div data-v-a14c1d10="" data-v-f01bdc56="" class="cover relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-a14c1d10="" alt="Led Zeppelin" src="foo.jpg" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-a14c1d10="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-a14c1d10="" class="hidden">Play all songs by Led Zeppelin</span><span data-v-a14c1d10="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>
<footer data-v-f01bdc56="" class="flex flex-1 flex-col gap-1.5 overflow-hidden">
<div data-v-f01bdc56="" class="name flex flex-col gap-2 whitespace-nowrap"><a href="#/artist/42" class="font-medium" data-testid="name">Led Zeppelin</a></div>
<p data-v-f01bdc56="" class="meta text-[0.9rem] flex gap-1.5 opacity-70 hover:opacity-100"><a title="Shuffle all songs by Led Zeppelin" role="button"> Shuffle </a><a title="Download all songs by Led Zeppelin" role="button"> Download </a></p>
<article data-v-2487c4e3="" class="full relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200" data-testid="artist-album-card" draggable="true" tabindex="0" title="Led Zeppelin">
<div data-v-40f79232="" data-v-2487c4e3="" class="thumbnail relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-40f79232="" alt="Led Zeppelin" src="foo.jpg" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-40f79232="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-40f79232="" class="hidden">Play all songs by Led Zeppelin</span><span data-v-40f79232="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>
<footer data-v-2487c4e3="" class="flex flex-1 flex-col gap-1.5 overflow-hidden">
<div data-v-2487c4e3="" class="name flex flex-col gap-2 whitespace-nowrap"><a href="#/artist/42" class="font-medium" data-testid="name">Led Zeppelin</a></div>
<p data-v-2487c4e3="" class="meta text-[0.9rem] flex gap-1.5 opacity-70 hover:opacity-100"><a title="Shuffle all songs by Led Zeppelin" role="button"> Shuffle </a><a title="Download all songs by Led Zeppelin" role="button"> Download </a></p>
</footer>
</article>
`;

2
resources/assets/js/components/screens/AlbumScreen.vue
View file

@ -96,7 +96,7 @@ import { downloadService } from '@/services'
import { useErrorHandler, useRouter, useSongList, useSongListControls } from '@/composables'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import AlbumThumbnail from '@/components/ui/ArtistAlbumThumbnail.vue'
import AlbumThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
import ScreenHeaderSkeleton from '@/components/ui/skeletons/ScreenHeaderSkeleton.vue'
import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
import ScreenTabs from '@/components/ui/ArtistAlbumScreenTabs.vue'

2
resources/assets/js/components/screens/ArtistScreen.vue
View file

@ -92,7 +92,7 @@ import { downloadService } from '@/services'
import { useErrorHandler, useRouter, useSongList, useSongListControls, useThirdPartyServices } from '@/composables'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import ArtistThumbnail from '@/components/ui/ArtistAlbumThumbnail.vue'
import ArtistThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
import ScreenHeaderSkeleton from '@/components/ui/skeletons/ScreenHeaderSkeleton.vue'
import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
import ScreenTabs from '@/components/ui/ArtistAlbumScreenTabs.vue'

5
resources/assets/js/components/ui/__snapshots__/AlbumArtistThumbnail.spec.ts.snap
View file

@ -1,5 +0,0 @@
// Vitest Snapshot v1
exports[`renders for album 1`] = `<span data-v-e37470a2="" class="cover" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-e37470a2="" alt="IV" src="https://test/album.jpg" loading="lazy"><a data-v-e37470a2="" class="control control-play" role="button"><span data-v-e37470a2="" class="hidden">Play all songs in the album IV</span><span data-v-e37470a2="" class="icon"></span></a></span>`;
exports[`renders for artist 1`] = `<span data-v-e37470a2="" class="cover" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-e37470a2="" alt="Led Zeppelin" src="https://test/blimp.jpg" loading="lazy"><a data-v-e37470a2="" class="control control-play" role="button"><span data-v-e37470a2="" class="hidden">Play all songs by Led Zeppelin</span><span data-v-e37470a2="" class="icon"></span></a></span>`;

5
resources/assets/js/components/ui/__snapshots__/ArtistAlbumThumbnail.spec.ts.snap
View file

@ -1,5 +0,0 @@
// Vitest Snapshot v1
exports[`renders for album 1`] = `<div data-v-a14c1d10="" class="cover relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-a14c1d10="" alt="IV" src="https://test/album.jpg" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-a14c1d10="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-a14c1d10="" class="hidden">Play all songs in the album IV</span><span data-v-a14c1d10="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>`;
exports[`renders for artist 1`] = `<div data-v-a14c1d10="" class="cover relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-a14c1d10="" alt="Led Zeppelin" src="https://test/blimp.jpg" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-a14c1d10="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-a14c1d10="" class="hidden">Play all songs by Led Zeppelin</span><span data-v-a14c1d10="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>`;

3
resources/assets/js/components/ui/__snapshots__/Btn.spec.ts.snap
View file

@ -1,3 +0,0 @@
// Vitest Snapshot v1
exports[`renders 1`] = `<button data-v-e368fe26="" class="inset-when-pressed">Click Me Nao</button>`;

3
resources/assets/js/components/ui/__snapshots__/BtnCloseModal.spec.ts.snap
View file

@ -1,3 +0,0 @@
// Vitest Snapshot v1
exports[`renders 1`] = `<button data-v-2d6954b5="" data-testid="close-modal-btn" title="Dismiss" type="button"><br data-v-2d6954b5="" data-testid="Icon" icon="[object Object]"></button>`;

3
resources/assets/js/components/ui/__snapshots__/BtnGroup.spec.ts.snap
View file

@ -1,3 +0,0 @@
// Vitest Snapshot v1
exports[`renders 1`] = `<span data-v-e884c19a="" class="btn-group"><button data-v-e368fe26="" class="inset-when-pressed">Green</button><button data-v-e368fe26="" class="inset-when-pressed">Orange</button><button data-v-e368fe26="" class="inset-when-pressed">Blue</button></span>`;

5
resources/assets/js/components/ui/__snapshots__/CheckBox.spec.ts.snap
View file

@ -1,5 +0,0 @@
// Vitest Snapshot v1
exports[`renders checked state 1`] = `<span data-v-b5259680="" class="checked"><input data-v-b5259680="" type="checkbox"></span>`;
exports[`renders unchecked state 1`] = `<span data-v-b5259680="" class=""><input data-v-b5259680="" type="checkbox"></span>`;

2
resources/assets/js/components/ui/ArtistAlbumCard.spec.ts → resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.spec.ts
View file

@ -1,7 +1,7 @@
import { screen } from '@testing-library/vue'
import { expect, it } from 'vitest'
import UnitTestCase from '@/__tests__/UnitTestCase'
import ArtistAlbumCard from './ArtistAlbumCard.vue'
import ArtistAlbumCard from './AlbumOrArtistCard.vue'
import factory from '@/__tests__/factory'
new class extends UnitTestCase {

4
resources/assets/js/components/ui/ArtistAlbumCard.vue → resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.vue
View file

@ -23,7 +23,7 @@
</template>
<script lang="ts" setup>
import Thumbnail from '@/components/ui/ArtistAlbumThumbnail.vue'
import Thumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
import { toRefs } from 'vue'
const props = withDefaults(defineProps<{ layout?: ArtistAlbumCardLayout, entity: Artist | Album }>(), {
@ -64,7 +64,7 @@ article {
&.compact {
@apply flex-row gap-4 max-w-full p-3 rounded-md items-center;
.cover {
.thumbnail {
@apply w-[80px] rounded-md;
}
}

2
resources/assets/js/components/ui/ArtistAlbumThumbnail.spec.ts → resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.spec.ts
View file

@ -5,7 +5,7 @@ import factory from '@/__tests__/factory'
import { screen, waitFor } from '@testing-library/vue'
import { queueStore, songStore } from '@/stores'
import { playbackService } from '@/services'
import Thumbnail from './ArtistAlbumThumbnail.vue'
import Thumbnail from './AlbumOrArtistThumbnail.vue'
let album: Album
let artist: Artist

4
resources/assets/js/components/ui/ArtistAlbumThumbnail.vue → resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.vue
View file

@ -2,7 +2,7 @@
<div
:class="{ droppable }"
:style="{ backgroundImage: `url(${defaultCover})` }"
class="cover relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md
class="thumbnail relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md
after:block after:pt-[100%]"
data-testid="album-artist-thumbnail"
>
@ -151,7 +151,7 @@ const onDrop = async (event: DragEvent) => {
}
}
article {
.thumbnail {
.control {
&:hover, &:focus {
&::before, .icon {

5
resources/assets/js/components/ui/album-artist/__snapshots__/AlbumOrArtistThumbnail.spec.ts.snap Normal file
View file

@ -0,0 +1,5 @@
// Vitest Snapshot v1
exports[`renders for album 1`] = `<div data-v-40f79232="" class="thumbnail relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-40f79232="" alt="IV" src="https://test/album.jpg" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-40f79232="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-40f79232="" class="hidden">Play all songs in the album IV</span><span data-v-40f79232="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>`;
exports[`renders for artist 1`] = `<div data-v-40f79232="" class="thumbnail relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-40f79232="" alt="Led Zeppelin" src="https://test/blimp.jpg" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-40f79232="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-40f79232="" class="hidden">Play all songs by Led Zeppelin</span><span data-v-40f79232="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>`;