ToCode

playerRef.current = YouTubePlayer(playerDivRef.current);
      playerRef.current.loadVideoById(videoId);  
    }
  }, [])

  const changeVideoId = (e) => {
    const videoId = e.target.value;
    setVideoId(videoId);
    
    const player = playerRef.current;
    if (player) {
      player.loadVideoById(videoId);
    }
  }

  return (
    <div>
      <div>
        <button onClick={() => playerRef.current.playVideo()}>Play</button>
        <button onClick={() => playerRef.current.pauseVideo()}>Pasue</button>
        <div>
          <input type="text" value={videoId} onChange={changeVideoId} />
        </div>
        <div ref={playerDivRef}></div>
      </div>
    </div>
  )
}

function Toggle() {
  const [hidden, setHidden] = useState(false);
  return (
    <div>
      <input type="checkbox" checked={hidden} onChange={() => setHidden(v => !v)} /> Hide
      {hidden ? <></> : <YoutubePlayerComponent />}
    </div>
  )
}
export default Toggle

playerRef.current.loadVideoById(videoId);
    }
  }, [])

import { useEffect, useRef, useState } from 'react'
import YouTubePlayer from 'youtube-player'

const YoutubePlayerComponent = () => {
  const [videoId, setVideoId] = useState('efGw88Wlncw');
  const [hidden, setHidden] = useState(false);
  const playerDivRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (!playerRef.current) {
      playerRef.current = YouTubePlayer(playerDivRef.current);
      playerRef.current.loadVideoById(videoId);  
    }
  }, [])

  const changeVideoId = (e) => {
    const videoId = e.target.value;
    setVideoId(videoId);
    
    const player = playerRef.current;
    if (player) {
      player.loadVideoById(videoId);
    }
  }


  return (
    <div>
      <div>
        <input type="checkbox" checked={hidden} onChange={() => setHidden(v => !v)} /> Hide
        <button onClick={() => playerRef.current.playVideo()}>Play</button>
        <button onClick={() => playerRef.current.pauseVideo()}>Pasue</button>
        <div>
          <input type="text" value={videoId} onChange={changeVideoId} />
        </div>
        {hidden ? <></> : <div ref={playerDivRef}></div>}        
      </div>
    </div>
  )
}
export default YoutubePlayerComponent

react-dom.development.js:12056 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:8467:26)
    at commitDeletionEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17506:21)
    at commitDeletionEffects (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17473:13)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17670:17)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17733:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17733:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17695:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=782b4cde:17681:15)

import { useEffect, useRef, useState } from 'react'
import YouTubePlayer from 'youtube-player'

