itube-specs 0.0.339 → 0.0.340

package/components/playlist/s-playlist-add.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="s-playlist-add__decorate _to-sm" v-if="isPlaylistAdd"/>
+  <!--  Add-->
+  <transition mode="out-in">
+    <SPopup
+        v-if="isPlaylistAdd && step === 'add'"
+        v-model="isPlaylistAdd"
+        sheet
+        transparent-backdrop
+        @close="closePopup"
+    >
+      <template #title>{{ $t('playlist.add') }}</template>
+
+      <div
+          class="s-playlist-add__wrapper"
+          :class="{'_loading': loadingUserPlaylists || loadingPostVideo}"
+      >
+        <SVideoMiniCard
+            v-if="videoCard"
+            class="s-playlist-add__mini-card"
+            :card="videoCard"
+        />
+        <template
+            v-if="playlistsItems && playlistsItems.length"
+        >
+          <SSelect
+              name="add-playlist"
+              v-model="selectValue"
+              :items="playlistsItems"
+              :placeholder="$t('choose_playlist')"
+          />
+          <p class="s-playlist-add__text">{{ $t('playlist.create_new') }}</p>
+        </template>
+        <button
+            type="button"
+            class="s-playlist-add__new"
+            @click="step = 'new'"
+        >
+          <SIcon
+              class="s-playlist-add__new-icon"
+              name="follow"
+              size="24"
+          />
+          {{ $t('playlist.new_playlist') }}
+        </button>
+      </div>
+
+      <template #footer>
+        <div class="s-playlist-add__buttons">
+          <SButton
+              wide
+              :disabled="loadingUserPlaylists || loadingPostVideo"
+              theme="secondary"
+              @click="closePopup"
+          >{{ $t('cancel') }}
+          </SButton>
+          <SButton
+              wide
+              :disabled="loadingUserPlaylists || loadingPostVideo"
+              @click="onSaveClick"
+          >{{ $t('add') }}
+          </SButton>
+        </div>
+      </template>
+    </SPopup>
+  </transition>
+  <!--  Add-->
+
+  <!--  New-->
+  <transition mode="out-in">
+    <SPopup
+        v-if="isPlaylistAdd && step === 'new'"
+        v-model="isPlaylistAdd"
+        sheet
+        transparent-backdrop
+        back
+        @close="closePopup"
+        @back="backPopup"
+    >
+      <template #title>{{ $t('playlist.new_playlist') }}</template>
+      <SPlaylistNew
+          @close="closePopup"
+          @post="postPlaylist"
+          :loading-post-playlist="loadingPostPlaylist"
+      />
+      <slot></slot>
+    </SPopup>
+  </transition>
+  <!--  New-->
+</template>
+
+<script setup lang="ts">
+import type { IPlaylistVideoFormType, ISelectItem, IPlaylistShort, IPlaylistCard, PaginatedResponse } from '../../types';
+
+const props = defineProps<{
+  loadingPostPlaylist: boolean
+  loadingUserPlaylists: boolean
+  loadingPostVideo: boolean
+  userPlaylists: PaginatedResponse<IPlaylistCard> | null
+}>()
+
+const route = useRoute();
+
+const emit = defineEmits<{
+  (eventName: 'post-playlist', eventValue: IPlaylistShort): void
+  (eventName: 'back-to-add'): void
+  (eventName: 'execute-user-playlists'): void
+  (eventName: 'save-video-to-playlist', eventValue: {
+    form: IPlaylistVideoFormType
+    id: string
+  }): void
+}>()
+
+const { videoCard, closePlaylistAdd, isPlaylistAdd, selectValue, step } = usePlaylistAdd();
+
+const playlistsItems = computed<ISelectItem[] | undefined>(() => {
+  return props.userPlaylists?.items?.map((item) => ({
+    title: item.name,
+    value: item.id,
+  }))
+})
+
+const id = computed(() => String(route.params['playlistId']));
+const activePlaylist = computed(() => playlistsItems.value?.find(item => item.value === selectValue.value)?.value);
+const playlistId = computed(() => activePlaylist.value ? [activePlaylist.value] : id.value);
+
+emit('execute-user-playlists');
+
+async function closePopup() {
+  step.value = 'add';
+  isPlaylistAdd.value = false;
+  closePlaylistAdd();
+}
+
+async function postPlaylist(event: IPlaylistShort) {
+  emit('post-playlist', event);
+}
+
+async function backPopup() {
+  step.value = 'add';
+}
+
+const postVideoForm = computed(() => ({
+  playlistId: activePlaylist.value ? [activePlaylist.value] : undefined,
+  videoId: videoCard.value?.id ?? '',
+  VideoGUID: videoCard.value?.guid ?? '',
+  videoMd5: videoCard.value?.md5 ?? '',
+  thumbNum: videoCard.value?.thumbNum ?? 0,
+  name: videoCard.value?.title ?? '',
+  duration: videoCard.value?.duration ?? 0,
+}));
+
+const { setErrorState, snackbarText, snackbarTheme } = useSnackbar();
+
+async function onSaveClick() {
+  try {
+    emit('save-video-to-playlist', {
+      form: postVideoForm.value as IPlaylistVideoFormType,
+      id: String(playlistId.value)
+    })
+    closePopup();
+    snackbarTheme.value = 'success';
+    snackbarText.value = 'video_added';
+  } catch (error) {
+    setErrorState(error)
+    console.log(error, 'error add video to playlist')
+  }
+}
+
+watch(
+  playlistsItems,
+  (items) => {
+    if (!items?.length) return;
+
+    const routeId = String(route.params['playlistId'] ?? '');
+    const fromRoute = items.find(item => item.value === routeId);
+    if (fromRoute) {
+      selectValue.value = fromRoute.value;
+      return;
+    }
+
+    selectValue.value = items[0].value;
+  },
+  { immediate: true }
+);
+</script>

