# Thumbnail Tinder

Приложение для итогового отбора превью. Оно работает с файлами браузерного расширения Outlier Saver, которое сохраняет видео с аномально высокими просмотрами (outliers).

Вы загружаете CSV из расширения и листаете видео как в Tinder: превью, название, просмотры, подписчики и outlier score. Свайп вправо — нравится, влево — нет. В конце приложение отдаёт новый CSV в том же формате, но только с понравившимися видео. Отдельная страница показывает отобранное сеткой, как главная YouTube.

- Сайт: https://outliers.viaproger.ru/
- Расширение для браузера, которое создаёт CSV: [outlier-saver-extension](https://gitea.viaproger.ru/volochay/outlier-saver-extension)

Приложение статическое: три файла, без сервера, базы данных и сборки. Файл CSV читается прямо в браузере и никуда не отправляется.

## Как пользоваться

### 1. Отбор: `index.html`

1. Перетащите CSV на страницу или нажмите «Выбрать файл».
2. Оценивайте видео:

   | Действие | Мышь / тач | Клавиатура |
   |---|---|---|
   | Нравится | свайп вправо или кнопка «Нравится» | `→` или `D` |
   | Не нравится | свайп влево или кнопка «Не нравится» | `←` или `A` |
   | Пропустить (отложить) | кнопка «Пропустить» вверху или свайп вверх | `↑` или `S` |
   | Отменить последнее решение | «Отменить» | `Z` или `Backspace` |
   | Открыть видео на YouTube | «Открыть на YouTube» или клик по названию | `Enter` |

3. Нажмите «Скачать CSV». Получится файл `<имя исходного файла>-liked.csv`. Скачать можно в любой момент, не обязательно оценивать всё.

**Формат результата.** Понравившиеся строки копируются из исходного файла без изменений: те же колонки, кавычки, BOM и переводы строк (CRLF), исходный порядок. Если выгрузить все строки, получится файл, идентичный исходному.

**Пропущенные видео** в файл не попадают. Когда основной проход закончится, их можно пересмотреть отдельно.

**Прогресс сохраняется в браузере.** Если закрыть вкладку и снова загрузить тот же файл, работа продолжится с того места, где вы остановились. Прогресс привязан к содержимому файла, браузеру и адресу страницы.

На карточке под числом outlier score есть шкала от 1× до 1000× (логарифмическая), на ней отмечено, где находится видео.

### 2. Галерея: `liked.html`

Откройте её кнопкой «Галерея» и загрузите скачанный `…-liked.csv`. Подойдёт и любой CSV из расширения.

- Сетка: 2 колонки на узком экране, 3 на среднем, 4 на широком.
- На карточке: превью, название, канал, просмотры, подписчики, outlier score.
- Сортировка: как в файле, по outlier score, по просмотрам, по подписчикам, по дате добавления.
- Клик по превью или названию открывает видео, клик по каналу открывает канал.

### Формат входного CSV

Обязательные колонки: `videoId`, `title`, `thumbnailUrl`. Остальные показываются, если есть:

```
videoId,title,url,thumbnailUrl,channelTitle,channelUrl,subscribers,views,outlierScore,isShort,foundOn,firstSeenAt,updatedAt
```

Файл создаёт [расширение Outlier Saver](https://gitea.viaproger.ru/volochay/outlier-saver-extension). Короткий пример на 6 видео лежит в репозитории: `example.csv`.

## Локальный запуск

Откройте `index.html` в браузере двойным кликом. Ничего устанавливать не нужно.

Файлы `index.html`, `liked.html` и `style.css` должны лежать в одной папке. Шрифты (Google Fonts) и превью (`i.ytimg.com`) подгружаются из интернета. Без сети интерфейс работает, но превью не покажутся.

Если нужен локальный сервер:

```bash
python3 -m http.server 8080
# http://localhost:8080
```

## Развёртывание на сервере (nginx)

Сайт развёрнут на https://outliers.viaproger.ru/. Для своего сервера нужен Linux (ниже команды для Debian/Ubuntu) и домен, у которого A/AAAA-запись указывает на сервер. Ниже вместо `ВАШ.ДОМЕН` подставьте `outliers.viaproger.ru` или свой домен. Порты 80 и 443 должны быть открыты.

Конфиг: [`deploy/nginx.conf`](deploy/nginx.conf).

### 1. Установите nginx

```bash
sudo apt update
sudo apt install nginx
```

### 2. Выложите файлы приложения

Нужны только три файла. CSV и остальное на сервер класть не надо.

```bash
git clone <адрес-репозитория> ~/thumbnail-tinder
cd ~/thumbnail-tinder

sudo mkdir -p /var/www/thumbnail-tinder
sudo install -m 644 index.html liked.html style.css /var/www/thumbnail-tinder/
```

### 3. Подключите конфиг

```bash
sudo cp deploy/nginx.conf /etc/nginx/sites-available/thumbnail-tinder
sudo sed -i 's/outliers.viaproger.ru/ВАШ.ДОМЕН/' /etc/nginx/sites-available/thumbnail-tinder
sudo ln -s /etc/nginx/sites-available/thumbnail-tinder /etc/nginx/sites-enabled/

sudo nginx -t && sudo systemctl reload nginx
```

Если `nginx -t` ругается на конфликт `server_name` или на порт, проверьте, не включён ли стандартный сайт `default`: `sudo rm /etc/nginx/sites-enabled/default`.

Проверьте: `http://ВАШ.ДОМЕН` должен открыть приложение.

### 4. Включите HTTPS

```bash
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d ВАШ.ДОМЕН
```

Certbot сам добавит блок `listen 443 ssl`, редирект с HTTP и настроит автопродление сертификата. Проверить продление: `sudo certbot renew --dry-run`.

После этого по желанию включите HSTS: добавьте в блок `server` с `listen 443` строку  
`add_header Strict-Transport-Security "max-age=31536000" always;`  
Делайте это только когда уверены, что HTTPS работает стабильно.

### 5. Обновление

Статика раздаётся без сборки, перезапускать nginx не нужно:

```bash
cd ~/thumbnail-tinder
git pull
sudo install -m 644 index.html liked.html style.css /var/www/thumbnail-tinder/
```

HTML отдаётся с `Cache-Control: no-cache`, а `style.css` кэшируется на 1 час, поэтому изменения стилей могут появиться у пользователей с задержкой до часа.

### Что делает конфиг

- **Белый список путей.** Отдаются только `/`, `/index.html`, `/liked.html` и `/style.css`. Всё остальное (CSV, `.git`, README) отвечает 404, даже если файл случайно окажется в папке.
- **Только GET и HEAD.** Остальные методы получают 405.
- **Content-Security-Policy.** Разрешены только ресурсы самого сайта, шрифты с `fonts.googleapis.com` и `fonts.gstatic.com` и превью с `i.ytimg.com`. Запросы из скриптов запрещены (`connect-src 'none'`): приложение ничего не отправляет по сети, CSV остаётся в браузере. Встроенные скрипты и стили разрешены через `'unsafe-inline'`, потому что они лежат прямо в HTML.
- **Прочие заголовки:** `X-Content-Type-Options`, `X-Frame-Options: DENY`, `Referrer-Policy: no-referrer`, `Permissions-Policy`.
- **Сжатие gzip**, кодировка UTF-8, отдельные логи `thumbnail-tinder.*.log`.

Если вы добавите новую внешнюю зависимость (другой шрифт, CDN-скрипт), обновите CSP в конфиге, иначе браузер её заблокирует.

### Проверка конфига без сервера

Конфиг можно проверить в Docker:

```bash
docker run --rm -p 8080:80 \
  -v "$PWD/deploy/nginx.conf":/etc/nginx/conf.d/default.conf:ro \
  -v "$PWD":/var/www/thumbnail-tinder:ro \
  nginx:alpine
# http://localhost:8080
```

### Доступ только для себя

Приложение не хранит данных на сервере, но если не хотите, чтобы им пользовались посторонние, добавьте в блок `server` базовую авторизацию:

```nginx
auth_basic "Thumbnail Tinder";
auth_basic_user_file /etc/nginx/.htpasswd;
```

```bash
sudo apt install apache2-utils
sudo htpasswd -c /etc/nginx/.htpasswd ИМЯ
```

## Структура

```
index.html        отбор: свайпы и экспорт CSV
liked.html        галерея понравившихся
style.css         общие стили и цвета
deploy/nginx.conf конфиг nginx
example.csv       пример входного файла (6 видео)
```

## Ограничения

- Прогресс хранится в `localStorage` браузера: он не переносится между браузерами и устройствами, и очистка данных сайта его удалит. Результат лучше скачать до этого.
- Для превью берётся `maxresdefault.jpg`, а если его нет, ссылка из CSV. Видео, удалённые с YouTube, покажутся без картинки.