https://github.com/otiai10/fresh-youtube

View component and controller of YouTube Player API, for fresh framework.
https://github.com/otiai10/fresh-youtube

deno fresh preact react typescript youtube youtube-player

Last synced: 3 months ago
JSON representation

View component and controller of YouTube Player API, for fresh framework.

• Host: GitHub
• URL: https://github.com/otiai10/fresh-youtube
• Owner: otiai10
• License: mit
• Created: 2022-08-20T07:07:32.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-24T15:48:15.000Z (over 2 years ago)
• Last Synced: 2024-10-05T06:16:05.376Z (4 months ago)
• Topics: deno, fresh, preact, react, typescript, youtube, youtube-player
• Language: TypeScript
• Homepage: https://deno.land/x/fresh_youtube
• Size: 20.5 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fresh-youtube

[![Deno CI](https://github.com/otiai10/fresh-youtube/actions/workflows/deno-ci.yml/badge.svg)](https://github.com/otiai10/fresh-youtube/actions/workflows/deno-ci.yml)

[![Deploy Example](https://github.com/otiai10/fresh-youtube/actions/workflows/deploy-example.yml/badge.svg)](https://fresh-youtube.deno.dev/)

View component and controller of

[YouTube Player API](https://developers.google.com/youtube/iframe_api_reference),

for [fresh framework](https://github.com/denoland/fresh).

# Try it now!

```

git clone [email protected]:otiai10/fresh-youtube.git

cd ./fresh-youtube

cd ./example

deno task start

```



# Example

See

[./example/islands/ExampleIsland.ts](https://github.com/otiai10/fresh-youtube/blob/main/example/islands/ExampleIsland.tsx).

```tsx

/** @jsx h */

import { h } from "preact";

import { useMemo, useState } from "preact/hooks";

import {

  PlayerState,

  YouTubePlayerDelegate,

  YouTubePlayerView,

} from "https://deno.land/x/[email protected]/mod.ts";

export default function ExampleIsland() {

  // This is what we already know: useState to see dynamic value.

  const [playerState, setPlayerState] = useState(

    PlayerState.UNSTARTED,

  );

  // Then, let's create a delegated object to access what happens in YT player.

  const delegate = useMemo(() =>

    new YouTubePlayerDelegate({

      stateUpdater: setPlayerState,

      initialVideoID: "MGt25mv4-2Q",

    }), []); // Please use `useMemo` to avoid repeated initialization.

  // Finally, you can render the View!

  return (

    


      {/* You don't have to worry about YT or any other mess! */}

      


      {/* Yes, you can access what's happening now by the `state`! */}

      


        {playerState}: {PlayerState[playerState]}

      


      {/* Wanna control? Sure, everything is delegated to your object! */}

       delegate.play()}

        disabled={playerState == PlayerState.PLAYING}

      >

        PLAY

      

       delegate.pause()}

        disabled={playerState == PlayerState.PAUSED}

      >

        PAUSE

      

    

  );

}

```


# Acknowledgment

- https://github.com/itok01/fresh-youtube-player

- https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/youtube

- https://developers.google.com/youtube/iframe_api_reference

- https://github.com/denoland/fresh

- https://github.com/preactjs/preact