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

Overview

fresh-youtube

Deno CI Deploy Example

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

Try it now!

git clone [email protected]:otiai10/fresh-youtube.git
cd ./fresh-youtube
cd ./example
deno task start

example

Example

See ./example/islands/ExampleIsland.ts.

/** @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>(
    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 (
    <div>
      {/* You don't have to worry about YT or any other mess! */}
      <YouTubePlayerView
        style={{ width: "100%", height: "60vh" }}
        delegate={delegate}
      />

      {/* Yes, you can access what's happening now by the `state`! */}
      <h2 style={{ fontFamily: "monaco" }}>
        {playerState}: {PlayerState[playerState]}
      </h2>

      {/* Wanna control? Sure, everything is delegated to your object! */}
      <button
        onClick={() => delegate.play()}
        disabled={playerState == PlayerState.PLAYING}
      >
        PLAY
      </button>
      <button
        onClick={() => delegate.pause()}
        disabled={playerState == PlayerState.PAUSED}
      >
        PAUSE
      </button>
    </div>
  );
}

Acknowledgment

You might also like...

A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

Strapi Preview Button A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view. Get Started Features I

Dec 30, 2022

All in one YouTube App with downloader , background player and many more features.

All in one YouTube App with downloader , background player and many more features.

YT PRO Download YT PRO Features Video Downloader Ads Blocker Picture in Picture Mode Shows Number of Dislikes Background Audio Player Auto Updation of

Dec 31, 2022

A convenient tool to view the youtube superchat messages in the streaming.

A convenient tool to view the youtube superchat messages in the streaming.

Youtube 超級留言訊息實況小工具 一個可以用於實況中顯示Youtube 超級留言訊息的小工具。 下載頁面 可至Release頁面根據自身的作業系統下載最新版本。 檔名 作業系統 youtube-superchat-message-tool-win32-x64-{version}.zip Win

Apr 14, 2022

Easy server-side and client-side validation for FormData, URLSearchParams and JSON data in your Fresh app 🍋

Fresh Validation 🍋     Easily validate FormData, URLSearchParams and JSON data in your Fresh app server-side or client-side! Validation Fresh Validat

Dec 23, 2022

A demonstration app for Fresh that shows how to use SSR, the islands functionality, APIs and more

Fresh Pokemon Demo Code This is a demonstration app for Fresh that shows how to use SSR, the islands functionality, APIs and more. You do need to conn

Dec 18, 2022

A fresh look for the Hackage. Follow us: https://twitter.com/HackageUI

A fresh look for the Hackage. Follow us: https://twitter.com/HackageUI

Hackage UI Fresh look for the https://hackage.haskell.org/. Work in progress. Search Search on Hoogle. Search on Hackage. Full-text search integration

Dec 28, 2022

A fresh (deno) app

A fresh (deno) app

Welcome to fresh-deno-app 👋 A fresh (deno) app 🏠 Homepage ✨ Demo Prerequisites Deno version 1.22.3 or higher installed. - A modern runtime for JavaS

Oct 17, 2022

Fresh SQLite example on Fly.io.

fresh-sqlite-example Fresh example with SQLite and kysely query builder. See running example on Fly.io. Prerequisites Deno v1.23 or higher SQLite Opti

Nov 25, 2022

Dead simple cookie-based session for Deno Fresh.

Fresh Session 🍋 Dead simple cookie-based session for Deno Fresh. Get started Fresh Session comes with a simple middleware to add at the root of your

Jan 5, 2023
Comments
Owner
Hiromu OCHIAI
🙋 ❤️ 🍣
Hiromu OCHIAI
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A minimal blog template using the Fresh framework for Deno.

Fresh Blog This is a minimal blog template using the awesome framework Fresh from Deno. Usage Start the project: deno task start This will watch the

Little Sticks 21 Dec 16, 2022
Using a Leap Motion Controller from Ultraleap for finger tracking in VRChat without mods

Leap Motion Controller finger tracking for VRChat OSC Using a Leap Motion Controller from Ultraleap for finger tracking in VRChat without mods. Descri

adeleine 28 Dec 31, 2022
A first person character controller for the Three.js graphics library

charactercontroller A first person character controller for the Three.js graphics library Demo Installation npm install charactercontroller Usage impo

Malted 10 Aug 17, 2022
Essential Audio Player JS is a simple, clean and minimal JavaScript / HTML5 / CSS web audio player.

Essential Audio Player JS is a simple, clean and minimal JavaScript / HTML5 / CSS web audio player. No unnecessary controls, just a button and a track

null 32 Dec 14, 2022
🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

Music-player-app see the project here. 1. Key Features 2. Technologies I've used Key Features: ?? Fully responsive clean UI. ?? Entirely mobile respo

suraj ✨ 3 Nov 16, 2022
StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet Explorer extension This VSCode extension quickly shows relevant aspects of StarkNet contracts: Storage variables of the current contract, and

Crytic 6 Nov 4, 2022