package/components/playlist/s-playlist-delete-video.vue

@@ -0,0 +1,77 @@
+<template>
+  <transition mode="out-in">
+    <SPopup
+        v-model="isPlaylistEditOpen"
+        v-if="isPlaylistEditOpen && currentStep === EPlaylistStep.DeleteVideo"
+        sheet
+        transparent-backdrop
+    >
+      <template #title>{{ $t('playlist.delete_video') }}</template>
+
+      <div
+          class="s-playlist-delete-video__wrapper"
+          :class="{'_loading': loadingAll}"
+      >
+        <SVideoMiniCard v-if="deletedVideo" :card="deletedVideo"/>
+        <p class="s-playlist-delete-video__text">{{ $t('playlist.confirm_delete_video') }}</p>
+      </div>
+      <template #footer>
+        <div class="s-playlist-delete-video__buttons">
+          <SButton
+              :disabled="loadingAll"
+              wide
+              theme="secondary"
+              @click="closePlaylistEdit"
+          >{{ $t('cancel') }}
+          </SButton>
+          <SButton
+              :disabled="loadingAll"
+              wide
+              @click="onBinClick"
+          >{{ $t('playlist.delete') }}
+          </SButton>
+        </div>
+      </template>
+
+    </SPopup>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { EPlaylistStep } from '../../runtime';
+
+const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, deletedVideo } = usePlaylistEdit();
+const { snackbarText, snackbarTheme } = useSnackbar();
+
+const props = defineProps<{
+  loadingDeleteVideo: boolean
+  loadingPlaylistVideos: boolean
+}>()
+
+const route = useRoute();
+
+const emit = defineEmits<{
+  (eventName: 'delete-video', eventValue: {
+    playlistId: string
+    deletedVideoId: string
+  }): void
+}>()
+
+const playlistId = computed(() => route.params[ 'playlistId' ] ? String(route.params[ 'playlistId' ]) : selectedPlaylist.value?.id ||  '');
+
+async function onBinClick() {
+  try {
+    emit('delete-video', {
+      playlistId: playlistId.value,
+      deletedVideoId: deletedVideo.value?.id || ''
+    })
+    snackbarTheme.value = 'success';
+    snackbarText.value = 'video_deleted';
+    closePlaylistEdit();
+  } catch {
+    console.log('error delete')
+  }
+}
+
+const loadingAll = computed(() => props.loadingDeleteVideo || props.loadingPlaylistVideos)
+</script>

