LIT PLAYER YOUTUBE

leonardo leal — Sun, 01 Jun 2025 22:53:11 +0000

Lit-Player-Youtube

LitPlayerYoutube é um player de vídeo baseado no YouTube, criado com Lit, que utiliza a API oficial do YouTube para controlar a reprodução.

Leve, customizável e fácil de usar, pode ser usado como um Web Component puro ou integrado via React.

Índice

Requisitos
Instalação
Uso
Importação
Usando com Lit
Usando com React
Controlando Dimensões
Exemplo
Contribuição
Licença

Requisitos

Node.js >= 14.x
Navegador moderno com suporte a Web Components

Instalação

npm install lit-player-youtube

Uso

Para usar o componente, importe-o e coloque a tag no seu projeto. Não é necessário instanciar classes ou chamar métodos diretamente.

Importação

LIT

import { LitPlayerYoutube } from "lit-player-youtube";

REACT

import { LitPlayerYoutubeReact } from "lit-player-youtube";

Usando com Lit

Exemplo controlando largura e altura:

<div style="width: 600px; height: 350px;">
  <lit-youtube-player video="https://www.youtube.com/watch?v=tPBbeszlIXw"></lit-youtube-player>
</div>

Usando com React

Exemplo controlando largura e altura:

import React from "react";
import { LitPlayerYoutubeReact } from "lit-player-youtube";

function App() {
  return (
    <div style={{ width: "600px", height: "350px" }}>
      <LitPlayerYoutubeReact video="https://www.youtube.com/watch?v=tPBbeszlIXw" />
    </div>
  );
}

export default App;

Controlando Dimensões

Você pode controlar o tamanho do player envolvendo o componente em um container com dimensões específicas. O componente se adapta para usar 100% da largura e altura do container.

O componente também é responsivo.

Exemplo

Contribuição

Contribuições são muito bem-vindas! Para contribuir, siga estes passos:

Faça um fork deste repositório.
Crie uma branch para sua feature (git checkout -b feature/nova-feature).
Faça commit das suas alterações (git commit -m 'Adiciona nova feature').
Faça push para a branch (git push origin feature/nova-feature).
Abra um Pull Request.

NPM
https://www.npmjs.com/package/lit-player-youtube

GITHUB
https://github.com/LeonardoLAraujo/lit-player-youtube

Licença

MIT © Leonardo Leal Araujo

library ECV-COMPONENT

leonardo leal — Thu, 29 May 2025 13:31:47 +0000

ECV COMPONENT

What it is:

It is a set of Web Componentes created using the Lit Element library, aiming to reuse, speed up, and standardize project development for the sector.

Case Study

For about a month, several studies and tests were carried out to find a way to streamline the development process for creating layouts. Various templates and web layout types were analyzed, and some were selected to be reconstructed using the ECV Component structure.

Why use ECV Component?

It became evident that with every new project created, everything had to be rebuilt, including recreating some components that had already been developed in past projects. To solve this problem, the ECV Component library was developed. The name originated from the abbreviated letters

(E C V) which stand for Visual Componentization Elements — A name that highlights the creation of reusable visual components.

Installation

npm install ecv-component

Import

//importing the entire library
import 'ecv-component' 
// Or import a specific type
import type {BoxDecorationStyle} from 'ecv-component';

Using ECV Component

Basics of Layout Construction

You can create layouts using ECV Component, simply by adding the components to your project. However, it is recommended to use three specific components for this purpose:

ECV Row - Layout with horizontal positioning.
ECV Column - Layout with vertical positioning.
ECV Grid - Grid layout.

Layout focusing on horizontal positioning

To create a layout with horizontal positioning, use the ECV Row component. See below the same scenario using just HTML structure and another using the ECV Component structure.

Example using HTML

    <style>
      /*CSS*/
      .container{
        display: flex;
      }

    </style>
    <!-- HTML -->
    <div class="container">
        <p>A</p>
        <p>B</p>
        <p>C</p>
    </div>

Example using ECV Component

    /*other code*/
    ...

    render(): TemplateResult {

        return html`
            <ecv-flex-row>
                <ecv-text>A</ecv-text>
                <ecv-text>B</ecv-text>
                <ecv-text>C</ecv-text>
            </ecv-flex-row>
        `;
    }

Documentation

The complete documentation, including usage examples, installation instructions, and detailed explanations of each component of the ECV Component library, is available on our official GitHub repository.

Access it here:

https://github.com/LeonardoLAraujo/ecv-component

Documentation Website

https://leonardolaraujo.github.io/ecv-component/

There you will find:

Step-by-step installation guide

Practical usage examples

Detailed explanation of each component

How to contribute to the project

Common troubleshooting

We highly recommend consulting the GitHub documentation to take full advantage of all the library's features.

I recorded building a small layout using ecv components

https://www.youtube.com/watch?v=tPBbeszlIXw

ECV Component — Simplifying layout creation with web components.

DEV Community: leonardo leal