Задать вопрос

maxonklakson

Ответы пользователя по тегу JavaScript

  • Windows просит USB-ключ, а мне нужен PIN. Как включить проверку пароля/PIN в Windows Hello?

    @maxonklakson
    Чтобы navigator.credentials.get использовал встроенный Windows Hello, у тебя должен быть:
    credential, зарегистрированный через Windows Hello, то есть:
    authenticatorAttachment: "platform" при создании (navigator.credentials.create)
    user verification включён (например, PIN)
    Иначе Windows будет звать последний известный способ — в твоем случае внешний ключ.
    Что тебе нужно сделать
    Заново зарегистрировать credential через navigator.credentials.create(), указав authenticatorAttachment: "platform":
    const publicKey = {
  challenge: new Uint8Array(32),
  rp: { name: "Example Corp" },
  user: {
    id: new Uint8Array(16),
    name: "user@example.com",
    displayName: "User"
  },
  pubKeyCredParams: [{ alg: -7, type: "public-key" }],
  authenticatorSelection: {
    authenticatorAttachment: "platform",
    userVerification: "required",
    residentKey: "required"
  },
  timeout: 60000,
  attestation: "none"
};

const cred = await navigator.credentials.create({ publicKey });
console.log(cred);

    Сохрани credentialId из полученного cred.rawId (в base64url).
    При логине (через navigator.credentials.get) передавай этот ID.
    Ответ написан
    Комментировать
    Комментировать

  • Помощь со скроллом и gsap?

    @maxonklakson
    Скорее всего ты не используешь ScrollTrigger с параметром pin, или он неправильно сконфигурирован.

    gsap.registerPlugin(ScrollTrigger);

gsap.timeline({
  scrollTrigger: {
    trigger: ".your-section",
    start: "top top",
    end: "+=1000", // "или сколько нужно"
    scrub: true,
    pin: true, // 
  }
})
.fromTo(".your-element", { opacity: 0 }, { opacity: 1 });
    Ответ написан
    Комментировать
    Комментировать

  • Почему не подключается css файл в Webpack?

    @maxonklakson
    Проблема в том, что Webpack был настроен обрабатывать все сss файлы как модули. При подключении skeleton.css из папки node_modules, Webpack автоматически ставил свой префикс на все классы, и стили из библиотеки исчезали (потому что у нее .skeleton, а Webpack ее меняет на dash-abc123 и поиск слетает). Решение: сделать так, чтобы Webpack обрабатывал только сss внутри нашего проекта как модули, а все что из node_modules - "как есть".
    Просто добавляем одну строчку - пусть Webpack понимает, что все что из node_modules нам пока не надо трогать. Вот пример: 
    module: {
  rules: [
    {
      test: /\.(js|jsx|tsx|ts)$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    },
    {
      test: /\.css$/i,
      oneOf: [
        {
          // твои файлы — модули
          include: path.resolve(__dirname, 'src'),
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: 'dash-[hash:base64]',
                },
              },
            },
          ],
        },
        {
          // всё остальное — обычный css
          exclude: path.resolve(__dirname, 'src'),
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
          ],
        },
      ],
    },
  ],
}

    И всё, теперь react-loading-skeleton работает, и у нас сохранена изоляция стилей.
    Ответ написан
    Комментировать
    Комментировать

  • Плавная прокрутка html5 видео?

    @maxonklakson
    Привет! Плавная прокрутка видео с помощью seek bar, особенно покадрово и без задержек, действительно может быть сложной задачей из-за: буферизации и декодирования видео, ограничений браузеров, производительности системы. Но ее можно реализовать довольно качественно, если учесть несколько моментов. Вот как можно добиться максимально плавной прокрутки:
    Основные рекомендации:
    1. Используй requestVideoFrameCallback
    Это современный API, позволяющий отслеживать рендеринг кадров и синхронизировать UI.
    video.requestVideoFrameCallback(function(now, metadata) {
    // можно обновлять UI с точностью до кадра
    });
    2. Отключи автоматическое буферизование
    Можно задать preload="none" и вручную загружать видео. Это даст тебе больше контроля, но увеличит время загрузки при первом воспроизведении.

    3. Управляй currentTime вручную на input
    Свяжи range input с video.currentTime.
    Используй input (не change), чтобы получать плавные обновления при перемещении ползунка.

    const video = document.getElementById('myVideo');
    const slider = document.getElementById('slider');

    slider.addEventListener('input', () => {
    const duration = video.duration;
    video.currentTime = (slider.value / 100) * duration;
    });
    4. Используй .pause() и избегай .play() при прокрутке
    Не позволяй видео автоматически воспроизводиться — особенно при прокрутке назад/вперед. Это уменьшит лаги.
    5. Формат видео — ключ
    Лучше всего работает: видео без B-frames (только I и P кадры), высокая частота ключевых кадров (GOP ~1-2 сек), кодек: H.264 с хорошей поддержкой браузерами, низкое разрешение (если нет нужды в 4K).
    Альтернатива:
    Покадровая прокрутка через изображения
    Если тебе нужно супер-точное управление — можно экспортировать кадры в PNG/JPEG и просто отображать нужное изображение при прокрутке.
    Но это не масштабируется для больших видео.
    Проблемы:
    В некоторых браузерах (Safari, особенно на iOS) currentTime может с запозданием менять кадр.
    Ответ написан
    1 комментарий
    1 комментарий