1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <template>
- <div class="thumbnail">
- <slot name="icon" />
- <div
- v-if="
- song.youtubeId &&
- (!song.thumbnail ||
- (song.thumbnail &&
- (song.thumbnail.lastIndexOf('notes-transparent') !==
- -1 ||
- song.thumbnail.lastIndexOf('/assets/notes.png') !==
- -1 ||
- song.thumbnail.lastIndexOf('i.ytimg.com') !==
- -1)) ||
- song.thumbnail === 'empty' ||
- song.thumbnail == null)
- "
- class="yt-thumbnail-bg"
- :style="{
- 'background-image':
- 'url(' +
- `https://img.youtube.com/vi/${song.youtubeId}/mqdefault.jpg` +
- ')'
- }"
- ></div>
- <img
- v-if="
- song.youtubeId &&
- (!song.thumbnail ||
- (song.thumbnail &&
- (song.thumbnail.lastIndexOf('notes-transparent') !==
- -1 ||
- song.thumbnail.lastIndexOf('/assets/notes.png') !==
- -1 ||
- song.thumbnail.lastIndexOf('i.ytimg.com') !==
- -1)) ||
- song.thumbnail === 'empty' ||
- song.thumbnail == null)
- "
- loading="lazy"
- :src="`https://img.youtube.com/vi/${song.youtubeId}/mqdefault.jpg`"
- onerror="this.src='/assets/notes-transparent.png'"
- />
- <img
- v-else
- loading="lazy"
- :src="song.thumbnail"
- onerror="this.src='/assets/notes-transparent.png'"
- />
- </div>
- </template>
- <script>
- export default {
- props: {
- song: {
- type: Object,
- default: () => {}
- }
- }
- };
- </script>
- <style lang="scss">
- .thumbnail {
- min-width: 130px;
- height: 130px;
- position: relative;
- margin-top: -15px;
- margin-bottom: -15px;
- margin-left: -10px;
- .yt-thumbnail-bg {
- height: 100%;
- width: 100%;
- position: absolute;
- top: 0;
- filter: blur(1px);
- background: url("/assets/notes-transparent.png") no-repeat center center;
- }
- img {
- height: auto;
- width: 100%;
- margin-top: auto;
- margin-bottom: auto;
- z-index: 1;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- }
- }
- </style>
|