itube-specs 0.0.910 → 0.0.912

package/components/playlist/add.vue

@@ -7,6 +7,7 @@
       :back="!!onBack"
       class="playlist-add"
       sheet
+      transparent-backdrop
       @back="handleBack"
       @close="closePopup"
     >
@@ -23,37 +24,12 @@
         :class="{'_loading': loadingUserPlaylists || loadingPostVideo}"
         class="playlist-add__wrapper"
       >
-        <UiCheckbox
-          right
-          :model-value="selectValue.includes('favorites')"
-          class="playlist-add__item"
-          @update:model-value="togglePlaylist('favorites')"
-        >
-          <div class="playlist-add__item-wrapper --favorites">
-            <UiIcon
-              name="heart"
-              size="20"
-            />
-            {{ $t('favorites')}}
-          </div>
-        </UiCheckbox>
         <template v-if="playlistsItems && playlistsItems.length">
           <template
             v-for="(item, index) in playlistsItems"
             :key="`playlist-${index}`"
           >
-            <PlaylistInput
-              v-if="editingId === item.value"
-              v-model="editName"
-              v-model:type="editType"
-              :placeholder="$t('playlist_name')"
-              edit-playlist
-              @close="editingId = null"
-              @submit="saveEdit(item.value)"
-              @delete="deleteEdit(item.value)"
-            />
             <UiCheckbox
-              v-else
               :model-value="selectValue.includes(item.value)"
               class="playlist-add__item"
               right
@@ -62,27 +38,27 @@
               <div class="playlist-add__item-wrapper">
                 <UiIcon
                   class="playlist-add__item-icon"
-                  name="list"
+                  name="playlist"
                   size="20"
                 />
                 <span class="playlist-add__item-text">{{ item.title }}</span>
                 <UiIcon
                   :name="item.typeIcon"
                   class="playlist-add__item-icon"
-                  size="16"
+                  size="14"
                 />
-                <div class="playlist-add__item-icon">
+                <span class="playlist-add__item-icon">
                   <UiIcon
                     name="video-camera"
-                    size="16"
+                    size="14"
                   />
                   {{ item.videosCount }}
-                </div>
+                </span>
               </div>
               <button
                 class="playlist-add__item-edit"
                 type="button"
-                @click.prevent="startEdit(item)"
+                @click.prevent="openEdit(item.card)"
               >
                 <UiIcon
                   name="pen"
@@ -92,31 +68,29 @@
             </UiCheckbox>
           </template>
         </template>
-        <template v-if="!editingId">
-          <button
-            v-if="step !== 'new'"
-            type="button"
-            class="playlist-add__item --new"
-            @click="step = 'new'"
-          >
-            <UiIcon
-              class="playlist-add__item-icon --new"
-              name="plus"
-              size="20"
-            />
-            {{ $t('playlist.new_playlist') }}
-          </button>
-          <PlaylistInput
-            v-else
-            v-model="newPlaylistName"
-            v-model:type="playlistType"
-            :error="nameError"
-            :placeholder="$t('playlist_name')"
-            @update:error="nameError = $event"
-            @close="clearNewPlaylist"
-            @submit="onSaveClick"
+        <button
+          v-if="step !== 'new'"
+          type="button"
+          class="playlist-add__item --new"
+          @click="step = 'new'"
+        >
+          <UiIcon
+            class="playlist-add__item-icon --new"
+            name="plus"
+            size="20"
           />
-        </template>
+          {{ $t('playlist.new_playlist') }}
+        </button>
+        <PlaylistInput
+          v-else
+          v-model="newPlaylistName"
+          v-model:type="playlistType"
+          :error="nameError"
+          :placeholder="$t('playlist_name')"
+          @update:error="nameError = $event"
+          @close="clearNewPlaylist"
+          @submit="onSaveClick"
+        />
       </div>
 
       <template #footer>
@@ -131,11 +105,11 @@
           </UiBtn>
           <UiBtn
             wide
-            :disabled="loadingUserPlaylists || loadingPostVideo"
+            :disabled="submitDisabled"
             size="l"
             theme="primary"
-            @click="editingId ? saveEdit(editingId) : onSaveClick()"
-          >{{ editingId ? $t('update') : $t('add') }}
+            @click="onSaveClick"
+          >{{ $t('add') }}
           </UiBtn>
         </div>
       </template>