package/components/playlist/s-playlist-edit.vue

@@ -0,0 +1,211 @@
+<template>
+  <div
+      class="s-playlist-edit__decorate"
+      v-if="isPlaylistEditOpen"
+  />
+
+  <!--  Delete-->
+  <transition mode="out-in">
+    <SPopup
+        v-model="isPlaylistEditOpen"
+        v-if="isPlaylistEditOpen && currentStep === EPlaylistStep.Delete"
+        sheet
+        transparent-backdrop
+    >
+      <template #title>{{ $t('playlist.delete_playlist') }}</template>
+
+      <div
+          class="s-playlist-edit__wrapper"
+          :class="{'_loading': loadingAll}"
+      >
+        <SIcon
+            class="s-playlist-edit__icon"
+            name="trash-bin"
+            size="40"
+        />
+        <p class="s-playlist-edit__text">{{ $t('playlist.confirm_text', { name: `${selectedPlaylist?.name}` }) }}</p>
+      </div>
+      <template #footer>
+        <div class="s-playlist-edit__buttons">
+          <SButton
+              :disabled="loadingAll"
+              wide
+              theme="secondary"
+              @click="closePlaylistEdit"
+          >{{ $t('cancel') }}
+          </SButton>
+          <SButton
+              :disabled="loadingAll"
+              wide
+              @click="onDeleteClick"
+          >{{ $t('playlist.delete') }}
+          </SButton>
+        </div>
+      </template>
+
+    </SPopup>
+  </transition>
+  <!--  Delete-->
+
+  <!--  Edit-->
+  <transition mode="out-in">
+    <SPopup
+        v-model="isPlaylistEditOpen"
+        v-if="isPlaylistEditOpen && currentStep === EPlaylistStep.Edit && data"
+        transparent-backdrop
+    >
+      <template #title>{{ $t('playlist.edit_playlist') }}</template>
+
+      <template #fixedContent>
+        <div class="s-playlist-edit__subheader-wrapper">
+          <SInput
+              :label="$t('playlist.playlist')"
+              v-model="inputValue"
+          />
+          <SPlaylistPrivateToggle v-model="toggleValue"/>
+        </div>
+      </template>
+
+      <div
+          v-if="data && data.items.length"
+          class="s-playlist-edit__grid"
+          :class="{'_loading': loadingAll}"
+      >
+        <div
+            v-for="(card, index) in data.items"
+            class="s-playlist-edit__card-wrapper"
+            :key="`playlist-edit-${index}`"
+        >
+          <SVideoMiniCard
+              class="s-playlist-edit__card"
+              :card="card"
+          />
+          <button
+              class="s-playlist-edit__delete"
+              type="button"
+              @click="openPlaylistEdit(EPlaylistStep.DeleteVideo, true, selectedPlaylist, card)"
+          >
+            <SIcon name="trash-bin" size="24"/>
+          </button>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="s-playlist-edit__buttons">
+          <SButton
+              wide
+              :disabled="loadingAll"
+              theme="secondary"
+              @click="closePlaylistEdit"
+          >{{ $t('cancel') }}
+          </SButton>
+          <SButton
+              :disabled="loadingAll"
+              wide
+              @click="onSaveClick"
+          >{{ $t('save') }}
+          </SButton>
+        </div>
+      </template>
+      <!--  Edit-->
+
+    </SPopup>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { EPlaylistStep, EPlaylistType, ELanguage, EAsyncData } from '../../runtime';
+import type { IVideoCard, PaginatedResponse, IPlaylistData } from '../../types';
+
+const props = defineProps<{
+  loadingPlaylists: boolean
+  loadingRefresh: boolean
+  loadingEditVideos: boolean
+  loadingPlaylistDelete: boolean
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'delete-playlist', eventValue: string): void
+  (eventName: 'open-edit', eventValue: string): void
+  (eventName: 'save-edit', eventValue: {
+    id: string
+    playlistName: string
+    playlistType: EPlaylistType
+  }): void
+}>()
+
+const inputValue = ref('');
+const toggleValue = ref(false);
+
+const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, openPlaylistEdit } = usePlaylistEdit();
+const { snackbarText, snackbarTheme } = useSnackbar();
+
+const route = useRoute();
+const id = computed(() => route.params[ 'playlistId' ] ? String(route.params[ 'playlistId' ]) : selectedPlaylist.value?.id);
+
+const videosStateKey = computed(() =>
+  id.value ? `data-${EAsyncData.GetPlaylistsVideo}-${id.value}` : null
+);
+
+const data = computed<PaginatedResponse<IVideoCard> | null>(() => {
+    return useState<PaginatedResponse<IVideoCard> | null>(
+      videosStateKey.value || '',
+      () => null
+    ).value
+});
+
+const playlistsData = useState<IPlaylistData>(`data-${EAsyncData.PlaylistById}-${id.value}`);
+
+async function onDeleteClick() {
+  try {
+    emit('delete-playlist', id.value || '')
+    snackbarTheme.value = 'success';
+    snackbarText.value = 'playlist_deleted';
+    closePlaylistEdit();
+  } catch {
+    console.log('error delete')
+  }
+}
+
+async function onSaveClick() {
+  try {
+    const playlistType = toggleValue.value ? EPlaylistType.Private : EPlaylistType.Public;
+
+    emit('save-edit', {
+      id: id.value || '',
+      playlistName: inputValue.value,
+      playlistType: playlistType,
+    })
+
+    if (playlistsData.value) {
+      playlistsData.value.name = inputValue.value ? inputValue.value : playlistsData.value.name;
+      playlistsData.value.playlistType = playlistType;
+    }
+    closePlaylistEdit();
+    snackbarTheme.value= 'success';
+    snackbarText.value = 'changes_soon';
+  } catch {
+    console.log('error save')
+  }
+}
+
+watch(
+  () => [isPlaylistEditOpen.value, currentStep.value, id.value],
+  ([open, step, playlistId]) => {
+    if (!open || step !== EPlaylistStep.Edit || !playlistId) return;
+
+    emit('open-edit', String(playlistId))
+
+    inputValue.value = selectedPlaylist.value?.name || '';
+  },
+  { immediate: true }
+);
+
+watch(() => selectedPlaylist.value?.playlistType, (newType) => {
+  if (newType !== undefined && newType !== null) {
+    toggleValue.value = newType === EPlaylistType.Private;
+  }
+});
+
+const loadingAll = computed(() => props.loadingRefresh || props.loadingEditVideos || props.loadingPlaylists || props.loadingPlaylistDelete);
+</script>

