Skip to content
This repository has been archived by the owner on Mar 26, 2023. It is now read-only.

Commit

Permalink
feat: Отображение срока подписки на anime365
Browse files Browse the repository at this point in the history
  • Loading branch information
cawa-93 committed Feb 22, 2022
1 parent 6ae0e67 commit 6b05b69
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 69 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<script lang="ts" setup>
import {asyncComputed} from '@vueuse/core';
import {getSubscribeStatus} from '/@/utils/videoProvider/providers/anime365/getSubscribeStatus';
import {formatDate} from '/@/utils/formatDate';
import {computed, ref} from 'vue';
import ButtonSpinner from '/@/components/ButtonSpinner.vue';
const props = defineProps({
accessToken: {
type: String,
required: false,
default: undefined,
},
});
const isLoading = ref(true);
const subscribe = asyncComputed(() => getSubscribeStatus(props.accessToken), null, isLoading);
const premiumUntilFormatted = computed(() => formatDate(
subscribe.value?.premiumUntil
? Date.parse(subscribe.value?.premiumUntil)
: 0),
);
</script>

<template>
<template v-if="isLoading">
<p style="height: 56px">
<button-spinner />
Загрузка ...
</p>
</template>
<ul v-else-if="subscribe">
<li v-if="subscribe.isLogined">
<span class="win-icon">&#xEC61;</span>Аккаунт подключён
</li>
<li v-else>
<span class="win-icon text-red">&#xEB90;</span>Нет ключа доступа
</li>

<li v-if="subscribe.isPremium">
<span class="win-icon">&#xEC61;</span>Подписка оформлена до {{ premiumUntilFormatted }}
</li>
<li v-else>
<span class="win-icon text-red">&#xEB90;</span>Подписка не оформлена
</li>
</ul>
</template>

