Tensor

Преамбула

Старых версий (1.x.x) больше нет, так как полностью пеработана библиотека и они были не для публичного использования.
То, что написано в особенностях, лишь указывает с какой версии они появились, будут появляться или могут появиться.
Не заметил, что слово Tensor уже занято, так что в слудующем обновление всё будет переименованно в tenzor.

Особенность

Название	Tensor
SSR	3.x.x
Поддержка мобильных устройств	3.x.x
Отказ от TailwindCSS	3.x.x
Кастомизация UI	3.x.x
Кастомизация горячих клавиш	3.x.x
Озвучка	2.x.x
Cубтитры	2.x.x
Эффект - освещение	2.x.x
Предпросмотр кадров на временной шкале	2.x.x
Театральный режим	2.x.x
Мини-плеер	2.x.x
Эффект абберации	2.x.x
Переключение полноэкранного режима двойным кликом	2.0.0
Разметка эпизодов на временной шкале	2.0.0
Сокрытие конкретных элементов управления	2.0.0
Горячие клавиши (Windows / Mac)	2.0.0
Изменение соотношения видео	2.0.0
Tooltips	2.0.0
Изменение скорости	2.0.0
Эффект затемнения	1.2.1
Режим - кино	1.2.1
Автоматическое сокрытие контролера	1.2.0
Перемотка видео по временной шкале	1.2.0
Полноэкранный режим	1.1.1
Динамическая подгрузка	1.1.0
Автоматическое сокрытие элементов управления	1.1.0
Готовый UI	1.0.0
Поддержка ПК	1.0.0

Автоматическое сокрытие элементов управления - убирает из контролеров смену качества и озвучки, если их нет или же они имеют один элемент. Тоже самое касается и субтитров, но только если их вообще нет.
Автоматическое сокрытие контролера - скрывает контролеры при бездействии и показывает, если пользователь проявляется активность.

Управление клавишами

Действие	Windows	macOS
Воспроизвести/пауза	`Space`	`Space`
Уменьшить скорость (-5%)	`Shift + ←`	`Shift + ←`
Увеличить скорость (+5%)	`Shift + →`	`Shift + →`
Промотка вперёд (Seek +15s)	`→`	`→`
Промотка назад (Seek -15s)	`←`	`←`
Промотка	`0-9`	`0-9`
Увеличить громкость	`↑`	`↑`
Уменьшить громкость	`↓`	`↓`
Начать с начала	`R`	`R`
Вкл/выкл звука	`M`	`M`
Театральный режим	`T`	`T`
Мини-плеер	`I`	`I`
Полноэкранный режим	`F`	`F`
Выход из полноэкранного режима	`Ecs`	`Ecs`
Вкл/выкл субтитры	`C`	`C`

Поддержка браузеров (Добавил на будущее)

??????	Chrome	Firefox	Safari	Edge	Opera
ES6+ (let, const)	✅	✅	✅	✅	✅
Полноэкранный режим	-	-	-	-	-
Режим мини-плеера	-	-	-	-	-
Театральный режим	-	-	-	-	-
Tooltips	-	-	-	-	-
SSR	-	-	-	-	-
Озвучка	-	-	-	-	-
Субтитры	-	-	-	-	-
Эпизоды	-	-	-	-	-
Эффект — освещение	-	-	-	-	-
Предпросмотр кадров на временной шкале	-	-	-	-	-
Горячие клавиши	-	-	-	-	-
Эффект затемнения	-	-	-	-	-
Режим — кино	-	-	-	-	-
Эффект аберрации	-	-	-	-	-

Свойства `useTensor`

1. `videoRef`

Ссылка на HTML-элемент <video>.

2. `track`

Объект с информацией о текущем треке (берётся из player):

source – источник.
label? – название.

3. `voice`

Объект с информацией озвучки в текущем треке (берётся из player):

source – источник.
label? – название.

4. `subtitle`

Объект с информацией субтитров в текущем треке (берётся из player):

source – источник.
label? – название.
srclang? – язык.

5. `episodes`

Массив объектов эпизодов для отображения на временной шкале (берётся из player):

start: number – начало эпизода.
end: number – конец эпизода.
title: string – название эпизода.
description?: string – описание эпизода.

6. `modes`

Состояния режима отображения (берётся из player):