package/components/playlist/s-playlist-like.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="s-playlist-like">
+    <button
+        class="s-playlist-like__control"
+        :class="{'--active': isLiked}"
+        type="button"
+        :title="t('like')"
+        @click="onReactionClick('like')"
+    >
+      <SIcon class="s-playlist-like__control-icon" name="thumbs-up" size="16"/>
+      {{ formatNumber(Number(resultLikes)) }}
+    </button>
+    <div
+        v-if="bar"
+        class="s-playlist-like__bar"
+    >
+      <div
+          class="s-playlist-like__bar-likes"
+          :style="{ width: likePercent + '%' }"
+      />
+      <div
+          class="s-playlist-like__bar-dislikes"
+          :style="{ width: dislikePercent + '%' }"
+      />
+    </div>
+    <button
+        class="s-playlist-like__control"
+        :class="{'--active': isDisliked}"
+        type="button"
+        :title="t('dislike')"
+        @click="onReactionClick('dislike')"
+    >
+      <SIcon class="s-playlist-like__control-icon" name="thumbs-down" size="16"/>
+      {{ formatNumber(Number(resultDislikes)) }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formatNumber } from '../../runtime';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  playlistId: string
+  likes: number
+  dislikes: number
+  bar?: boolean
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'like', eventValue: string): void
+  (eventName: 'dislike', eventValue: string): void
+}>()
+
+const likeStatus = ref<'like' | 'dislike' | null>(null);
+const isLiked = computed(() => likeStatus.value === 'like');
+const isDisliked = computed(() => likeStatus.value === 'dislike');
+const resultLikes = ref(props.likes);
+const resultDislikes = ref(props.dislikes);
+
+onMounted(() => {
+  const stored = localStorage.getItem(props.playlistId);
+  if (stored === 'like' || stored === 'dislike') {
+    likeStatus.value = stored;
+    if (stored === 'like') resultLikes.value += 1;
+    if (stored === 'dislike') resultDislikes.value += 1;
+  }
+});
+
+async function onReactionClick(type: 'like' | 'dislike') {
+  if (likeStatus.value !== type) {
+    likeStatus.value = type;
+    localStorage.setItem(props.playlistId, type);
+
+    const isLike = type === 'like';
+
+    if (isLike) {
+      if (resultLikes.value < 1000) resultLikes.value += 1;
+      if (resultDislikes.value > 0) resultDislikes.value -= 1;
+      emit('like', props.playlistId);
+    } else {
+      if (resultDislikes.value < 1000) resultDislikes.value += 1;
+      if (resultLikes.value > 0) resultLikes.value -= 1;
+      emit('dislike', props.playlistId);
+    }
+  }
+}
+
+const likes = computed(() => resultLikes.value || 0);
+const dislikes = computed(() => resultDislikes.value || 0);
+const total = computed(() => likes.value + dislikes.value || 1);
+
+const likePercent = computed(() => (likes.value / total.value) * 100);
+const dislikePercent = computed(() => (dislikes.value / total.value) * 100);
+</script>

