open-index/open-npm huggingface dataset:
npm package: @loickit-v/player
Description: loickit player components for vue
Author: licheung228
Latest version: 0.0.18

# @loickit-v/player

## Components

### LPlayer

player component for vue

#### Props

- src

  \<string> | undefined

  the video source

- active

  \<boolean>

  default: `false`

  video active, when it changed, `video.paused` will changed

- muted

  \<boolean>

  video muted

  default: `true`

  we provide a plugin `usePlayer` to control global muted

- poster

  \<string>

  video poster

- loop

  \<boolean>

  default: `true`

  video loop

#### Expose

- switchStatus

  switch `video.paused`

- state _readonly_

  video state

  - isPaused
  - isLoading
  - duration
  - currentTime

#### Usage

```vue
<script setup lang="ts">
defineOptions({ name: 'App' });
import { ref } from 'vue';
import { LPlayer } from '@loickit-v/player';

const muted = ref(true);
</script>

<template>
  <LPlayer active :muted="muted" src="" />
</template>

<style></style>
```

#### CSS Variable

```css
/* 进度条高度 */
--loickit-player-progress-height: 10px;
/* 进度条圆角 */
--loickit-player-progress-radius: 5px;
/* 进度条按钮大小 */
--loickit-player-progress-btn-size: 20px;
/* 进度条背景色 */
--loickit-player-progress-bar-color: rgba(255, 255, 255, 0.5);
/* 进度条颜色 (进度条的值) */
--loickit-player-progress-color: #fff;
/* 进度条拖拽区域大小 */
--loickit-player-progress-drag-area: 25px;
/* 进度条bottom */
--loickit-player-progress-bottom: 80px;
/* 时间字体大小 */
--loickit-player-time-size: 16px;
/* 时间字体颜色 */
--loickit-player-time-color: #ccc;
/* 居中的图标(loading, pause)大小 */
--loickit-player-icon-size: auto;
```

## Hooks

### usePlayer

if u have more video player and want to unifield control their muted or some other status(wait...), use it

**Usage**

```ts
// entry
import lplayer from '@loickit-v/player';

const app = createApp(App);
app.use(lplayer).mount('#app');
```

```vue
<script>
import { usePlayer } from '@loickit-v/player';

const p = usePlayer();
</script>
<template>
  <button @click="p.toggleMuted">control all video</button>
</template>
```

```vue
<script>
import { usePlayer, LPlayer } from '@loickit-v/player';
const list = reacitve([]);
const p = usePlayer();
</script>
<template>
  <LPlayer v-for="i in list" :key="i.id" active :muted="p.muted" />
</template>
```
npm package: @loickit/cli
Description: loickit build tool
Author: licheung228
Latest version: 1.0.3

# publish

- `-t` `--target` 包的尾名
- `-v` `--version` 包的版本, 如果不传则自动叠加

# gen

## gen:component

- `-n` `--name` 组件名

会在当前地址路径下的 `src/components` 下生成组件.
模板文件位于 `templates/components` 下.

## gen:project

- `-n` `--name` 项目名

会在 `/packages` 下生成项目目录.
模板文件位于 `templates/project` 下.

# build

## build:vue

会打包当前目录下的组件, 使用 vite lib 模式

## build:lib

会打包当前目录下的组件, 使用 unbuild

## build:all

自动执行所有 `packages` 下的 `pnpm run build`

# remove

## remove:node_modules

自动清除所有 monorepo packages 下的 `node_modules`
npm package: @loicmahieu/gatsby-plugin-sentry
Description: Gatsby plugin to add Sentry error tracking to your site.
Author: Loic Mahieu
Latest version: 1.6.0

# gatsby-plugin-sentry

Gatsby plugin to add Sentry error tracking to your site.

## Install

`npm install --save @loicmahieu/gatsby-plugin-sentry`

## How to use

```javascript
// In your gatsby-config.js
plugins: [
  {
    resolve: "@loicmahieu/gatsby-plugin-sentry",
    options: {
      dsn: "YOUR_SENTRY_DSN_URL",
      // Any sentry client settings, see https://docs.sentry.io/clients/node/config/#optional-settings
    }
  }
];
```