feat(simkl): big rework of account management & adding simkl auth

Author: dvcol

env.d.ts

@@ -17,5 +17,8 @@ interface ImportMeta {
     VITE_TMDB_READ_TOKEN: string;
 
     VITE_TVDB_API_KEY: string;
+
+    VITE_SIMKL_CLIENT_ID: string;
+    VITE_SIMKL_CLIENT_SECRET: string;
   };
 }

env/.env.testing

@@ -7,4 +7,7 @@ VITE_TRAKT_STAGING_SECRET=vite_trakt_staging_secret
 VITE_TMDB_API_KEY=vite_tmdb_api_key
 VITE_TMDB_READ_TOKEN=vite_tmdb_read_token
 
-VITE_TVDB_API_KEY=vite_tvdb_api_key
+VITE_TVDB_API_KEY=vite_tvdb_api_key
+
+VITE_SIMKL_CLIENT_ID=vite_mal_client_id
+VITE_SIMKL_CLIENT_SECRET=vite_mal_client_secret

package.json

@@ -51,10 +51,11 @@
     "release:changelog": "extract-changelog-release > RELEASE.md"
   },
   "dependencies": {
-    "@dvcol/base-http-client": "^1.12.2",
+    "@dvcol/base-http-client": "^1.13.1",
     "@dvcol/common-utils": "^1.11.1",
-    "@dvcol/tmdb-http-client": "^1.3.3",
-    "@dvcol/trakt-http-client": "^1.4.7",
+    "@dvcol/simkl-http-client": "^1.1.0",
+    "@dvcol/tmdb-http-client": "^1.3.4",
+    "@dvcol/trakt-http-client": "^1.4.9",
     "@dvcol/web-extension-utils": "^3.3.2",
     "@vue/devtools": "^7.0.15",
     "iso-3166-2": "^1.0.0",

pnpm-lock.yaml

@@ -1,3 +1,6 @@
+import { Config as SimklConfig } from '@dvcol/simkl-http-client/config';
+import { Config as TmdbConfig } from '@dvcol/tmdb-http-client/config';
+import { Config as TraktConfig } from '@dvcol/trakt-http-client/config';
 import fs from 'fs-extra';
 
 import pkg from '../package.json';
@@ -6,17 +9,22 @@ import { getDirName, isDev, port, resolveParent } from './utils';
 
 import type { Manifest } from 'webextension-polyfill';
 
-export const Endpoints = {
-  trakt: {
-    Domain: 'https://trakt.tv',
+const Endpoints = {
+  Trakt: {
+    Domain: TraktConfig.Website.Production,
+    StagingDomain: TraktConfig.Website.Staging,
     SubDomain: 'https://*.trakt.tv',
-    Production: 'https://api.trakt.tv',
-    Staging: 'https://api-staging.trakt.tv',
+    Api: TraktConfig.Endpoint.Production,
+    StagingApi: TraktConfig.Endpoint.Staging,
   },
-  tvdb: 'https://api4.thetvdb.co',
-  tmdb: {
-    api: 'https://api.themoviedb.org',
-    redirect: 'https://www.themoviedb.org',
+  Tmdb: {
+    Api: TmdbConfig.Endpoint,
+    Domain: TmdbConfig.Website,
+  },
+  Simkl: {
+    Api: SimklConfig.Endpoint,
+    Data: SimklConfig.Data,
+    Domain: SimklConfig.Website,
   },
 } as const;
 
@@ -48,16 +56,26 @@ export const manifest: Manifest.WebExtensionManifest = {
   web_accessible_resources: [
     {
       resources: ['/views/options/index.html'],
-      matches: [`${Endpoints.trakt.Production}/*`, `${Endpoints.trakt.Staging}/*`, `${Endpoints.tvdb}/*`, `${Endpoints.tmdb.redirect}/*`],
+      matches: [
+        `${Endpoints.Trakt.Api}/*`,
+        `${Endpoints.Trakt.StagingApi}/*`,
+        `${Endpoints.Trakt.Domain}/*`,
+        `${Endpoints.Trakt.StagingDomain}/*`,
+        `${Endpoints.Tmdb.Domain}/*`,
+        `${Endpoints.Simkl.Domain}/*`,
+      ],
     },
   ],
   host_permissions: [
-    `${Endpoints.trakt.Domain}/*`,
-    `${Endpoints.trakt.SubDomain}/*`,
-    `${Endpoints.trakt.Production}/*`,
-    `${Endpoints.trakt.Staging}/*`,
-    `${Endpoints.tvdb}/*`,
-    `${Endpoints.tmdb.api}/*`,
+    `${Endpoints.Trakt.Domain}/*`,
+    `${Endpoints.Trakt.SubDomain}/*`,
+    `${Endpoints.Trakt.Api}/*`,
+    `${Endpoints.Trakt.StagingApi}/*`,
+    `${Endpoints.Tmdb.Api}/*`,
+    `${Endpoints.Tmdb.Domain}/*`,
+    `${Endpoints.Simkl.Api}/*`,
+    `${Endpoints.Simkl.Data}/*`,
+    `${Endpoints.Simkl.Domain}/*`,
   ],
   content_security_policy: {
     // Adds localhost for vite hot reload

scripts/manifest.ts

@@ -25,6 +25,7 @@ import { Logger } from '~/services/logger.service';
 import { NavbarService } from '~/services/navbar.service';
 import { TraktService } from '~/services/trakt.service';
 import { ExternaLinks } from '~/settings/external.links';
+import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useLogout } from '~/stores/settings/use-logout';
 import { defaultUser, useUserSettingsStoreRefs } from '~/stores/settings/user.store';
@@ -34,7 +35,8 @@ import { useI18n } from '~/utils/i18n.utils';
 const i18n = useI18n('navbar', 'settings');
 const router = useRouter();
 
-const { userSetting, userSettings } = useUserSettingsStoreRefs();
+const { auths } = useAuthSettingsStoreRefs();
+const { userSetting, userSettings, userSettingLoading } = useUserSettingsStoreRefs();
 const { enabledRoutes } = useExtensionSettingsStoreRefs();
 
 const avatar = computed(() => userSetting.value?.user?.images?.avatar?.full);
@@ -55,18 +57,21 @@ defineProps({
 
 const users = computed(() => {
   return Object.entries(userSettings.value).filter(
-    ([key, value]) => value && key !== username.value && key !== defaultUser,
+    ([key, value]) =>
+      value && auths.value?.[key] && key !== username.value && key !== defaultUser,
   );
 });
 
 const toOption = (
   key: string,
   icon: Component | string,
   label?: string,
+  disabled?: boolean,
 ): ArrayElement<DropdownProps['options']> => {
   return {
     label: label ?? i18n(key),
     key,
+    disabled,
     icon: () => {
       if (typeof icon === 'string') {
         return h(NAvatar, { src: icon, size: 16, round: true });
@@ -87,21 +92,19 @@ const options = computed<DropdownProps['options']>(() => {
     toOption('logout', IconLogOut),
   ];
 
-  if (users.value.length) {
-    return [
-      ...users.value.map(([key, value]) =>
-        toOption(
-          `user-${key}`,
-          (chromeRuntimeId && value?.user?.images?.avatar?.full) || IconAccount,
-          key,
-        ),
+  if (!users.value.length) return baseOptions;
+  return [
+    ...users.value.map(([key, value]) =>
+      toOption(
+        `user-${key}`,
+        (chromeRuntimeId && value?.user?.images?.avatar?.full) || IconAccount,
+        key,
+        userSettingLoading.value,
       ),
-      { type: 'divider', key: 'users-divider' },
-      ...baseOptions,
-    ];
-  }
-
-  return baseOptions;
+    ),
+    { type: 'divider', key: 'users-divider' },
+    ...baseOptions,
+  ];
 });
 
 const { loadUser, logout } = useLogout();

src/assets/simkl/simkl.jpg

@@ -0,0 +1,43 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
+      <path
+        stroke-dasharray="32"
+        stroke-dashoffset="32"
+        d="M13 4L20 4C20.5523 4 21 4.44772 21 5V19C21 19.5523 20.5523 20 20 20H13"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.4s"
+          values="32;0"
+        />
+      </path>
+      <path stroke-dasharray="12" stroke-dashoffset="12" d="M3 12h11.5" opacity="0">
+        <set attributeName="opacity" begin="0.5s" to="1" />
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.5s"
+          dur="0.2s"
+          values="12;0"
+        />
+      </path>
+      <path
+        stroke-dasharray="6"
+        stroke-dashoffset="6"
+        d="M14.5 12l-3.5 -3.5M14.5 12l-3.5 3.5"
+        opacity="0"
+      >
+        <set attributeName="opacity" begin="0.7s" to="1" />
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.7s"
+          dur="0.2s"
+          values="6;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M3.84 0A3.832 3.832 0 0 0 0 3.84v16.32A3.832 3.832 0 0 0 3.84 24h16.32A3.832 3.832 0 0 0 24 20.16V3.84A3.832 3.832 0 0 0 20.16 0zm8.567 4.11c2.074 0 3.538.061 4.393.186c1.127.168 1.94.46 2.438.877c.672.578 1.009 1.613 1.009 3.104c0 .161-.004.417-.01.768h-4.234c-.014-.358-.039-.607-.074-.746c-.098-.41-.42-.64-.966-.692c-.484-.043-1.66-.066-3.53-.066c-1.85 0-2.946.056-3.289.165c-.385.133-.578.474-.578 1.024c0 .528.203.851.61.969c.343.095 1.887.187 4.633.275c2.487.073 4.073.165 4.76.275c.693.11 1.244.275 1.654.495c.41.22.737.532.983.936c.37.595.557 1.552.557 2.873c0 1.475-.182 2.557-.546 3.247c-.364.683-.96 1.149-1.785 1.398c-.812.25-3.05.374-6.71.374c-2.226 0-3.832-.062-4.82-.187c-1.204-.147-2.068-.434-2.593-.86c-.567-.456-.903-1.1-1.008-1.93a10.522 10.522 0 0 1-.085-1.434v-.789H7.44c-.007.74.136 1.216.43 1.428c.154.102.33.167.525.203c.196.037.54.063 1.03.077a166.2 166.2 0 0 0 2.405.022c1.862-.007 2.94-.018 3.234-.033c.553-.044.917-.12 1.092-.23c.245-.161.368-.52.368-1.077c0-.38-.078-.648-.231-.802c-.211-.212-.712-.325-1.503-.34c-.547 0-1.688-.044-3.425-.132c-1.794-.088-2.956-.14-3.488-.154c-1.387-.044-2.364-.212-2.932-.505c-.728-.373-1.205-1.01-1.429-1.91c-.126-.498-.189-1.15-.189-1.956c0-1.698.309-2.895.925-3.59c.462-.527 1.163-.875 2.102-1.044c.848-.146 2.865-.22 6.053-.22z"
+    ></path>
+  </svg>
+</template>

src/components/icons/IconLogIn.vue

@@ -6,11 +6,14 @@ import ListScroll from '~/components/common/list/ListScroll.vue';
 import { useListScroll } from '~/components/common/list/use-list-scroll';
 
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
+import { Route } from '~/models/router.model';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
+import { useActivityStore } from '~/stores/data/activity.store';
 import { useCalendarStore, useCalendarStoreRefs } from '~/stores/data/calendar.store';
 import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
 import { useI18n } from '~/utils/i18n.utils';
 import { watchUserChange } from '~/utils/store.utils';
+import { useWatchActivated } from '~/utils/watching.utils';
 
 const i18n = useI18n('calendar');
 
@@ -30,16 +33,29 @@ const { listRef, onClick, onScrollTop, onScrollBottom, reload } = useCalendar({
   fetchData: fetchCalendar,
 });
 
-watch(center, () => reload());
+watch(center, (_is, _was) => {
+  if (new Date(_is).toLocaleDateString() === new Date(_was).toLocaleDateString()) return;
+  reload();
+});
+
+const { getEvicted } = useActivityStore();
+useWatchActivated(
+  watch(getEvicted(Route.Calendar), async _evicted => {
+    if (!_evicted) return;
+    if (scrolledOut.value) return;
+    await reload();
+  }),
+);
 
 watchUserChange({
   mounted: reload,
   activated: async changed => {
     if (changed) await reload();
   },
-  userChange: async active => {
+  userChange: async ({ active, authenticated }) => {
     clearState();
-    if (active) await reload();
+    if (!active || !authenticated) return;
+    await reload();
   },
 });