vlop (^_^)

react player + terminal cli for streaming • v1.0.1

what it is

react component - embed player in your app (｡◕‿◕｡)
chat mode cli - search & watch from terminal(✧ω✧)
tmdb integration - real search results with content cards

install

npm install vlop

react quick start

import { VlopPlayer } from 'vlop';

// movie
<VlopPlayer mediaId="tmdb-movie-550" />

// tv show
<VlopPlayer 
  mediaId="tmdb-tv-1399"
  seasonId="3624"
  episodeId="62085"
/>

cli quick start

vlop              # launches vlop (^_^)

commands in chat:

s <query>         # search with tmdb cards
w <id>            # watch content
a <id>            # about page
t                 # trending
config <key>      # set tmdb api key
h                 # help
clear             # clear screen
/exit             # exit

example:

vlop ▸ s squid game
  ✓ Found 5 results
  [cards with ratings]

vlop ▸ w 93405
  ✓ Ready to watch (｡◕‿◕｡)

vlop ▸ /exit
  Goodbye! (^_^)/

search for content (direct)

vlop search "breaking bad"

opens vlop.fun with search results. no cap, it's instant!

watch something (direct)

vlop watch tmdb-movie-550

opens vlop.fun/watch/550 and starts playing. popcorn not included

check what's trending

vlop trending

see what everyone's watching rn. stay in the loop!

browse top content

vlop top

the cream of the crop, chef's kiss content

interactive mode (classic menu)

vlop interactive
# or just
vlop i

more commands

vlop config         # configure settings 
## props

| prop | type | required | description |
|------|------|----------|-------------|
| mediaId | string | ✓ | "tmdb-movie-550" |
| seasonId | string | - | tv season |
| episodeId | string | - | tv episode |
| startAt | string | - | timestamp "5:30" |
| width | string/number | - | default "100%" |
| height | string/number | - | default "100%" |

## examples

**custom size:**
```tsx
<VlopPlayer mediaId="tmdb-movie-550" width="800px" height="450px" />

start at time:

<VlopPlayer mediaId="tmdb-movie-550" startAt="5:30" />

responsive:

<div style={{ width: '100%', aspectRatio: '16/9' }}>
  <VlopPlayer mediaId="tmdb-movie-550" />
</div>

finding ids

movies: tmdb-movie-{id} (fight club = tmdb-movie-550)
tv shows: tmdb-tv-{id} (got = tmdb-tv-1399)

use cli to search: vlop s "fight club"

typescript

import { VlopPlayer, VlopPlayerProps } from 'vlop';

frameworks

next.js:

import dynamic from 'next/dynamic';
const VlopPlayer = dynamic(() => import('vlop').then(m => m.VlopPlayer), { ssr: false });

remix:

import { VlopPlayer } from 'vlop';
export default function Page() {
  return <VlopPlayer mediaId="tmdb-movie-550" />;
}

how it works

iframe wrapper to iframe.vlop.fun - we handle sources, scraping, playback (｡◕‿◕｡)

support

• website: vlop.fun
• cli: vlop --help

CDN / Plain HTML usage

If you want to use the player from a static HTML page (no React), a small UMD bundle is provided in dist/cdn.

Files:

• dist/cdn/vlop-player.cdn.js — UMD script exposing global VlopPlayer with embed(container, options).
• dist/cdn/vlop-player.css — minimal styles for the wrapper.
• dist/cdn/example.html — simple example showing how to embed.

Usage example (local):

1. Open dist/cdn/example.html in a browser (or serve the folder).
2. Call VlopPlayer.embed(document.getElementById('player-mount'), { mediaId: 'tmdb-movie-550' }).

When publishing to a real CDN, upload the dist/cdn/* files and point script href to the hosted vlop-player.cdn.js.

made with (｡◕‿◕｡) by vlop team • v1.0.1