Skip to content

Commit

Permalink
kruto
Browse files Browse the repository at this point in the history
  • Loading branch information
Satont committed Jun 11, 2024
1 parent 8a74f75 commit 025e13f
Show file tree
Hide file tree
Showing 14 changed files with 237 additions and 220 deletions.
112 changes: 59 additions & 53 deletions frontend/dashboard/src/api/overlays/now-playing.ts
Original file line number Diff line number Diff line change
@@ -1,57 +1,63 @@
import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query';
import type {
UpdateRequest,
GetAllResponse,
CreateRequest,
} from '@twir/api/messages/overlays_now_playing/overlays_now_playing';
import { unref } from 'vue';
import type { MaybeRef } from 'vue';
import { useQuery } from '@urql/vue'

import { protectedApiClient } from '@/api/twirp.js';
import { useMutation } from '@/composables/use-mutation'
import { graphql } from '@/gql'

export const useNowPlayingOverlayManager = () => {
const queryClient = useQueryClient();
const queryKey = 'nowPlayingOverlay';
export function useNowPlayingOverlayApi() {
const cacheKey = ['nowPlayingOverlay']

const useNowPlayingQuery = () => useQuery({
query: graphql(`
query NowPlayingOverlays {
nowPlayingOverlays {
id
channelId
preset
hideTimeout
fontWeight
fontFamily
backgroundColor
showImage
}
}
`),
context: {
additionalTypenames: cacheKey,
},
variables: {},
})

const useNowPlayingCreate = () => useMutation(
graphql(`
mutation NowPlayingOverlayCreate($input: NowPlayingOverlayMutateOpts!) {
nowPlayingOverlayCreate(opts: $input)
}
`),
cacheKey,
)

const useNowPlayingUpdate = () => useMutation(
graphql(`
mutation NowPlayingOverlayUpdate($id: String!, $input: NowPlayingOverlayMutateOpts!) {
nowPlayingOverlayUpdate(id: $id, opts: $input)
}
`),
cacheKey,
)

const useNowPlayingDelete = () => useMutation(
graphql(`
mutation NowPlayingOverlayDelete($id: String!) {
nowPlayingOverlayDelete(id: $id)
}
`),
cacheKey,
)

return {
useGetAll: () => useQuery({
queryKey: [queryKey],
queryFn: async (): Promise<GetAllResponse> => {
const call = await protectedApiClient.overlaysNowPlayingGetAll({});
return call.response;
},
}),
useCreate: () => useMutation({
mutationKey: ['nowPlayingOverlayCreate'],
mutationFn: async (opts: CreateRequest) => {
const call = await protectedApiClient.overlaysNowPlayingCreate(opts);
return call.response;
},
onSuccess: async () => {
await queryClient.invalidateQueries([queryKey]);
},
}),
useUpdate: () => useMutation({
mutationKey: ['nowPlayingOverlayUpdate'],
mutationFn: async (opts: MaybeRef<UpdateRequest>) => {
const data = unref(opts);
await protectedApiClient.overlaysNowPlayingUpdate(data);
},
onSuccess: async (_, opts) => {
const data = unref(opts);
await queryClient.invalidateQueries([queryKey, data.id]);
},
}),
useDelete: () => useMutation({
mutationKey: ['nowPlayingOverlayDelete'],
mutationFn: async (id: MaybeRef<string>) => {
await protectedApiClient.overlaysNowPlayingDelete({
id: unref(id),
});
},
onSuccess: async () => {
await queryClient.invalidateQueries([queryKey]);
},
}),
};
};
useNowPlayingQuery,
useNowPlayingCreate,
useNowPlayingUpdate,
useNowPlayingDelete,
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n'
import { useNowPlayingForm } from './use-now-playing-form'
import {
useNowPlayingOverlayManager,
useNowPlayingOverlayApi,
useProfile,
useUserAccessFlagChecker,
} from '@/api'
Expand All @@ -29,20 +29,22 @@ const canCopyLink = computed(() => {
return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays
})
const manager = useNowPlayingOverlayManager()
const updater = manager.useUpdate()
const manager = useNowPlayingOverlayApi()
const updater = manager.useNowPlayingUpdate()
async function save() {
if (!formValue.value?.id) return
await updater.mutateAsync({
await updater.executeMutation({
id: formValue.value.id,
preset: formValue.value.preset,
fontFamily: formValue.value.fontFamily,
fontWeight: formValue.value.fontWeight,
backgroundColor: formValue.value.backgroundColor,
showImage: formValue.value.showImage,
hideTimeout: formValue.value.hideTimeout,
input: {
preset: formValue.value.preset,
fontFamily: formValue.value.fontFamily,
fontWeight: formValue.value.fontWeight,
backgroundColor: formValue.value.backgroundColor,
showImage: formValue.value.showImage,
hideTimeout: formValue.value.hideTimeout,
},
})
discrete.notification.success({
Expand Down
40 changes: 22 additions & 18 deletions frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script setup lang="ts">
import { NowPlaying } from '@twir/frontend-now-playing'
import { NowPlaying, Preset } from '@twir/frontend-now-playing'
import { NA, NAlert, NResult, NTabPane, NTabs, useThemeVars } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import {
useLastfmIntegration,
useNowPlayingOverlayManager,
useNowPlayingOverlayApi,
useSpotifyIntegration,
useUserAccessFlagChecker,
useVKIntegration,
Expand All @@ -24,9 +24,9 @@ const { t } = useI18n()
const { dialog } = useNaiveDiscrete()
const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
const nowPlayingOverlayManager = useNowPlayingOverlayManager()
const creator = nowPlayingOverlayManager.useCreate()
const deleter = nowPlayingOverlayManager.useDelete()
const nowPlayingOverlayManager = useNowPlayingOverlayApi()
const creator = nowPlayingOverlayManager.useNowPlayingCreate()
const deleter = nowPlayingOverlayManager.useNowPlayingDelete()
const { data: spotifyData } = useSpotifyIntegration().useData()
const { data: lastFmData } = useLastfmIntegration().useData()
Expand All @@ -43,21 +43,23 @@ const {
const {
data: entities,
} = nowPlayingOverlayManager.useGetAll()
} = nowPlayingOverlayManager.useNowPlayingQuery()
const openedTab = ref<string>()
function resetTab() {
if (!entities.value?.settings.at(0)) {
if (!entities.value?.nowPlayingOverlays.at(0)) {
openedTab.value = undefined
return
}
openedTab.value = entities.value.settings.at(0)?.id
openedTab.value = entities.value.nowPlayingOverlays.at(0)?.id
}
async function handleAdd() {
await creator.mutateAsync(defaultSettings)
await creator.executeMutation({
input: defaultSettings,
})
}
async function handleClose(id: string) {
Expand All @@ -68,21 +70,23 @@ async function handleClose(id: string) {
negativeText: 'Cancel',
showIcon: false,
onPositiveClick: async () => {
const entity = entities.value?.settings.find(s => s.id === id)
const entity = entities.value?.nowPlayingOverlays.find(s => s.id === id)
if (!entity?.id) return
await deleter.mutateAsync(entity.id)
await deleter.executeMutation({
id: entity.id,
})
resetTab()
},
})
}
const addable = computed(() => {
return userCanEditOverlays.value && (entities.value?.settings.length ?? 0) < 5
return userCanEditOverlays.value && (entities.value?.nowPlayingOverlays.length ?? 0) < 5
})
watch(openedTab, async (v) => {
const entity = entities.value?.settings.find(s => s.id === v)
const entity = entities.value?.nowPlayingOverlays.find(s => s.id === v)
if (!entity) return
setData(entity)
})
Expand All @@ -96,9 +100,9 @@ watch(entities, () => {
<div class="flex flex-col gap-3">
<div>
<NowPlaying
:settings="settings ?? { preset: 'TRANSPARENT' }"
:settings="settings ?? { preset: Preset.TRANSPARENT }"
:track="{
image_url: 'https://i.scdn.co/image/ab67616d0000b273e7fbc0883149094912559f2c',
imageUrl: 'https://i.scdn.co/image/ab67616d0000b273e7fbc0883149094912559f2c',
artist: 'Slipknot',
title: 'Psychosocial',
}"
Expand Down Expand Up @@ -134,9 +138,9 @@ watch(entities, () => {
<template #prefix>
{{ t('overlays.chat.presets') }}
</template>
<template v-if="entities?.settings.length">
<template v-if="entities?.nowPlayingOverlays.length">
<NTabPane
v-for="(entity, entityIndex) in entities?.settings"
v-for="(entity, entityIndex) in entities?.nowPlayingOverlays"
:key="entity.id"
:tab="`#${entityIndex + 1}`"
:name="entity.id!"
Expand All @@ -145,7 +149,7 @@ watch(entities, () => {
</NTabPane>
</template>
</NTabs>
<NAlert v-if="!entities?.settings.length" type="info" class="mt-2">
<NAlert v-if="!entities?.nowPlayingOverlays.length" type="info" class="mt-2">
Create new overlay for edit settings
</NAlert>
</template>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing'
import { createGlobalState } from '@vueuse/core'
import { ref, toRaw } from 'vue'

export const defaultSettings: Settings = {
import type { NowPlayingOverlay } from '@/gql/graphql'

import { NowPlayingOverlayPreset } from '@/gql/graphql'

export const defaultSettings: NowPlayingOverlay = {
id: '',
preset: 'TRANSPARENT',
preset: NowPlayingOverlayPreset.Transparent,
backgroundColor: 'rgba(0, 0, 0, 0)',
channelId: '',
fontFamily: 'inter',
Expand All @@ -14,14 +17,14 @@ export const defaultSettings: Settings = {
}

export const useNowPlayingForm = createGlobalState(() => {
const data = ref<Settings>(structuredClone(defaultSettings))
const data = ref<NowPlayingOverlay>(structuredClone(defaultSettings))

function setData(d: Settings) {
function setData(d: NowPlayingOverlay) {
data.value = structuredClone(toRaw(d))
}

function getDefaultSettings() {
return structuredClone(Settings)
return structuredClone(defaultSettings)
}

return {
Expand Down
Loading

0 comments on commit 025e13f

Please sign in to comment.