package/components/playlist/s-playlist-new.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="s-playlist-new" :class="{'_loading': loadingPostPlaylist}">
+    <SInput
+        v-model="newTitleValue"
+        :label="$t('title')"
+    />
+    <SPlaylistPrivateToggle v-model="isPrivate" />
+    <div class="s-playlist-new__buttons">
+      <SButton
+          wide
+          theme="secondary"
+          @click="closePopup"
+      >{{ $t('cancel') }}
+      </SButton>
+      <SButton
+          wide
+          @click="onSaveClick"
+      >{{ $t('save') }}
+      </SButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EPlaylistType } from '../../runtime';
+import type { IPlaylistShort } from '../../types';
+
+defineProps<{
+  loadingPostPlaylist: boolean
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'close'): void
+  (eventName: 'post', eventValue: IPlaylistShort): void
+}>()
+
+const { closePlaylistAdd } = usePlaylistAdd();
+const newTitleValue = ref('');
+const isPrivate = ref(false);
+
+function closePopup() {
+  closePlaylistAdd();
+  emit('close');
+}
+
+async function onSaveClick() {
+  try {
+    emit('post', {
+      name: newTitleValue.value,
+      type: isPrivate.value ? EPlaylistType.Private : EPlaylistType.Public
+    });
+  } catch(error) {
+    console.log(error, 'error create playlist');
+  }
+}
+</script>

package/components/playlist/s-playlist-private-toggle.vue

@@ -0,0 +1,20 @@
+<template>
+<div class="s-playlist-private-toggle">
+  <SToggle
+      class="s-playlist-private-toggle__toggler"
+      :model-value="modelValue"
+      @update:modelValue="(event: Event) => emit('update:modelValue', event)"
+  />
+  <p class="s-playlist-private-toggle__text">{{ $t('playlist.private_playlist')}}</p>
+</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: Event): void
+}>()
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.339",
+  "version": "0.0.340",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {