From 84d2ab4f45619fcfe3d27cd43101b02dc3ec93a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Tajes?= Date: Thu, 8 Dec 2022 14:38:37 +0100 Subject: [PATCH] Fix Spotify changes to upgrade API access --- src/adapter/spotify-adapter.ts | 24 ++++++++++- src/components/desktop/desktop.vue | 8 ++-- src/components/logo.vue | 67 ++++------------------------- src/components/mobile/mobile.vue | 14 +++--- src/components/results/result.vue | 69 ++++++++++++++++++++++++++---- src/components/spotify-icon.vue | 27 ++++++++++++ src/design-system/tokens.scss | 4 +- tailwind.config.js | 2 +- 8 files changed, 132 insertions(+), 83 deletions(-) create mode 100644 src/components/spotify-icon.vue diff --git a/src/adapter/spotify-adapter.ts b/src/adapter/spotify-adapter.ts index 7f31c25..350c73f 100644 --- a/src/adapter/spotify-adapter.ts +++ b/src/adapter/spotify-adapter.ts @@ -22,6 +22,14 @@ import AlbumObjectSimplified = SpotifyApi.AlbumObjectSimplified; import RecommendationsObject = SpotifyApi.RecommendationsObject; import RecommendationTrackObject = SpotifyApi.RecommendationTrackObject; +declare module '@empathyco/x-types' { + export interface Result { + uri?: string; + artists?: { name: string; uri: string }[]; + album?: { name: string; uri: string }; + } +} + const requestMapper = schemaMapperFactory({ q: 'query', type: ({ filters }) => @@ -42,15 +50,27 @@ type SpotifyResult = | RecommendationTrackObject; type ResponseObject = PagingObject; -const resultSchema: Schema = { +const resultSchema: Schema< + SpotifyResult & { + artists?: { name: string; uri: string }[]; + album?: { name: string; uri: string }; + }, + Result +> = { modelName: () => 'Result', id: 'id', name: 'name', url: 'external_urls.spotify', + uri: 'uri', images: responseObject => ('images' in responseObject ? responseObject.images : responseObject.album.images).map( ({ url }) => url - ) + ), + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + album: ({ album: { name, uri } }) => ({ name, uri }), + // @ts-ignore + artists: ({ artists }) => artists.map(({ name, uri }) => ({ name, uri })) }; const objectResponseMapper = schemaMapperFactory({ diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue index 0ece35c..f02fe9d 100644 --- a/src/components/desktop/desktop.vue +++ b/src/components/desktop/desktop.vue @@ -4,15 +4,15 @@
-
+
-
+
@@ -26,7 +26,7 @@
diff --git a/src/components/logo.vue b/src/components/logo.vue index 07f65b8..c03803a 100644 --- a/src/components/logo.vue +++ b/src/components/logo.vue @@ -1,68 +1,17 @@ diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue index 4911c47..e8e5eaa 100644 --- a/src/components/mobile/mobile.vue +++ b/src/components/mobile/mobile.vue @@ -7,18 +7,18 @@
- + +
+ +
@@ -100,12 +100,14 @@ import HasSearchedMixin from '../has-searched.mixin'; import MobileMyHistoryAside from '../my-history/mobile-my-history-aside.vue'; import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue'; + import SpotifyIcon from '../spotify-icon.vue'; import MobileCloseAside from './mobile-close-aside.vue'; import MobileOpenAside from './mobile-open-aside.vue'; import MobileToolbar from './mobile-toolbar.vue'; @Component({ components: { + SpotifyIcon, MyHistoryConfirmDisableModal, ArrowLeftIcon, BaseIdModal, diff --git a/src/components/results/result.vue b/src/components/results/result.vue index 89f7965..dbcd1f4 100644 --- a/src/components/results/result.vue +++ b/src/components/results/result.vue @@ -11,15 +11,50 @@ - -

- {{ result.name }} -

- +
+ +

+ {{ result.name }} +

+ + + +

+ {{ result.album && result.album.name }} +

+ + +
+ +

{{ artist.name }}

+ +
+ + + + + Open in Spotify + + +
@@ -38,9 +73,11 @@ } from '@empathyco/x-components'; import { MainScrollItem } from '@empathyco/x-components/scroll'; import { Component, Prop, Vue } from 'vue-property-decorator'; + import SpotifyIcon from '../spotify-icon.vue'; @Component({ components: { + SpotifyIcon, BaseAddToCart, BaseFallbackImage, BasePlaceholderImage, @@ -65,3 +102,17 @@ protected imageAnimation = CrossFade; } + + diff --git a/src/components/spotify-icon.vue b/src/components/spotify-icon.vue new file mode 100644 index 0000000..86d9924 --- /dev/null +++ b/src/components/spotify-icon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/design-system/tokens.scss b/src/design-system/tokens.scss index 12b198c..1dfb106 100644 --- a/src/design-system/tokens.scss +++ b/src/design-system/tokens.scss @@ -24,7 +24,7 @@ --x-color-text-dropdown-toggle-default: var(--x-color-neutral-10); // Layout - --x-size-margin-left-layout-s: var(--x-size-base-10); + --x-size-min-margin-layout: var(--x-size-base-10); --x-color-background-layout-header-backdrop: transparent; --x-color-background-layout-header: var(--x-color-base-neutral-100); @@ -37,7 +37,7 @@ } // Image - --x-number-aspect-ratio-picture: 3/4; + --x-number-aspect-ratio-picture: 1/1; // Result --x-size-gap-result-default: var(--x-size-base-02); diff --git a/tailwind.config.js b/tailwind.config.js index 266e1bf..fb8b13f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,5 +11,5 @@ module.exports = { // You can check that tailwindcss is still working by checking the style of the heading `Test controls` // below the `Start` button on the `x-components` internal demo app. // See https://github.com/empathyco/x/pull/655#discussion_r948923711 - corePlugins: ['fontSize', 'fontWeight', 'lineHeight', 'textColor'] + corePlugins: ['fontSize', 'fontWeight', 'lineHeight', 'textColor', 'textDecoration', 'padding'] };