itube-specs 0.0.1072 → 0.0.1073

package/SITE_UPDATES.md

@@ -11,6 +11,12 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1073 — 2026-11-03
+
+- **Всем — к сведению:** гость больше не видит заглушку «Sign in to upload» на `/upload`: клик по Upload (шапка,
+  бургер) и по выбору файла открывает попап регистрации с пояснением (новый общий ключ `register_to_upload`, пока
+  только en-US), после входа — сразу `/upload`. Делать ничего не надо.
+
 ## 0.0.1071 — 2026-11-03
 
 - **Сайтам со своей темой в `assets/scss/vars/_theme.scss` (hd-sex-new), срочно:** без новых токенов сборка падает

package/components/layout/burger.vue

@@ -162,6 +162,7 @@ function logOut() {
 }
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
+const { requireAuth } = useUploadEntry();
 
 const burgerButtons = computed<{ icon: string, label: string, action?: () => void, link?: string }[]>(() => [
   ...isAuthorized.value ? [
@@ -184,11 +185,9 @@ const burgerButtons = computed<{ icon: string, label: string, action?: () => voi
         },
       ],
   ...featureFlags.FeatureUploadEnabled ? [
-    {
-      icon: 'upload',
-      label: 'upload',
-      link: generateLink('/upload'),
-    }
+    isAuthorized.value
+      ? { icon: 'upload', label: 'upload', link: generateLink('/upload') }
+      : { icon: 'upload', label: 'upload', action: () => requireAuth() },
   ] : [],
 ]);
 

package/components/layout/header.vue

@@ -63,6 +63,7 @@
         :tabindex="isUploadPage ? -1 : undefined"
         :class="{'--current': isUploadPage}"
         class="layout-header__upload _from-sd"
+        @click="onUploadClick"
       >
         <UiIcon
           name="upload-arrow"
@@ -122,6 +123,13 @@ const route = useRoute();
 const { generateLink } = useGenerateLink();
 
 const uploadLink = computed(() => generateLink('/upload'));
+const { requireAuth, watchUploadEntry } = useUploadEntry();
+
+watchUploadEntry();
+
+function onUploadClick(event: MouseEvent) {
+  if (!requireAuth()) event.preventDefault();
+}
 const isUploadPage = computed(() => route.path === uploadLink.value);
 
 const burgerShow = ref(false);

package/components/upload/main.vue

@@ -67,10 +67,8 @@
 
 <script setup lang="ts">
 import { UploadAccount, UploadStage } from '../../runtime';
-import { AuthorizationApiService } from '../../services/api/authorization.service';
 
 const { t } = useI18n();