const YoutubePlayerComponent = () => {
  const [videoId, setVideoId] = useState('efGw88Wlncw');
  const playerDivRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (!playerRef.current) {

let player;

player = YouTubePlayer('video-player');

// 'loadVideoById' is queued until the player is ready to receive API calls.
player.loadVideoById('M7lc1UVf-VE');

// 'playVideo' is queue until the player is ready to received API calls and after 'loadVideoById' has been called.
player.playVideo();

import { useEffect, useRef, useState } from 'react'
import YouTubePlayer from 'youtube-player'

const YoutubePlayerComponent = () => {
  const [videoId, setVideoId] = useState('efGw88Wlncw');
  const playerDivRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    playerRef.current = YouTubePlayer(playerDivRef.current);
    playerRef.current.loadVideoById(videoId);
  }, [])

  const changeVideoId = (e) => {
    const videoId = e.target.value;
    setVideoId(videoId);
    
    const player = playerRef.current;
    if (player) {
      player.loadVideoById(videoId);
    }
  }


  return (
    <div>
      <div>
        <button onClick={() => playerRef.current.playVideo()}>Play</button>
        <button onClick={() => playerRef.current.pauseVideo()}>Pasue</button>
        <div>
          <input type="text" value={videoId} onChange={changeVideoId} />
        </div>
        <div ref={playerDivRef}></div>
      </div>
    </div>
  )
}
export default YoutubePlayerComponent

  useEffect(() => {
    playerRef.current = YouTubePlayer(playerDivRef.current);
    playerRef.current.loadVideoById(videoId);
    return () => {
      playerRef.current.destroy();
    }
  }, [])

  useEffect(() => {
    if (!playerRef.current) {
      playerRef.current = YouTubePlayer(playerDivRef.current);

object futures {
  given ExecutionContext = ExecutionContext.global

  private def printUrlContent(url: String): Unit =
    Using(Source.fromURL(url)) { reader =>
      reader.getLines().mkString("\n")
    }
    println(s"Done: ${url}")


  @main
  def test(): Unit =
    val s1 = System.nanoTime()
    1.to(50)
      .map {i => s"https://dummyjson.com/products/${i}" }
      .map { url => Future { printUrlContent(url)} }
      .foreach { f => Await.result(f, Duration.Inf) }

    val s2 = System.nanoTime()
    println(s"Took ${s2 - s1} ns")

}

given ExecutionContext = ExecutionContext.fromExecutorService(Executors.newVirtualThreadPerTaskExecutor())

object futures {
  given ExecutionContext = ExecutionContext.fromExecutorService(Executors.newVirtualThreadPerTaskExecutor())
//  given ExecutionContext = ExecutionContext.global

  private def printUrlContent(url: String): Unit =
    Using(Source.fromURL(url)) { reader =>
      reader.getLines().mkString("\n")
    }
    println(s"Done: ${url}")


  @main
  def test(): Unit =
    val s1 = System.nanoTime()
    1.to(50)
      .map {i => s"https://dummyjson.com/products/${i}" }
      .map { url => Future { printUrlContent(url)} }
      .foreach { f => Await.result(f, Duration.Inf) }

    val s2 = System.nanoTime()
    println(s"Took ${s2 - s1} ns")

}

const newItems = oldItems.map((item, index) => 
    index === 1 ? 99 : item);

const newItems = oldItems.with(1, 99);

[].with(99, 0)

Array(10).forEach(() => console.log('1'))

Array(10).with(0, 0).forEach(() => console.log('1'))

[1, 2, 3, 4, 5].with(-1, 10)

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

/Users/ynonp/a/b/c/d/helloworld

> helloworld@0.0.0 build
> tsc && vite build

vite v5.1.3 building for production...
transforming (1) index.htmlnode:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/ynonp/a/b/c/d/helloworld): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- /Users/ynonp/postcss.config.js

(@/Users/ynonp/postcss.config.js)
Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- /Users/ynonp/postcss.config.js

(@/Users/ynonp/postcss.config.js)
    at load (file:///Users/ynonp/a/b/c/d/helloworld/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:28883:11)
    at file:///Users/ynonp/a/b/c/d/helloworld/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:28908:16
    at Array.map (<anonymous>)
    at plugins (file:///Users/ynonp/a/b/c/d/helloworld/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:28907:8)
    at processResult (file:///Users/ynonp/a/b/c/d/helloworld/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:28977:14)
    at file:///Users/ynonp/a/b/c/d/helloworld/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:29107:14]

Node.js v21.5.0

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss: {},
  },
})

.
├── EmptyState
│   ├── EmptyState.tsx
│   └── index.ts
├── ErrorState
│   ├── ErrorState.tsx
│   ├── ErrorState.types.ts
│   └── index.ts
├── RecentArticles
│   ├── RecentArticles.tsx
│   ├── RecentArticles.types.ts
│   └── index.ts
├── RecentArticlesCard
│   ├── RecentArticleCard.tsx
│   ├── RecentArticleCard.types.ts
│   └── index.ts
├── RecentArticlesContent
│   ├── RecentArticlesContent.tsx
│   ├── RecentArticlesContent.types.ts
│   └── index.ts
└── index.ts

export * from './EmptyState';
export * from './ErrorState';
export * from './RecentArticles';
export * from './RecentArticlesCard';
export * from './RecentArticlesContent';

import { EmptyState, ErrorState, RecentArticles } from '@/components';

import { EmptyState, ErrorState, RecentArticles } from '@/components';

https://<user>.github.io/<repo>

$ git switch -c gh-pages

$ npm create vite@latest gh-pages

$ git add .
$ git commit -m 'created gh page'
$ git push --set-upstream origin gh-pages

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/blog-to-telegram/',
  plugins: [react()],
})

* Simple workflow for deploying static content to GitHub Pages *
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['gh-pages']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

* Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages *
permissions:
  contents: read
  pages: write
  id-token: write

* Allow one concurrent deployment *
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
          cache-dependency-path: '**/package-lock.json'
      - name: Install dependencies
        working-directory: ./gh-pages
        run: npm install
      - name: Build
        working-directory: ./gh-pages
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload dist repository
          path: './gh-pages/dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

$ git add .
$ git commit -m 'add workflow'
$ git push