isFullscreen: boolean – находится ли видео в полноэкранном режиме.
isMiniPlayer: boolean – находится ли видео в режиме мини-плеер.
isTheatre: boolean – находится ли видео в театральном режиме.

7. `disable-сontrols`

Состояния отключений контроллеров (берётся из player):

fullscreen: boolean - отключает возможность вкл/выкл полноэкранного режима.
miniPlayer: boolean - отключает возможность вкл/выкл режим мини-плеера.
theatre: boolean - отключает возможность вкл/выкл театральный режима.
settings: boolean - отключает возможность изменять настройки.
quality: boolean - отключает возможность менять качество видео.
voice: boolean - отключает возможность менять озвучку видео.
subtitle: boolean - отключает возможность менять субтитры.
vfx: boolean - отключает возможность использовать эффекты.
shortcuts: boolean - отключает горячие клавиши.
controls: boolean - откючает UI контроллеров.
all: boolean - отключает вообще всё.

8. `allowed-аullscreen-сontrols`

Состояния вкл контроллеров в полноэкранном режиме (берётся из player):

settings: boolean - отключает возможность изменять настройки.
quality: boolean - отключает возможность менять качество видео.
voice: boolean - отключает возможность менять озвучку видео.
subtitle: boolean - отключает возможность менять субтитры.
vfx: boolean - отключает возможность использовать эффекты.
shortcuts: boolean - отключает горячие клавиши.
controls: boolean - откючает UI контроллеров.

9. `player`

Состояние и управление плеером:

trackList – список треков видео.
voiceList – список озвучек видео.
subtitleList – список субтитров видео.
track – текущее видео.
voice – текущая озвучка видео (если пустой, то озвучка по умолчанию работает из viode).
subtitle – текущие субтитры видео.
episodes
poster: string – постер видео.
isFirstStart: boolean – запущено ли видео впервые (позврляет избегать запроса на получение видео и его данных, если оно не в фокусе клиента)
isError: boolean – есть ли ошибка при загрузке/воспроизведении видео.
isPlaying: boolean – воспроизводится ли видео.
isLoading: boolean – загрузилось ли видео.
isEnded: boolean – закончилось ли видео.
isLooped: boolean – включен ли режим зацикленного воспроизведения.
isMuted: boolean – выключен ли звук.
modes
~~disableControls~~ (deprecating)
~~allowedFullscreenControls~~ (deprecating)
volume: number – текущий уровень громкости [0-1].
speed: number – текущая скорость [0.25-2].
error – содержит ошибку.
currentTime: number – текущая длина воспроизводимого видео.
totalTime: number – общая длина видео.
timeSkip: string – на сколько секунд пропускать видео
setTensorState() – общая функция для обновления состояний.
~~setTrackList()~~ – добавление треков. (deprecating)
~~setVoiceList()~~ – добавление озвучек. (deprecating)
~~setSubtitleList()~~ – добавление субтитров. (deprecating)

timeSkip нужно указывать в таком примере: "15s", "5s", "3s" или даже так "1m", "2h" и так далее. Внимание, свойства из modes впоследствии будут перенесены в useTensorMode.
Внимание, свойства из disableControls и allowedFullscreenControls впоследствии будут перенесены в useTensorUI и изменены.
Внимание, свойства: currentTime, totalTime и timeSkip впоследствии будут перенесены в useTensorTimeline.

10. `playback`

Функции управления воспроизведением:

handleTogglePlay() – переключает воспроизведение видео.
handleLoadedMetadata() – вызывается при загрузке метаданных видео.
handleTimeUpdate() – вызывается при обновлении текущего времени.
handleEnded() – вызывается при завершении трека.
handleRepeat() – воспроизводит видео с начала.
handleTimeSkip("forward" | "backward") – перемотка видео на 15 сек вперёд или назад.
handleTimeNumberSkip(number) – перемотка видео на n%.
handleSpeedChange("increase" | "decrease") – ускоряет/замедляет видео на 25%.
handleVolumeChange() – обновление громкости видео.
~~setVideoSrc()~~ – устанавливает новый трек для видео. (deprecating)
handleError() – отлавливает ошибки, связанные с видео.
handleChangeQuality() – изменяет качество видео.
handleChangeVoice() – изменяет озвучку видео.
handleChangeSubtitle() – изменяет субтитры видео.
toggleMute() – вкл/выкл звук.
toggleLoop() – вкл/выкл зацикливание.
toggleCaptions() – вкл/выкл субтитры.