@@ -147,7 +121,7 @@
 
 <script setup lang="ts">
 import type { IPlaylistVideoFormType, IPlaylistShort, IPlaylistCard, PaginatedResponse } from '../../types';
-import { PlaylistType } from '../../runtime';
+import { PLAYLIST_TYPE_ICON, PlaylistStep, PlaylistType } from '../../runtime';
 
 const props = defineProps<{
   loadingPostPlaylist: boolean
@@ -163,11 +137,22 @@ const emit = defineEmits<{
     id: string
     newPlaylist?: IPlaylistShort
   }): void
-  (eventName: 'edit-playlist', eventValue: { id: string, playlistName: string, playlistType: PlaylistType }): void
-  (eventName: 'delete-playlist', eventValue: string): void
 }>();
 
 const { videoCard, closePlaylistAdd, isPlaylistAdd, selectValue, step, onBack } = usePlaylistAdd();
+const { openPlaylistEdit, onBack: onEditBack } = usePlaylistEdit();
+
+/**
+ * Редактирование открывается вместо добавления, не поверх. Карточку видео не сбрасываем —
+ * из редактирования по «назад» возвращаемся сюда же.
+ */
+function openEdit(card: IPlaylistCard) {
+  onEditBack.value = () => {
+    isPlaylistAdd.value = true;
+  };
+  isPlaylistAdd.value = false;
+  openPlaylistEdit(PlaylistStep.Edit, false, card);
+}
 
 function handleBack() {
   const callback = onBack.value;
@@ -175,17 +160,14 @@ function handleBack() {
   callback?.();
 }
 
-const { FAVORITES_KEY } = useFavorites();
-
 const playlistsItems = computed(() => {
   return props.userPlaylists?.items
-    ?.filter((item: IPlaylistCard) => item.name !== FAVORITES_KEY)
-    .map((item: IPlaylistCard) => ({
+    ?.map((item: IPlaylistCard) => ({
       title: item.name,
       value: item.id,
       videosCount: item.videosCount,
-      typeIcon: item.playlistType === PlaylistType.Private ? 'lock' : 'user-group',
-      playlistType: item.playlistType === PlaylistType.Private ? 'private' as const : 'public' as const,
+      typeIcon: PLAYLIST_TYPE_ICON[item.playlistType] ?? PLAYLIST_TYPE_ICON[PlaylistType.Public],
+      card: item,
     }));
 });
 
@@ -201,7 +183,7 @@ function togglePlaylist(value: string) {
 
 watch(isPlaylistAdd, (val) => {
   if (val) {
-    selectValue.value = ['favorites'];
+    selectValue.value = [];
     emit('execute-user-playlists');
   }
 }, { immediate: true });
@@ -210,46 +192,26 @@ async function closePopup() {
   step.value = 'add';
   selectValue.value = [];
   newPlaylistName.value = '';
-  playlistType.value = 'public';
-  editingId.value = null;
+  playlistType.value = PlaylistType.Public;
   isPlaylistAdd.value = false;
   closePlaylistAdd();
 }
 
 const newPlaylistName = ref('');
-const playlistType = ref<'public' | 'private'>('public');
+const playlistType = ref<PlaylistType>(PlaylistType.Public);
 const nameError = ref(false);
 
 function clearNewPlaylist() {
   newPlaylistName.value = '';
-  playlistType.value = 'public';
+  playlistType.value = PlaylistType.Public;
   step.value = 'add';
 }
 
-const editingId = ref<string | null>(null);
-const editName = ref('');
-const editType = ref<'public' | 'private'>('public');
-
-function startEdit(item: { value: string, title: string, playlistType: 'public' | 'private' }) {
-  clearNewPlaylist();
-  editingId.value = item.value;
-  editName.value = item.title;
-  editType.value = item.playlistType;
-}
-
-function saveEdit(id: string) {
-  emit('edit-playlist', {
-    id,
-    playlistName: editName.value,
-    playlistType: editType.value === 'private' ? PlaylistType.Private : PlaylistType.Public,
-  });
-  editingId.value = null;
-}
-
-function deleteEdit(id: string) {
-  editingId.value = null;
-  emit('delete-playlist', id);
-}
+const submitDisabled = computed(() => {
+  if (props.loadingUserPlaylists || props.loadingPostVideo) return true;
+  if (step.value === 'new') return !newPlaylistName.value.trim();
+  return !selectValue.value.length;
+});
 
 const postVideoForm = computed(() => ({
   playlistId: selectValue.value.length ? selectValue.value : undefined,
@@ -262,6 +224,35 @@ const postVideoForm = computed(() => ({
 }));
 
 const { setErrorState, show, showError } = useSnackbar();
+const { generateLink } = useGenerateLink();
+const { t } = useI18n();
+
+/**
+ * Куда добавили: при одном плейлисте — его имя и ссылка на него же, при нескольких —
+ * количество и ссылка на список. У нового плейлиста id появляется только после ответа
+ * бэка, поэтому для него тоже ссылка на список.
+ */
+function getTarget(newPlaylistName?: string) {
+  const selected = props.userPlaylists?.items
+    ?.filter((item: IPlaylistCard) => selectValue.value.includes(item.id)) ?? [];
+  const total = selected.length + (newPlaylistName ? 1 : 0);
+  const single = total === 1 ? selected[0] : undefined;
+
+  if (single) {
+    // Пустому плейлисту первым видео становится только что добавленное.
+    const firstVideoId = single.firstVideoId ?? videoCard.value?.id;
+
+    return {
+      label: single.name,
+      link: generateLink(`/playlists/${single.id}/${firstVideoId}`),
+    };
+  }
+
+  return {
+    label: total === 1 ? newPlaylistName! : t('plural.playlists', total),
+    link: generateLink('/playlists'),
+  };
+}
 
 async function onSaveClick() {
   let newPlaylist: IPlaylistShort | undefined;
@@ -282,10 +273,12 @@ async function onSaveClick() {
 
     newPlaylist = {
       name,
-      type: playlistType.value === 'private' ? PlaylistType.Private : PlaylistType.Public,
+      type: playlistType.value,
     };
   }
 
+  const target = getTarget(newPlaylist?.name);
+
   try {
     emit('save-video-to-playlist', {
       form: postVideoForm.value as IPlaylistVideoFormType,
@@ -293,23 +286,17 @@ async function onSaveClick() {
       newPlaylist,
     });
     closePopup();
-    show('video_added');
+    show('added_to', {
+      icon: 'playlist',
+      highlight: target.label,
+      actionText: 'see_list',
+      onAction: () => navigateTo(target.link),
+    });
   } catch (error) {
     setErrorState(error);
     console.log(error, 'error add video to playlist');
   }
 }
-
-watch(
-  playlistsItems,
-  (items) => {
-    if (!items?.length) return;
-    if (selectValue.value.length) return;
-
-    selectValue.value = ['favorites'];
-  },
-  { immediate: true }
-);
 </script>
 
 <style lang="scss">
@@ -319,6 +306,13 @@ watch(
   }
 }
 
+/* Ширина фиксирована: длинное название плейлиста обрезается, а не растягивает модалку. */
+.playlist-add .ui-popup__wrapper {
+  @include from-br(sm) {
+    width: var(--popup-min-width);
+  }
+}
+
 .playlist-add .ui-popup__back {
   @include from-br(sm) {
     display: none;
@@ -329,8 +323,15 @@ watch(
   padding: 0;
 }
 
+.playlist-add .ui-popup__footer {
+  padding-inline: 24px;
+}
+
+/* minmax(0, 1fr), а не дефолтный auto-трек: иначе трек растёт до max-content и длинное
+   название плейлиста делает строку шире модалки вместо обрезки. */
 .playlist-add__wrapper {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
 }
 
 .playlist-add__item {
@@ -345,6 +346,15 @@ watch(
   }
 }
 
+/* Два класса не случайно: `.ui-checkbox` едет отдельным CSS-чанком и с одним классом
+   перебивает display по порядку загрузки. */
+.playlist-add .playlist-add__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 12px;
+}
+
 .playlist-add__item:not(:last-child) {
   border-bottom: 1px solid $playlist-add-item-border;
 }
@@ -357,10 +367,6 @@ watch(
   min-width: 0;
 }
 
-.playlist-add__item-wrapper.--favorites {
-  text-transform: capitalize;
-}
-
 .ui-checkbox__label .playlist-add__item-wrapper {
   @include font-base;
 
@@ -372,6 +378,7 @@ watch(
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  min-width: 0;
 }
 
 .playlist-add__item:last-child {
@@ -410,7 +417,10 @@ watch(
 }
 
 .playlist-add__item.--new {
+  @include font-base;
+
   color: $playlist-add-item-new;
+  font-weight: 500;
 }
 
 .playlist-add__item-edit {