Component

The Component API provides programmatic control of in-page components.

Try it online

playpauseseek(30)

createSelectorQuery → boundingClientRect

Selector results will appear below

Component API demo

Video context and selector query; operations log to the bottom-right, query results below

Vue

<script setup>
import { onMounted, ref } from 'vue'
import woo from 'mini-sdk'

const rect = ref(null)
let videoCtx

onMounted(() => {
  videoCtx = woo.createVideoContext('myVideo')

  const query = woo.createSelectorQuery()
  query.select('#box').boundingClientRect((res) => {
    rect.value = res
  })
  query.exec()
})
</script>

<template>
  <video id="myVideo" src="/demo.mp4" />
  <button @click="videoCtx.play()">播放</button>
  <button @click="videoCtx.pause()">暂停</button>
  <pre v-if="rect">{{ rect }}</pre>
</template>

React

import { useEffect, useRef, useState } from 'react'
import woo from 'mini-sdk'

function ComponentDemo() {
  const videoCtx = useRef(null)
  const [rect, setRect] = useState(null)

  useEffect(() => {
    videoCtx.current = woo.createVideoContext('myVideo')

    const query = woo.createSelectorQuery()
    query.select('#box').boundingClientRect((res) => {
      setRect(res)
    })
    query.exec()
  }, [])

  return (
    <>
      <video id="myVideo" src="/demo.mp4" />
      <button onClick={() => videoCtx.current?.play()}>播放</button>
      <button onClick={() => videoCtx.current?.pause()}>暂停</button>
      {rect && <pre>{JSON.stringify(rect, null, 2)}</pre>}
    </>
  )
}

Import

import woo from 'mini-sdk'
// 或
import { createVideoContext, createInputContext, createSelectorQuery } from 'mini-sdk'

createVideoContext

Create a video context to control the <video> element on the page.

const videoCtx = woo.createVideoContext(videoId: string)

VideoContext methods

videoCtx.play()           // 播放
videoCtx.pause()          // 暂停
videoCtx.stop()           // 停止
videoCtx.seek(position)   // 跳转到指定位置（秒）
videoCtx.requestFullScreen()  // 全屏
videoCtx.exitFullScreen()     // 退出全屏

Example:

const videoCtx = woo.createVideoContext('myVideo')

// 播放
videoCtx.play()

// 跳转到第 30 秒
videoCtx.seek(30)

// 全屏播放
videoCtx.requestFullScreen()

createInputContext

Create an input context to control the <input> element on the page.

const inputCtx = woo.createInputContext(inputId: string)

InputContext methods

inputCtx.focus()   // 获取焦点
inputCtx.blur()    // 失去焦点

createSelectorQuery

Create a selector query object to read node information.

const query = woo.createSelectorQuery()

SelectorQuery API

// 选择单个节点
query.select('#myElement')

// 选择所有匹配节点
query.selectAll('.item')

// 获取节点信息
const nodes = await query.select('#myElement').boundingClientRect()

// 获取滚动信息
const scroll = await query.select('#scrollView').scrollOffset()

NodeInfo shape

interface NodeInfo {
  id: string
  dataset: Record<string, unknown>
  left: number
  right: number
  top: number
  bottom: number
  width: number
  height: number
}

Full example:

Vue

<script setup>
import { onMounted, ref } from 'vue'
import woo from 'mini-sdk'

const nodeInfo = ref(null)

onMounted(async () => {
  const query = woo.createSelectorQuery()
  nodeInfo.value = await query.select('#banner').boundingClientRect()
})
</script>

<template>
  <div v-if="nodeInfo">
    <p>元素尺寸：{{ nodeInfo.width }} x {{ nodeInfo.height }}</p>
    <p>元素位置：({{ nodeInfo.left }}, {{ nodeInfo.top }})</p>
  </div>
</template>

React

import { useState, useEffect } from 'react'
import woo from 'mini-sdk'

function BannerInfo() {
  const [nodeInfo, setNodeInfo] = useState(null)

  useEffect(() => {
    ;(async () => {
      const query = woo.createSelectorQuery()
      const info = await query.select('#banner').boundingClientRect()
      setNodeInfo(info)
    })()
  }, [])

  if (!nodeInfo) return null
  return (
    <div>
      <p>元素尺寸：{nodeInfo.width} x {nodeInfo.height}</p>
      <p>元素位置：({nodeInfo.left}, {nodeInfo.top})</p>
    </div>
  )
}

Quick reference

Method	Description	Signature
createVideoContext	Create a video context	(videoId) → VideoContext
createCanvasContext	Create a canvas context	(canvasId) → CanvasContext
createSelectorQuery	Create a selector query	() → SelectorQuery
createIntersectionObserver	Create an intersection observer	(options?) → IntersectionObserver