<style scoped>
li {
@apply flex gap-2;
display: flex;
}
.win-icon {
@apply text-lg;
color: #268926;
}
.win-icon.text-red {
color: #c94d3e;
}
</style>
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<script lang="ts" setup>
import {TabList, TabGroup, Tab, TabPanel, TabPanels} from '@headlessui/vue';
import {Tab, TabGroup, TabList, TabPanel, TabPanels} from '@headlessui/vue';
import OptionsAnime365Status from '/@/pages/Options/OptionsAnime365/OptionsAnime365Status.vue';
import OptionsAnime365Token from '/@/pages/Options/OptionsAnime365/OptionsAnime365Token.vue';
import OptionsAnime365Login from '/@/pages/Options/OptionsAnime365/OptionsAnime365Login.vue';
defineEmits({
'save': null,
});
Expand Down Expand Up @@ -47,9 +48,15 @@ defineEmits({
</Tab>
</TabList>
<TabPanels>
<TabPanel><options-anime365-status /></TabPanel>
<TabPanel><options-anime365-login /></TabPanel>
<TabPanel><options-anime365-token @save="$emit('save')" /></TabPanel>
<TabPanel>
<options-anime365-status />
</TabPanel>
<TabPanel>
<options-anime365-login />
</TabPanel>
<TabPanel>
<options-anime365-token @save="$emit('save')" />
</TabPanel>
</TabPanels>
</TabGroup>
</template>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
<script lang="ts" setup>
import {getAccessToken} from '/@/utils/videoProvider/providers/anime365/anime365';
import ExternalLink from '/@/components/ExternalLink.vue';
import {ANIME365_ORIGIN} from '/@/utils/videoProvider/providers/anime365/utils';
const isConnected = !!getAccessToken();
</script>
import Anime365SubscribeStatus from '/@/pages/Options/OptionsAnime365/Anime365SubscribeStatus.vue';</script>

<template>
<div>
Expand All @@ -16,25 +12,19 @@ const isConnected = !!getAccessToken();
:href="ANIME365_ORIGIN"
>
Anime.365
</external-link>.
</external-link>
.
А он требует для просмотра наличие аккаунта и оплаченной
<external-link
class="underline"
:href="`${ANIME365_ORIGIN}/support/index`"
>
премиум подпиской
</external-link>.
</external-link>
.
Без этого вы не сможете наслаждаться аниме ни на самом сайте Anime.365 ни в этом приложении 😓.
</p>

<p>
В настоящий момент ваш аккаунт Anime365:
<strong :class="[isConnected ? 'text-green-500' : 'text-red-500']">{{
isConnected ? 'Подключен' : 'Не Подключен'
}}</strong>.
</p>
<p v-if="!isConnected">
Выполните два простых шага чтобы подключить ваш аккаунт.
</p>
<anime365-subscribe-status />
</div>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@
import {computed, ref} from 'vue';
import type * as sm from '/@/utils/videoProvider/providers/anime365/anime365-interfaces';
import {getAccessToken, saveAccessToken} from '/@/utils/videoProvider/providers/anime365/anime365';
import {ANIME365_ORIGIN} from '/@/utils/videoProvider/providers/anime365/utils';
import {useTokenValidator} from '/@/pages/Options/OptionsAnime365/useTokenValidator';
import ButtonSpinner from '/@/components/ButtonSpinner.vue';
import {ANIME365_ORIGIN, isFailureResponse} from '/@/utils/videoProvider/providers/anime365/utils';
import ExternalLink from '/@/components/ExternalLink.vue';
import {isFailureResponse} from '/@/utils/videoProvider/providers/anime365/utils';
import Anime365SubscribeStatus from '/@/pages/Options/OptionsAnime365/Anime365SubscribeStatus.vue';
const emit = defineEmits({
Expand Down Expand Up @@ -54,23 +52,22 @@ const token = computed(() =>
: (inputObjValue.value as sm.ApiResponseSuccess<Token>).data.access_token || '',
);
const {isValid, isLoading, check} = useTokenValidator(token);
const save = () => {
if (isValid.value === true || isValid.value === undefined) {
saveAccessToken(token.value ? token.value : null);
emit('save');
}
saveAccessToken(token.value ? token.value : null);
emit('save');
savedAccessToken.value = token.value;
};
let savedAccessToken = ref(getAccessToken() || undefined);
</script>

<template>
<form
class="grid grid-cols-[min-content,auto,1fr] auto-rows-auto gap-3 items-center"
@submit.prevent="save"
>
<p class="col-span-full">
<p class="mb-3">
<external-link
class="font-bold underline"
:href="`${ANIME365_ORIGIN}/api/accessToken?app=play-shikimori-online`"
Expand All @@ -81,53 +78,51 @@ const save = () => {
скопируйте полученный от сайта ключ и вставьте его в поле ниже.
</p>

<label class="col-span-full flex gap-3 items-center">
Ключ:
<p class="field">
<label class="col-span-full gap-3 items-center">
Ключ:
</label>

<input
v-model="inputStrValue"
type="text"
>
</label>

<button
class="btn bg-accent"
type="submit"
:disabled="errorMessage !== ''"
>
Сохранить
</button>
</p>

<p
v-if="errorMessage"
class="text-sm text-red-500"
class="text-sm text-red-500 mt-3"
>
{{ errorMessage }}
</p>

<button
class="btn bg-accent"
type="submit"
:disabled="errorMessage !== ''"
>
Сохранить
</button>
<button
class="btn btn-outline"
type="button"
:disabled="token === '' || errorMessage !== '' || isValid !== undefined || isLoading"
@click="check"
>
<button-spinner v-if="isLoading" />
Проверить
</button>

<p
v-if="isValid !== undefined"
:class="{
'text-red-500': !isValid,
'text-green-500': isValid,
}"
>
<span v-if="isValid">✔ Введённый ключ валидный</span>
<span v-else>
❌ Введённый ключ не валидный.
Возможно вы не авторизованы или авторизованы в аккаунте в котором не оформлена <external-link
class="underline"
:href="`${ANIME365_ORIGIN}/support/index`"
>премиум подписка</external-link>.
</span>
<p class="mt-3">
<anime365-subscribe-status :access-token="savedAccessToken" />
</p>
</form>
</template>

<style scoped>
.field {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr auto;
grid-template-rows: repeat(2, auto);
gap: 0.2rem 0.5rem;
grid-template-areas:
"label label"
"input button";
}
.field label { grid-area: label; }
.field input { grid-area: input; }
.field button { grid-area: button; }
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export function clearVideosCache(translationId: number | string): Promise<boolea
}


const ACCESS_TOKEN_STORAGE_KEY = 'sm-access-token';
export const ACCESS_TOKEN_STORAGE_KEY = 'sm-access-token';


export function getAccessToken(): string | null {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {API_BASE, isFailureResponse, request} from '/@/utils/videoProvider/providers/anime365/utils';

interface SubscribeStatus {
isLogined: boolean,
name: string,
isPremium: boolean
premiumUntil: string
}

export async function getSubscribeStatus(access_token?: string, options?: RequestInit) {
const requestURL = new URL('me', API_BASE);
const apiResponse = await request<SubscribeStatus>(requestURL, access_token, options);

if (isFailureResponse(apiResponse)) {
throw apiResponse;
}

return apiResponse.data;
}

0 comments on commit 6b05b69

Please sign in to comment.