-const { isAuthorized } = useUser(AuthorizationApiService);
 
 const {
   stage,
@@ -96,11 +94,7 @@ const isRulesOpen = ref(false);
 
 const isPick = computed(() => stage.value === UploadStage.Pick);
 
-const account = computed(() => {
-  if (!isAuthorized.value) return UploadAccount.SignedOut;
-
-  return remaining.value > 0 ? UploadAccount.Ok : UploadAccount.Limit;
-});
+const account = computed(() => remaining.value > 0 ? UploadAccount.Ok : UploadAccount.Limit);
 
 function onBeforeUnload(event: BeforeUnloadEvent) {
   if (!isUploading.value) return;

package/components/upload/picker.vue

@@ -1,34 +1,6 @@
-<!-- First upload step: sign-in gate, drop zone (desktop) or file button (mobile), requirement checks of the picked file -->
+<!-- First upload step: drop zone (desktop) or file button (mobile), requirement checks of the picked file; a guest gets the auth popup instead of the file dialog -->
 <template>
-  <div
-    v-if="account === UploadAccount.SignedOut"
-    class="upload-picker__gate"
-  >
-    <UiIcon
-      class="upload-picker__gate-icon"
-      name="lock"
-      size="24"
-      aria-hidden="true"
-    />
-    <p class="upload-picker__gate-title">{{ t('upload_page.sign_in') }}</p>
-    <div class="upload-picker__gate-buttons">
-      <UiBtn
-        theme="primary"
-        @click="openAuthPopup(AuthSteps.Registration)"
-      >{{ t('auth.sign_up') }}
-      </UiBtn>
-      <UiBtn
-        theme="muted"
-        @click="openAuthPopup(AuthSteps.Login)"
-      >{{ t('auth.log_in') }}
-      </UiBtn>
-    </div>
-  </div>
-
-  <div
-    v-else
-    class="upload-picker"
-  >
+  <div class="upload-picker">
     <div class="upload-picker__mobile _to-sd">
       <UiBtn
         :disabled="isDisabled"
@@ -120,7 +92,7 @@
 </template>
 
 <script setup lang="ts">
-import { AuthSteps, UPLOAD_LIMITS, UploadAccount, UploadCheckStatus } from '../../runtime';
+import { UPLOAD_LIMITS, UploadAccount, UploadCheckStatus } from '../../runtime';
 import type { IUploadFile } from '../../types';
 import { checkUploadFile } from '../../utils/upload/check-upload-file';
 import { createIdleUploadChecks } from '../../utils/upload/create-idle-upload-checks';
@@ -135,7 +107,7 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
-const { openAuthPopup } = useAuthPopup();
+const { requireAuth } = useUploadEntry();
 
 const inputRef = ref<HTMLInputElement>();
 const isDragging = ref(false);
@@ -158,7 +130,7 @@ const zoneLabel = computed(() => {
 });
 
 function openDialog() {
-  inputRef.value?.click();
+  if (requireAuth()) inputRef.value?.click();
 }
 
 async function check(file?: File) {
@@ -182,7 +154,7 @@ function onDragOver() {
 
 function onDrop(event: DragEvent) {
   isDragging.value = false;
-  check(event.dataTransfer?.files[0]);
+  if (requireAuth()) check(event.dataTransfer?.files[0]);
 }
 
 function onChange(event: Event) {
@@ -283,37 +255,4 @@ function onChange(event: Event) {
   color: $upload-text;
   font-variant-numeric: tabular-nums;
 }
-
-.upload-picker__gate {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-  min-height: 180px;
-  padding: 24px;
-  text-align: center;
-  background-color: $upload-card-bg;
-  border-radius: $radius-12;
-
-  @include from-br(sm) {
-    min-height: 220px;
-  }
-}
-
-.upload-picker__gate-icon {
-  color: $upload-text;
-}
-
-.upload-picker__gate-title {
-  @include font-base;
-
-  font-weight: 500;
-  color: $upload-title;
-}
-
-.upload-picker__gate-buttons {
-  display: flex;
-  gap: 8px;
-}
 </style>

package/composables/use-upload-entry.ts

@@ -0,0 +1,33 @@
+import { AuthSteps } from '../runtime';
+import { AuthorizationApiService } from '../services/api/authorization.service';
+
+/**
+ * Entry to the upload page for guests: instead of a sign-in placeholder the auth popup opens with an explanation,
+ * and after a successful login the user lands on `/upload`. `watchUploadEntry` is called once, by the header.
+ */
+export function useUploadEntry() {
+  const { isAuthorized } = useUser(AuthorizationApiService);
+  const { isAuthPopupOpen, openAuthPopup } = useAuthPopup();
+  const { generateLink } = useGenerateLink();
+  const isPending = useState('upload-entry-pending', () => false);
+
+  function requireAuth() {
+    if (isAuthorized.value) return true;
+
+    isPending.value = true;
+    openAuthPopup(AuthSteps.Registration, 'register_to_upload');
+
+    return false;
+  }
+
+  function watchUploadEntry() {
+    watch(isAuthPopupOpen, (isOpen) => {
+      if (isOpen || !isPending.value) return;
+
+      isPending.value = false;
+      if (isAuthorized.value) navigateTo(generateLink('/upload'));
+    });
+  }
+
+  return { requireAuth, watchUploadEntry };
+}

package/i18n/locales/en-US.json

@@ -1,4 +1,5 @@
 {
+  "register_to_upload": "Please sign up or log in to upload your videos",
   "age_gate": {
     "thumb": "18+",
     "title": "Laws in your region require age verification to view 18+ content",
@@ -58,7 +59,6 @@
     "title_details": "Video details",
     "subtitle_pick": "Pick a file. You'll add models and tags while it uploads.",
     "subtitle_details": "Your video keeps uploading while you fill this in.",
-    "sign_in": "Sign in to upload",
     "drag": "Drag a video here",
     "drag_another": "Drag another video here",
     "checking_video": "Checking video...",

package/package.json

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

package/runtime/constants/upload.ts

@@ -18,7 +18,6 @@ export type UploadStatus = typeof UploadStatus[keyof typeof UploadStatus];
 
 export const UploadAccount = {
   Ok: 'ok',
-  SignedOut: 'signed-out',
   Limit: 'limit',
 } as const;