SMTXImob Viewr

Uma biblioteca React para exibi��o de v�deos em formato stories/reels, otimizada para plataformas imobili�rias.

=� Instala��o

npm install smtximob-viewr

=� Uso

import React from 'react';
import Viewr from 'smtximob-viewr';

function App() {
  return (
    <Viewr
      urlList={[
        'https://example.com/video1.mp4',
        'https://example.com/video2.mp4',
        'https://example.com/video3.mp4'
      ]}
      shareText="Compartilhar"
      shareTitle="Compartilhar V�deo"
    />
  );
}

export default App;

=� Props

| Prop | Tipo | Obrigat�rio | Padr�o | Descri��o | |------|------|-------------|--------|-----------| | urlList | string[] |  Sim | - | Array com URLs dos v�deos a serem exibidos | | shareText | string | L N�o | "Compartilhar" | Texto do bot�o de compartilhamento | | shareTitle | string | L N�o | "Compartilhar" | T�tulo para compartilhamento |

( Funcionalidades

• =� Responsivo: Funciona em desktop e mobile
• <� Auto-play inteligente: V�deos tocam automaticamente quando vis�veis
• = Controle de �udio: Toggle de mute/unmute
• =� Scroll vertical: Navega��o estilo stories/reels
• � Performance otimizada: Carregamento lazy de metadados
• <� Intersection Observer: Detecta visibilidade para controlar reprodu��o
• <� Widget flutuante: Inicia como thumbnail e expande em fullscreen

=� Desenvolvimento

Requisitos

• Node.js 16+
• npm ou yarn

Scripts dispon�veis

# Modo desenvolvimento
npm run dev

# Build da biblioteca
npm run build

# Executar testes
npm run test

# Watch dos testes
npm run watch

# Cobertura de testes
npm run coverage

Build

O projeto gera dois formatos:

• ESM (viewr.es.js): Para imports modernos
• UMD (viewr.umd.js): Para compatibilidade universal

=� Estrutura

viewr/
�� src/
   �� lib/
      �� index.jsx      # Componente principal
      �� index.css      # Estilos
   �� App.jsx            # App de demonstra��o
   �� main.jsx           # Entry point do dev
   �� index.css          # Estilos globais
�� dist/                  # Build output
�� package.json
�� vite.config.js
�� README.md

<� Customiza��o

Os estilos podem ser sobrescritos atrav�s de CSS customizado. Classes principais:

• .viewr - Container principal
• .viewr.active - Estado expandido
• .v-feed - Container de v�deos
• .v-item - Item individual de v�deo
• .v-actions - Barra de a��es

=' Tecnologias

• React 18+
• Vite 5
• Intersection Observer API
• PropTypes para valida��o

=� Licen�a

MIT

=e Autor

USYSTEM DESENVOLVIMENTO AGIL DE SOFTWARES LTDA

= Issues

Reporte bugs ou sugira features atrav�s do reposit�rio do projeto.