11. `shortcuts`

Управление горячими клавишами:

isActive() – позволяет проверить, находится ли видео в фокусе, чтобы горячие клавиши работали только для него, а не для всех сразу.
handleTS() – управляет промоткой видео вперёд и назад.
handleTSByNumber() – управляет промоткой видео вперёд и назад при помощи цифр [0-9].
handleVolumeAndSpeed() – управляет увеличение/уменьшение звука и скоростью видео.
handlePlaybackControls() – управляет второстипенными функциями управления (пауза, вкл/выкл эффекты и т.п).

PS. из shortcuts ничего нельзя достать.

12. `vfx`

Управление визуальными эффектами:

useMovieMode – отображение чёрных полос как в кино.
useAberrationEffect – добавляет зернистость.
useBlackoutEffect – добавляет затемнение по бокам.
useLightingEffect – добавляет эффект освещения вокруг плеера (пока не работает).
setTensorVFX() – общая функция для обновления состояний.

useLightingEffect будет хорошо работать с видео, где акцент идёт на музыку и её динамику.

13. `mode`

Управление режимом плеера:

handleToggleMode("theater" | "mini" | "fullscreen") – переключает режим плеера.

14. `timeline`

Управление дорожкой:

progress – показывает прогресс проигрываемого видео.
updateProgress – обновляет progress, при перемотки видео, когда оно на паузе.
handleManualRewind() – позволяет проматывать видео по дорожке.
startAnimation() – запускает анимацию движения полосы трека.
stopAnimation() – останавливает анимацию движения полосы трека.

Пример использования

"use client";
import { FC } from "react";

import { TensorPlayer } from "tenzor";
import { FileStorageProps } from "@shared/types/system/storage.interfaces";

export const CardVideo: FC<FileStorageProps> = ({...props}) => {
    const { id, name, url, extension, type, size, created_at, children } = props;

    const trackList = [
        {source: "http://localhost:5000/uploads/videos/a351021a-8fb1-4902-837e-84a182b76c8a-1800p.mp4", label: "1080p"},
        {source: "http://localhost:5000/uploads/videos/a351021a-8fb1-4902-837e-84a182b76c8a-720p.mp4", label: "720p"},
        {source: "http://localhost:5000/uploads/videos/a351021a-8fb1-4902-837e-84a182b76c8a-480p.mp4", label: "480p"},
    ];

    const episode = [
        {start: 10, end: 50, title: "Начало"}
    ];

    return(
        <div className="relative w-full h-56 overflow-hidden rounded-md">
            <TensorPlayer
                id={`video-${id}`}
                trackList={trackList}
                episodes={episodes}
            />
        </div>
    )
}

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
src		src
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
README.md		README.md
UpdatesLog.md		UpdatesLog.md
package.json		package.json
tsconfig.json		tsconfig.json
tsup.config.ts		tsup.config.ts

Navigation Menu

Repository files navigation

Tensor

Преамбула

Особенность

Управление клавишами

Поддержка браузеров (Добавил на будущее)

Свойства `useTensor`

1. `videoRef`

2. `track`

3. `voice`

4. `subtitle`

5. `episodes`

6. `modes`

7. `disable-сontrols`

8. `allowed-аullscreen-сontrols`

9. `player`

10. `playback`

11. `shortcuts`

12. `vfx`

13. `mode`

14. `timeline`

Пример использования

About

Releases

Packages

Used by

Contributors

Languages

Folders and files

Latest commit

History

Repository files navigation

Tensor

Преамбула

Особенность

Управление клавишами

Поддержка браузеров (Добавил на будущее)

Свойства useTensor

1. videoRef

2. track

3. voice

4. subtitle

5. episodes

6. modes

7. disable-сontrols

8. allowed-аullscreen-сontrols

9. player

10. playback

11. shortcuts

12. vfx

13. mode

14. timeline

Пример использования

About

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages

Свойства `useTensor`

1. `videoRef`

2. `track`

3. `voice`

4. `subtitle`

5. `episodes`

6. `modes`

7. `disable-сontrols`

8. `allowed-аullscreen-сontrols`

9. `player`

10. `playback`

11. `shortcuts`

12. `vfx`

13. `mode`

14. `timeline`