open-index/open-npm huggingface dataset:
npm package: @oplayer/core
Description: Oh! Another HTML5 video player.
Author: shiyiya
Latest version: 1.2.38-beta.2

# OPlayer Core

[![npm](https://img.shields.io/npm/v/@oplayer/core?style=flat-square)](https://www.npmjs.com/package/@oplayer/core)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/core?style=flat-square&label=core)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/core?style=flat-square)](https://www.npmjs.com/package/@oplayer/core)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/core/badge)](https://www.jsdelivr.com/package/npm/@oplayer/core)

![](../../oplayer.png)

## Basic

```js
const player = OPlayer.make('#player', {
  source: {
    title: '君の名は',
    src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/君の名は.mp4',
    poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
  }
})
  .use([OUI()])
  .create()
```
npm package: @oplayer/danmaku
Description: Danmaku plugin for oplayer
Author: shiyiya
Latest version: 1.2.26-beta.0

# oplayer-plugin-danmaku

[![npm](https://img.shields.io/npm/v/@oplayer/danmaku?style=flat-square&color=ffa500&label=@oplayer/danmaku)](https://www.npmjs.com/package/@oplayer/danmaku)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/ui?style=flat-square&label=danmaku)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/danmaku?style=flat-square)](https://www.npmjs.com/package/@oplayer/danmaku)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/danmaku/badge)](https://www.jsdelivr.com/package/npm/@oplayer/danmaku)

![](https://github.com/shiyiya/oplayer/raw/main/packages/danmaku/danmaku.png)

## Install

```bash
npm i @oplayer/core @oplayer/danmaku
```

```html
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/danmaku@latest/dist/index.min.js"></script>

<div id="oplayer" />

<script>
  OPlayer.make('#oplayer', {
    source: {
      src: 'https://oplayer.vercel.app/君の名は.mp4',
      poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
    }
  })
    .use([new ODanmaku({ source: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/danmaku.xml' })])
    .create()
</script>
```

## Usage

```ts
export type Options = {
  source: string | Function | Comment[]
  /**
   * @default: 144
   * */
  speed?: number
  opacity?: number
  fontSize?: number
  /**
   * @default: 'dom'
   */
  engine: 'canvas' | 'dom'
  /**
   * @default true
   */
  enable?: boolean
  /**
   * @default false
   * 是否显示发送弹幕的输入框，仅 PC 生效
   */
  displaySender?: boolean
  /**
   * 使用发送输入框发送弹幕时出发，返回 false 进行拦截
   */
  onEmit?: (comment: Comment) => boolean | void
}

export interface Comment {
  text?: string
  /**
   * @default rtl
   */
  mode?: 'ltr' | 'rtl' | 'top' | 'bottom'
  /**
   * Specified in seconds. Not required in live mode.
   * @default media?.currentTime
   */
  time?: number
  style?: Partial<CSSStyleDeclaration> | CanvasRenderingContext2D
  /**
   * A custom render to draw comment.
   * When it exist, `text` and `style` will be ignored.
   */
  render?(): HTMLElement | HTMLCanvasElement
}
```

### 直接加载弹幕

```ts
const danmaku = new ODanmaku({
  /* 1. 从 url 拉去 xml 格式弹幕，需遵循 B站 格式 */
  source: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/danmaku.xml',
  /* 2. 解析成 json 的弹幕 */
  source: [
    {
      text: '第一秒出现弹弹幕',
      mode: 'rtl',
      time: 1
    },
    {
      text: '第二秒出现弹弹幕',
      mode: 'rtl',
      time: 2
    }
  ],
  /* 3. 自定义弹幕加载方式 */
  source: () => fetch('xxxxx')
})
```

### 实时弹幕（收&发）

```ts
const ws = new WebSocket('wss://xxxxxx')

// 接受实时弹幕
ws.onmessage = async function (msg) {
  danmaku.emit(msg)
}

// 发送弹幕
ws.send({ text: '我来了' })

// 完整代码示例
// https://github.com/shiyiya/JustLive-Web/blob/master/src/components/Player/Player.vue
```
npm package: @oplayer/dash
Description: Dash plugin for oplayer
Author: shiyiya
Latest version: 1.2.27-beta.2

# oplayer-plugin-dash

[![npm](https://img.shields.io/npm/v/@oplayer/dash?style=flat-square&label=@oplayer/dash)](https://www.npmjs.com/package/@oplayer/dash)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/dash?style=flat-square)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/dash?style=flat-square)](https://www.npmjs.com/package/@oplayer/dash)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/dash/badge)](https://www.jsdelivr.com/package/npm/@oplayer/dash)

[MPEG DASH](https://github.com/Dash-Industry-Forum/dash.js) plugin for oplayer

## Install

```bash
npm i @oplayer/core @oplayer/dash dashjs
```

```html
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/dash@latest/dist/index.min.js"></script>

<div id="oplayer" />

<script>
  var player = OPlayer.make('#oplayer', {
    source: {
      src: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
      poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
    }
  })
    .use([ODash({ library: 'https://cdn.dashjs.org/v4.7.4/dash.all.min.js' })])
    .create()
</script>
```

## DRM

```ts
// https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd
ODash({
  drm: {
    'com.widevine.alpha': {
      serverURL: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
      httpRequestHeaders: {
        'X-AxDRM-Message':
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.4lWwW46k-oWcah8oN18LPj5OLS5ZU-_AQv7fe0JhNjA'
      },
      priority: 0
    }
  }
})

// update drm
player.context.dash.options.drm = {
  // ...
}
```
npm package: @oplayer/hls
Description: Hls plugin for oplayer
Author: shiyiya
Latest version: 1.2.28-beta.1

# oplayer-plugin-hls

[![npm](https://img.shields.io/npm/v/@oplayer/hls?style=flat-square&label=@oplayer/hls)](https://www.npmjs.com/package/@oplayer/hls)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/hls?style=flat-square)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/hls?style=flat-square)](https://www.npmjs.com/package/@oplayer/hls)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/hls/badge)](https://www.jsdelivr.com/package/npm/@oplayer/hls)

[HLS](https://github.com/video-dev/hls.js) plugin for oplayer

## Install

```bash
npm i @oplayer/hls hls.js
```

```html
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.min.js"></script>

<div id="oplayer" />

<script>
  OPlayer.make('#oplayer', {
    source: {
      src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
    }
  })
    .use([OHls({ library: 'https://cdn.jsdelivr.net/npm/hls.js@0.14.17/dist/hls.min.js' })])
    .create()
</script>
```

## Handle default Quality/Audio/Subtitle

```js
OHls({
  forceHLS: true, // use hls.js not native
  defaultQuality(levels) {
    let id = -1 // -1 => 'auto'
    for (let i = 0; i < levels.length; i++) {
      if (levels[i].height <= 1080) id = i
    }

    return id
  },
  defaultAudio(tracks) {
    for (const { lang, id } of object) {
      if (lang == 'en' || lang.startsWith('en')) {
        return id
      }
    }

    return -1 // -1 => brower lang
  },
  defaultSubtitle(tracks) {
    for (const { lang, id } of object) {
      if (lang == 'en' || lang.startsWith('en')) {
        return id
      }
    }

    return -1 // -1 => brower lang
  }
})
```

## Handle Hls.js Error

```ts
OHls({
  errorHandler(player, data) {
    // skip bufferAppendError
    if (data.details == 'bufferAppendError') return

    player.emit('error', {
      ...data,
      message: data.type + ': ' + data.details
    })
  }
})
```

## DRM

```ts
OHls({
  forceHLS: true, // use hls.js not native
  config: {
    emeEnabled: true,
    drmSystems: {
      'com.widevine.alpha': {
        licenseUrl: 'https://widevine-proxy.appspot.com/proxy'
      }
    },
    licenseXhrSetup(xhr) {
      xhr.setRequestHeader('content-type', 'application/octet-stream')
      xhr.setRequestHeader('Authorization', 'Bearer token') // or other headers
    }
  }
})

// update
player.context.hls.options.config = {
  //...
}
```
npm package: @oplayer/mpegts
Description: mpegts.js plugin for oplayer
Author: shiyiya
Latest version: 1.2.26-beta.0

# oplayer-plugin-mpegts

[![npm](https://img.shields.io/npm/v/@oplayer/mpegts?style=flat-square&label=@oplayer/mpegts)](https://www.npmjs.com/package/@oplayer/mpegts)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/mpegts?style=flat-square)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/mpegts?style=flat-square)](https://www.npmjs.com/package/@oplayer/mpegts)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/mpegts/badge)](https://www.jsdelivr.com/package/npm/@oplayer/mpegts)

[FLV](https://github.com/xqq/mpegts.js) plugin for oplayer

## Install

```bash
npm i @oplayer/core @oplayer/mpegts mpegts.js
```

```html
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<!--  mpegts FIRST  -->
<script src="https://cdn.jsdelivr.net/npm/mpegts.js@latest/dist/mpegts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/mpegts@latest/dist/index.min.js"></script>

<div id="oplayer" />

<script>
  OPlayer.make('#oplayer', {
    source: {
      src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/weathering-with-you.flv',
      poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
    }
  })
    .use([OMpegts()])
    .create()
</script>
```

## Usage

```ts
export type Matcher = (video: HTMLVideoElement, source: Source) => boolean

// active inactive
export type Active = (
  instance: Mpegts.Player,
  library: typeof Mpegts
) => void | ((instance: Mpegts.Player, library: typeof Mpegts) => void)

export type MpegtsPluginOptions = {
  config?: Partial<Mpegts.Config>
  matcher?: Matcher
  active?: Active
}
```
npm package: @oplayer/plugins
Description: oplayer's plugin
Author: shiyiya
Latest version: 1.0.15-beta.4

## Pluings

```shell
npm i @oplayer/plugins
```

```js
import { Playlist, Chromecast, AirPlay, ad, vttThumbnails } from '@oplayer/plugins'
```

```html
<!-- All plugins -->
<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/index.min.js"></script>

<!-- Playlist -->
<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/playlist.min.js"></script>

<!-- VTT Thumbnails -->
<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/vttThumbnails.min.js"></script>

<!-- Chromecast -->
<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/chromecast.min.js"></script>

<!-- AirPlay -->
<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/airplay.min.js"></script>

<!-- AD -->
<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/ad.min.js"></script>
```

### Playlist

```js
Player.make('#oplayer')
  .use([
    new Playlist({
      initialIndex: 0, // default
      autoNext: true, // default
      autoHide: true, // default
      sources: [
        {
          title: '君の名は - MP4',
          src: 'https://oplayer.vercel.app/君の名は.mp4',
          poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png',
          duration: '01:32',
          thumbnails: {
            src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/thumbnails.jpg',
            number: 100
          },
          subtitles: [
            {
              name: 'Default',
              default: true,
              src: 'https://oplayer.vercel.app/君の名は.srt',
              offset: 2
            }
          ]
        },
        {
          title: 'Big Buck Bunny - HLS',
          src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
          duration: '10:34'
        },
        {
          title: 'DASH',
          src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
          duration: '10:34'
        },
        {
          title: 'FLV',
          src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/weathering-with-you.flv',
          duration: '02:02'
        }
      ]
    })
  ])
  .create()

player.context.playlist.next() // play next
player.context.playlist.previous() // play previous
player.context.playlist.showUI() // show list UI
player.context.playlist.hideUI() // hide list UI
player.context.playlist.changeSourceList([]) //change playlist sources
```

![](./playlist.png)

### VTT Thumbnails

![](./vtt.png)

```js
Player.make('#oplayer')
  .use([vttThumbnails({ src: 'your-file-path' })])
  .create()
```

### Chromecast

```js
Player.make('#oplayer').use([new Chromecast()]).create()
```

### AirPlay

```js
Player.make('#oplayer').use([new AirPlay()]).create()
```

### AD
npm package: @oplayer/react
Description: React wrapper for oplayer.
Author: shiyiya
Latest version: 1.2.11-beta.2

# oplayer-plugin-react

[![npm](https://img.shields.io/npm/v/@oplayer/react?style=flat-square&label=@oplayer/react)](https://www.npmjs.com/package/@oplayer/react)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/react?style=flat-square)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/react?style=flat-square)](https://www.npmjs.com/package/@oplayer/react)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/react/badge)](https://www.jsdelivr.com/package/npm/@oplayer/react)

React wrapper for oplayer. (NOT WORKING ON REACT STRICT MODE)

## Install

```bash
npm i @oplayer/core @oplayer/react
```

```tsx
import ReactPlayer from '@oplayer/react'

const plugins = [
  ui({
    pictureInPicture: true,
    slideToSeek: 'always',
    screenshot: true,
    keyboard: { global: true }
  }),
  hls()
]

function playPage() {
  const [source, setSource] = useState<any>()
  const player = useRef<Player>(null)

  useEffect(() => {
    setSource(
      // Be a Promise or raw
      fetch(`xxxx`).then((it) => {
        return it
      })
    )
  }, [lastEpisode])

  return (
    <>
      <h1>Now Playing "君の名は"</h1>

      <ReactPlayer
        plugins={plugins}
        ref={player}
        autoplay={true}
        source={source}
        duration={lastDuration}
        isLive={id == 'iptv'}
        onEvent={(e) => {}}
      />
    </>
  )
}
```
npm package: @oplayer/shaka
Description: shaka-player plugin for oplayer
Author: shiyiya
Latest version: 1.2.26-beta.6

# oplayer-plugin-shaka

[![npm](https://img.shields.io/npm/v/@oplayer/shaka?style=flat-square&label=@oplayer/shaka)](https://www.npmjs.com/package/@oplayer/shaka)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/shaka?style=flat-square)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/shaka?style=flat-square)](https://www.npmjs.com/package/@oplayer/shaka)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/shaka/badge)](https://www.jsdelivr.com/package/npm/@oplayer/shaka)

[shaka-player](https://github.com/shaka-project/shaka-player) plugin for oplayer

## Install

```bash
npm i @oplayer/shaka shaka-player
```

```html
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/shaka@latest/dist/index.min.js"></script>

<div id="oplayer" />

<script>
  OPlayer.make('#oplayer', {
    source: {
      src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
    }
  })
    .use([
      OShaka({
        library: 'https://cdn.jsdelivr.net/npm/shaka-player@4.14.1/dist/shaka-player.compiled.min.js',
        config: {
          drm: {
            clearKeys: {
              xxxxxxxxxx: 'xxxxxxxxxxx'
            }
          }
        }
      })
    ])
    .create()
</script>
```
npm package: @oplayer/torrent
Description: Torrent plugin for oplayer.
Author: shiyiya
Latest version: 1.2.25-beta.2

# oplayer-plugin-torrent

[![npm](https://img.shields.io/npm/v/@oplayer/torrent?style=flat-square&label=@oplayer/torrent)](https://www.npmjs.com/package/@oplayer/torrent)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/torrent?style=flat-square)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/torrent?style=flat-square)](https://www.npmjs.com/package/@oplayer/torrent)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/torrent/badge)](https://www.jsdelivr.com/package/npm/@oplayer/torrent)

[WebTorrent](https://github.com/webtorrent/webtorrent) plugin for oplayer

## Install

```bash
npm i @oplayer/core @oplayer/torrent webtorrent@0.98.18
```

```html
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<!--  webtorrent FIRST  -->
<script src="https://cdn.jsdelivr.net/npm/webtorrent@0.98.18/webtorrent.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/torrent@latest/dist/index.min.js"></script>

<div id="oplayer" />

<script>
  OPlayer.make('#oplayer', {
    source: {
      src: 'http://example.com/live/livestream.ts',
      poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
    }
  })
    .use([OTorrent()])
    .create()
</script>
```
npm package: @oplayer/ui
Description: ui plugin for oplayer
Author: shiyiya
Latest version: 1.3.4-beta.10

# OPlayer UI

[![npm](https://img.shields.io/npm/v/@oplayer/ui?style=flat-square&label=@oplayer/ui)](https://www.npmjs.com/package/@oplayer/ui)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@oplayer/ui?style=flat-square)
[![npm dm](https://img.shields.io/npm/dm/@oplayer/ui?style=flat-square)](https://www.npmjs.com/package/@oplayer/ui)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/ui/badge)](https://www.jsdelivr.com/package/npm/@oplayer/ui)

![oplayer-mobile](https://github.com/shiyiya/oplayer/raw/main/packages/ui/oplayer-ui-mobile.jpg)

## Install

```bash
npm i @oplayer/core @oplayer/ui
```

```html
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/ui@latest/dist/index.min.js"></script>
```

## Basic

```js
const player = Player.make('#player', {
  source: {
    title: '君の名は',
    src: 'https://oplayer.vercel.app/君の名は.mp4',
    poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
  }
})
  .use([OUI()])
  .create()
```
npm package: @opliko/vscode-js-profile-flame
Description: Flame graph visualizer for Heap and CPU profiles taken from the JavaScript debugger
Author: Connor Peet
Latest version: 1.0.32

# `vscode-js-profile-flame`

This package contains two pieces of functionality: a flame chart viewer for V8-style `.cpuprofile` files, and a realtime performance view for VS Code:

### Realtime Performance View

While running or debugging a JavaScript debug target (a launch type of `node`, `chrome`, `msedge`, `extensionHost`, or their `pwa-` prefixed versions), the realtime performance view is show in the Debug view:

![](/packages/vscode-js-profile-flame/resources/realtime-view.png)

For Node.js, CPU and heap usage is shown. For browsers, we additionally show DOM node count, restyles per second, and relayouts per second. Clocking on the labels on the bottom will expand a view that lets you show or hide different series.

You can click the "split" button in the view title to show each series on its own chart, and there's also a button to quickly take a profile of the running program.

You can further configure the realtime performance view with the following user settings:

- `debug.flameGraph.realtimePollInterval`: How often (in seconds) to refresh statistics from the runtime.
- `debug.flameGraph.realtimeViewDuration`: How much time (in seconds) should be kept in the graph.
- `debug.flameGraph.realtimeEasing`: Whether easing is enabled on the realtime graph.

### Flame Chart View

You can open a `.cpuprofile` or `.heapprofile` file (such as one taken by clicking the "profile" button in the realtime performance view), then click the 🔥 button in the upper right to open a flame chart view.

By default, this view shows chronological "snapshots" of your program's stack taken roughly each millisecond. You can zoom and explore the flamechart, and ctrl or cmd+click on stacks to jump to the stack location.

![](/packages/vscode-js-profile-flame/resources/flame-chrono.png)

The flame chart also supports a "left heavy" view, toggled by clicking the button in the upper-right corner of the chart.

This view groups call stacks and orders them by time, creating a visual representation of the "top down" table you might have used in other tools. This is especially useful if your profile has lots of thin call stacks (common with things like web servers) which are hard to get a sense of in the chronological view. Here's the left-heavy view of the same profile:

![](/packages/vscode-js-profile-flame/resources/flame-leftheavy.png)

The flame chart color is tweakable via the `charts-red` color token in your VS Code theme.

### Memory Graph View

You can open a `.heapsnapshot` file in VS Code and click on the "graph" icon beside an object in memory to view a chart of its retainers:

![](/packages/vscode-js-profile-flame/resources/retainers.png)
npm package: @opliko/vscode-js-profile-table
Description: Text visualizer for profiles taken from the JavaScript debugger
Author: Connor Peet
Latest version: 1.0.10

# `vscode-js-profile-table`

This is a custom editor that provides tablular information from for V8-style `.cpuprofile` files. Usage:

1. Install this extension,
2. Open a `.cpuprofile` file in VS Code,
3. If you already have another editor, such as the default table view, hit `F1` and then `Reopen With` this extension.

![Screenshot of the table](https://raw.githubusercontent.com/microsoft/vscode-js-profile-visualizer/master/table.png)
npm package: @oplog/express
Description: shared components used by OPLOG
Author: Team OPLOG
Latest version: 1.1.1

# OPLOG Design System Library

## Documentation

Check out [docs](http://doc.express.oplog.io/) and [storybook](http://storybook.express.oplog.io/). 

## Changelog

Detailed changes for each release are documented in the [release notes](http://doc.express.oplog.io/docs-changelog).

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Team OPLOG
npm package: @opmvpc/image-tool
Description: CLI to batch convert and crop images using sharp
Author: opmvpc
Latest version: 0.1.4

# Image Tool CLI

Batch converts and crops folders of images. Ships as a global CLI: `imgtool`.

## Install

```bash
npm install -g @opmvpc/image-tool
```

## Usage

```bash
imgtool <inputDir> [outputDir] [options]
```

Options:

- `--format <webp|png|jpeg|jpg|avif>` (default: `webp`)
- `--quality <1-100>` (default: `80`)
- `--max-width <number>`: resize to this width, keeping aspect
- `--max-height <number>`: resize to this height, keeping aspect
- `--center-crop <WIDTHxHEIGHT>`: crop from center to exact size
- `--overwrite`: allow overwriting destination files

If `outputDir` is omitted, files are written to `<inputDir>-out` with the chosen format extension.

### Examples

Convert a folder to WebP at quality 80:

```bash
imgtool ./photos ./photos-webp --format webp --quality 80
```

Resize to max width 1600px, keeping aspect:

```bash
imgtool ./raw ./processed --max-width 1600
```

Center-crop to 1200x800:

```bash
imgtool ./shots ./shots-cropped --center-crop 1200x800 --format jpeg --quality 90
```

## Development

```bash
npm install
npm run build
npm test
```

Run the CLI in dev mode:

```bash
npm run dev -- --help
```

## Release & Publish (npm, Trusted Publishing)

Flow tag-based + trusted publishing (pas de NPM_TOKEN) :

1. Choisis le bump puis pousse la branche et le tag :
   ```bash
   npm version patch   # ou minor / major
   git push origin main --follow-tags
   ```
2. Le tag `vX.Y.Z` déclenche la GitHub Action `release.yml` qui :
   - met npm à jour (>=11.5.1)
   - installe (`npm ci`)
   - teste (`npm test`)
   - build (`npm run build`)
   - publie sur npm via OIDC (`npm publish --access public`, sans token).

Install global côté utilisateurs:

```bash
npm install -g @opmvpc/image-tool
imgtool --help
```
npm package: @opn-ooo/eslint-config-opn
Description: > ESLint [Shareable Configs](https://eslint.org/docs/developer-guide/shareable-configs.html)
Latest version: 1.0.5

# eslint-config-opn [![NPM](https://img.shields.io/npm/v/@opn-ooo/eslint-config-opn.svg)](@opn-ooo/eslint-config-opn)

> ESLint [Shareable Configs](https://eslint.org/docs/developer-guide/shareable-configs.html)

## Installation
```bash
# NPM
npm install --save-dev eslint @opn-ooo/eslint-config-opn

# Yarn
yarn add --dev eslint @opn-ooo/eslint-config-opn
```

## Usage
Define [extends](https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files) in [configuration files](https://eslint.org/docs/user-guide/configuring/configuration-files)
```json
{
    "extends": "@opn-ooo/eslint-config-opn",
    "rules": {}
}
```
npm package: @opnay/react-classed
Description: >
Author: OPNay
Latest version: 0.0.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# classed

>

## Install

```bash
npm install --save @opnay/react-classed
npm install --registry https://npm.pkg.github.com/ --save @opnay/react-classed

yarn add @opnay/react-classed
yarn add --registry https://npm.pkg.github.com/ @opnay/react-classed
```

## Usage

```tsx
import * as React from 'react';

import { ClassedRef } from '@opnay/react-classed';

// this select query as `span.accent`
const Accent = ClassedRef('Accent', 'accent', 'span');

class Example extends React.Component {
  render() {
    return (
      <p>
        This is <Accent>accent</Accent>
      </p>
    );
  }
}
```

## License

Apache License 2.0 © [OPNay](https://github.com/OPNay)