🎭 TGS Player Web Component

not an official telegram project

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

📋 Описание

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

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

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

📥 Установка

1. Добавьте папку /js в корень вашего проекта
2. Скопируйте компонент TgsSticker.svelte в папку src/lib/components/
3. Подключите компонент в 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}
/>

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

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

Chrome v57+

Firefox v52+

Safari v11+

Edge v79+

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

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

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

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

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

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