Tgs_emoji_player

ysturasp

🧩 Компонент для воспроизведения tgs эмодзи в svelte проектах

Demo Download

🎭 TGS Player Web Component

🚀 Легковесный веб-компонент для воспроизведения Telegram стикеров

not an official telegram project

🎯 Основные возможности

⚡ Молниеносная скорость WebAssembly + ~30KB модуль `████████████ 100%`	🎯 Нулевые зависимости Автономная работа `████████████ Standalone`
🔧 Простое API HTML-атрибуты `████████████ Easy`	🌐 Кроссплатформенность Все браузеры `████████████ Universal`

📋 Описание

TGS Player - это современный веб-компонент для воспроизведения анимированных стикеров Telegram (формат .tgs) прямо в браузере. Использует WebAssembly для максимальной производительности и минимального потребления ресурсов

🛠 Функциональность

🎬 Воспроизведение TGS (Lottie) анимаций
⚡ Аппаратное ускорение через WebAssembly
🎮 Настраиваемые элементы управления
🔄 Автоматическое воспроизведение
👆 Воспроизведение по наведению
🔂 Однократное воспроизведение
💾 Эффективное кэширование
🌐 Поддержка всех современных браузеров

📥 Установка

Добавьте папку /js в корень вашего проекта
Скопируйте компонент TgsSticker.svelte в папку src/lib/components/
Подключите компонент в HTML:

<script src="/js/tgs-player.js"></script>

💻 Использование

Импорт компонента:

import TgsSticker from '$lib/components/TgsSticker.svelte';

Базовое использование:

<TgsSticker src="/stickers/animation.tgs" />

Воспроизведение при наведении:

<TgsSticker 
    src="/stickers/animation.tgs" 
    autoplay={false}
    playOnHover={true}
/>

Ленивая загрузка с настройками:

<TgsSticker 
    src="/stickers/animation.tgs"
    autoplay={false}
    once={false}
    playOnHover={true}
    width="100%"
    height="100%"
    quality={2}
    lazy={true}
/>

Полная конфигурация:

<TgsSticker 
    src="/path/to/sticker.tgs"
    autoplay={true}
    once={true}
    playOnHover={false}
    width="64px"
    height="64px"
    quality={2}
    lazy={false}
/>

📊 Свойства компонента

Свойство	Тип	По умолчанию	Описание
`src`	`string`	-	Путь к .tgs файлу ✅
`autoplay`	`boolean`	`true`	Автоматический запуск анимации
`once`	`boolean`	`false`	Воспроизвести только один раз
`playOnHover`	`boolean`	`false`	Воспроизведение при наведении
`width`	`string`	`"64px"`	Ширина компонента
`height`	`string`	`"64px"`	Высота компонента
`quality`	`number`	`2`	Качество рендеринга (1-3)
`lazy`	`boolean`	`false`	Ленивая загрузка при появлении в viewport

🌐 Поддержка браузеров

Chrome
_v57+

Firefox
_v52+

Safari
_v11+

Edge
_v79+

⚡ Производительность

🚀 Минимальное использование CPU благодаря WebAssembly
💾 Небольшой объем памяти
🎯 Аппаратное ускорение при наличии
🔄 Эффективная система кэширования анимаций

📚 Источник кода

За основу проекта были взяты следующие репозитории:

tgs-player - базовый веб-компонент для воспроизведения TGS файлов
durgerKing - демо мини-приложение от команды Telegram для демонстрации возможностей TMA

✨ Спасибо за интерес к нашему проекту! ✨

Если вам понравился проект, не забудьте поставить ⭐ звезду на GitHub!

Top categories