@quicktvui/tv-ad-unlock 1.0.0

package/README.md

@@ -0,0 +1,155 @@
+# @quicktvui/tv-ad-unlock
+
+TV广告解锁组件，用于QuickTVUI框架的电视端广告解锁功能。
+
+## 功能特性
+
+- 生成电视端广告二维码
+- 轮询广告观看状态
+- 自动管理解锁状态
+- 支持自定义配置
+
+## 安装
+
+```bash
+pnpm add @quicktvui/tv-ad-unlock
+```
+
+## 使用方法
+
+### 1. 基础使用
+
+```vue
+<template>
+  <TVAdUnlock
+    :config="adConfig"
+    :storageKeys="storageKeys"
+    :requestManager="requestManager"
+    @unlockSuccess="onUnlockSuccess"
+    @unlockFailed="onUnlockFailed"
+  />
+</template>
+
+<script setup lang="ts">
+import { TVAdUnlock, useTVAdUnlockStorage } from '@quicktvui/tv-ad-unlock'
+import type { TVAdUnlockConfig, TVAdUnlockStorageKeys, RequestManager } from '@quicktvui/tv-ad-unlock'
+
+const adConfig: TVAdUnlockConfig = {
+  packageName: 'com.example.app',
+  superRequestBaseUrl: 'https://superapi.extscreen.com/extscreenapi/api',
+  invalidTimeout: 300000,
+  pollInterval: 1000
+}
+
+const storageKeys: TVAdUnlockStorageKeys = {
+  playCountKey: 'app_play_count',
+  unlockDateKey: 'app_ad_unlock_date',
+  unlockedTodayKey: 'app_ad_unlocked_today'
+}
+
+const requestManager: RequestManager = {
+  post: async (url, data) => { /* 实现请求逻辑 */ },
+  get: async (url, data) => { /* 实现请求逻辑 */ }
+}
+
+function onUnlockSuccess() {
+  console.log('解锁成功')
+}
+
+function onUnlockFailed(error: Error) {
+  console.error('解锁失败', error)
+}
+</script>
+```
+
+### 2. 使用 Composable
+
+```typescript
+import { useTVAdUnlock, useTVAdUnlockStorage } from '@quicktvui/tv-ad-unlock'
+import { useESLocalStorage } from '@extscreen/es3-core'
+
+const storage = useESLocalStorage()
+
+const storageKeys = {
+  playCountKey: 'app_play_count',
+  unlockDateKey: 'app_ad_unlock_date',
+  unlockedTodayKey: 'app_ad_unlocked_today'
+}
+
+const adStorage = useTVAdUnlockStorage(storage, storageKeys, 32)
+
+async function checkNeedShowAd() {
+  const needAd = await adStorage.checkNeedAd()
+  if (needAd) {
+    router.push({ name: 'ad' })
+  }
+}
+```
+
+### 3. 路由配置
+
+```typescript
+import { ESRouteType } from '@extscreen/es3-router'
+
+const routes = [
+  {
+    path: '/ad',
+    name: 'ad',
+    component: () => import('./views/ad/index.vue'),
+    type: ESRouteType.ES_ROUTE_TYPE_DIALOG
+  }
+]
+```
+
+## API
+
+### Props
+
+| 属性 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|------|--------|------|
+| config | TVAdUnlockConfig | 是 | - | 广告配置 |
+| storageKeys | TVAdUnlockStorageKeys | 是 | - | 存储键名配置 |
+| requestManager | RequestManager | 是 | - | 请求管理器 |
+| title | string | 否 | '观看30秒广告 当日解锁' | 标题文字 |
+| subTitle | string | 否 | '手机打开【微信】扫码' | 副标题文字 |
+| invalidCodeImage | string | 否 | '' | 二维码失效图片 |
+| scannedCodeImage | string | 否 | '' | 已扫码图片 |
+| scanTitle | string | 否 | '观看奖励' | 扫码标题 |
+| scanContent | string | 否 | '观看广告后可获得奖励' | 扫码内容 |
+| scanToast | string | 否 | '奖励已获得，请前往电视端观看' | 扫码提示 |
+
+### Events
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| unlockSuccess | - | 解锁成功 |
+| unlockFailed | error: Error | 解锁失败 |
+| qrCodeInvalid | - | 二维码失效 |
+| qrCodeScanned | - | 二维码已扫码 |
+
+### Types
+
+```typescript
+interface TVAdUnlockConfig {
+  packageName: string
+  superRequestBaseUrl: string
+  trackBaseUrl?: string
+  invalidTimeout?: number
+  pollInterval?: number
+}
+
+interface TVAdUnlockStorageKeys {
+  playCountKey: string
+  unlockDateKey: string
+  unlockedTodayKey: string
+}
+
+interface RequestManager {
+  post(url: string, data: Record<string, any>): Promise<any>
+  get(url: string, data: string): Promise<any>
+}
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@quicktvui/tv-ad-unlock",
+  "version": "1.0.0",
+  "description": "TV广告解锁组件 - 用于QuickTVUI框架的电视端广告解锁功能",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "quicktvui",
+    "tv",
+    "ad",
+    "unlock",
+    "qrcode"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@extscreen/es3-core": ">=3.0.0",
+    "@extscreen/es3-router": ">=3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}

package/src/TVAdUnlock.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="ad-container">
+    <div class="content">
+      <div class="content-bg" />
+      <span class="title">{{ title }}</span>
+      <span class="sub-title">{{ subTitle }}</span>
+      <div class="qrcode-container">
+        <qt-qr-code
+          v-if="adQrCode && !isInvalid && qrCodeState !== 1"
+          class="qrcode"
+          :content="adQrCode"
+        />
+        <img
+          v-if="isInvalid"
+          class="invalid-code"
+          :src="invalidCodeImage"
+        />
+        <img
+          v-if="qrCodeState === 1"
+          class="invalid-code"
+          :src="scannedCodeImage"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ESKeyCode, useESRuntime, useESToast, useESLocalStorage } from '@extscreen/es3-core'
+import { useESRouter } from '@extscreen/es3-router'
+import { useTVAdUnlock, useTVAdUnlockStorage } from './useTVAdUnlock'
+import type { TVAdUnlockConfig, TVAdUnlockParams, TVAdUnlockStorageKeys, RequestManager } from './types'
+
+interface Props {
+  config: TVAdUnlockConfig
+  storageKeys: TVAdUnlockStorageKeys
+  requestManager: RequestManager
+  title?: string
+  subTitle?: string
+  invalidCodeImage?: string
+  scannedCodeImage?: string
+  scanTitle?: string
+  scanContent?: string
+  scanToast?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '观看30秒广告 当日解锁',
+  subTitle: '手机打开【微信】扫码',
+  invalidCodeImage: '',
+  scannedCodeImage: '',
+  scanTitle: '观看奖励',
+  scanContent: '观看广告后可获得奖励',
+  scanToast: '奖励已获得，请前往电视端观看'
+})
+
+const emit = defineEmits<{
+  (e: 'unlockSuccess'): void
+  (e: 'unlockFailed', error: Error): void
+  (e: 'qrCodeInvalid'): void
+  (e: 'qrCodeScanned'): void
+}>()
+
+const toast = useESToast()
+const storage = useESLocalStorage()
+const router = useESRouter()
+const runtime = useESRuntime()
+const dnum = runtime.getRuntimeDeviceId()
+
+const payParams = ref<TVAdUnlockParams>({
+  assetId: '',
+  assetName: '',
+  fromId: '',
+  fromName: ''
+})
+
+const {
+  adQrCode,
+  isInvalid,
+  qrCodeState,
+  isLoading,
+  isShowConfirmToast,
+  getAdQrCode,
+  stopPollTvADStatusTimer,
+  stopInvalidTimer,
+  reset
+} = useTVAdUnlock(
+  props.config,
+  props.storageKeys,
+  props.requestManager,
+  {
+    onUnlockSuccess: () => handleUnlockSuccess(),
+    onUnlockFailed: (error) => emit('unlockFailed', error),
+    onQrCodeInvalid: () => emit('qrCodeInvalid'),
+    onQrCodeScanned: () => emit('qrCodeScanned')
+  }
+)
+
+const adStorage = useTVAdUnlockStorage(storage, props.storageKeys)
+
+async function handleUnlockSuccess() {
+  await adStorage.setTodayUnlocked()
+  emit('unlockSuccess')
+  toast.showToast('解锁成功，继续观看吧！')
+  router.back()
+}
+
+function onKeyDown(event: any) {
+  switch (event.keyCode) {
+    case ESKeyCode.ES_KEYCODE_DPAD_CENTER:
+    case ESKeyCode.ES_KEYCODE_ENTER:
+      if (isInvalid.value || qrCodeState.value === 1) {
+        getAdQrCode(dnum, props.scanTitle, props.scanContent, props.scanToast)
+      }
+      break
+  }
+}
+
+function onESCreate(params: TVAdUnlockParams) {
+  payParams.value = params || { assetId: '', assetName: '', fromId: '', fromName: '' }
+  getAdQrCode(dnum, props.scanTitle, props.scanContent, props.scanToast)
+}
+
+function onBackPressed() {
+  if (!isShowConfirmToast.value && qrCodeState.value === 1) {
+    toast.showToast('广告播放中，请不要关闭弹窗')
+    isShowConfirmToast.value = true
+    return true
+  } else {
+    stopPollTvADStatusTimer()
+    stopInvalidTimer()
+    router.back()
+  }
+}
+
+function onESDestroy() {
+  stopPollTvADStatusTimer()
+  stopInvalidTimer()
+}
+
+defineExpose({
+  onESCreate,
+  onKeyDown,
+  onBackPressed,
+  onESDestroy
+})
+</script>
+
+<style scoped>
+.ad-container {
+  width: 1920px;
+  height: 1080px;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content {
+  width: 892px;
+  height: 646px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.content-bg {
+  position: absolute;
+  width: 892px;
+  height: 646px;
+  background-color: #FBE6C4;
+  border-radius: 30px;
+  border-width: 1px;
+  border-color: #979797;
+}
+
+.title {
+  font-weight: 500;
+  font-size: 46px;
+  color: #000000;
+}
+
+.sub-title {
+  margin-top: 32px;
+  font-weight: 400;
+  font-size: 30px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.qrcode-container {
+  margin-top: 32px;
+  width: 300px;
+  height: 300px;
+  border-radius: 30px;
+  background-color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.qrcode {
+  position: absolute;
+  width: 260px;
+  height: 260px;
+  border-radius: 30px;
+  background-color: #FFFFFF;
+}
+
+.invalid-code {
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  border-radius: 30px;
+  background-color: transparent;
+}
+</style>

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export { useTVAdUnlock, useTVAdUnlockStorage } from './useTVAdUnlock'
+export { default as TVAdUnlock } from './TVAdUnlock.vue'

package/src/types.ts

@@ -0,0 +1,57 @@
+export interface TVAdUnlockConfig {
+  packageName: string
+  superRequestBaseUrl: string
+  trackBaseUrl?: string
+  invalidTimeout?: number
+  pollInterval?: number
+}
+
+export interface TVAdUnlockParams {
+  assetId?: string
+  assetName?: string
+  fromId?: string
+  fromName?: string
+}
+
+export interface TVAdUnlockCallbacks {
+  onUnlockSuccess?: () => void
+  onUnlockFailed?: (error: Error) => void
+  onQrCodeInvalid?: () => void
+  onQrCodeScanned?: () => void
+}
+
+export interface TVAdUnlockState {
+  adQrCode: string
+  isInvalid: boolean
+  qrCodeState: number
+  isLoading: boolean
+}
+
+export interface TVAdUnlockStorageKeys {
+  playCountKey: string
+  unlockDateKey: string
+  unlockedTodayKey: string
+}
+
+export interface TVAdUnlockOptions {
+  config: TVAdUnlockConfig
+  storageKeys: TVAdUnlockStorageKeys
+  freePlayCount?: number
+  callbacks?: TVAdUnlockCallbacks
+}
+
+export interface RequestManager {
+  post(url: string, data: Record<string, any>): Promise<any>
+  get(url: string, data: string): Promise<any>
+}
+
+export interface TrackEventParams {
+  id: string
+  name: string
+  pageId?: string
+  pageName?: string
+  pageSourceId?: string
+  pageSourceName?: string
+  contentId?: string
+  contentName?: string
+}

package/src/useTVAdUnlock.ts

@@ -0,0 +1,277 @@
+import { ref, watch, onUnmounted } from 'vue'
+import type {
+  TVAdUnlockConfig,
+  TVAdUnlockParams,
+  TVAdUnlockState,
+  TVAdUnlockStorageKeys,
+  TVAdUnlockCallbacks,
+  RequestManager
+} from './types'
+
+const DEFAULT_INVALID_TIMEOUT = 300000
+const DEFAULT_POLL_INTERVAL = 1000
+
+export function useTVAdUnlock(
+  config: TVAdUnlockConfig,
+  storageKeys: TVAdUnlockStorageKeys,
+  requestManager: RequestManager,
+  callbacks?: TVAdUnlockCallbacks
+) {
+  const adQrCode = ref('')
+  const isInvalid = ref(false)
+  const qrCodeState = ref(0)
+  const isLoading = ref(false)
+  const isStopPoll = ref(false)
+  const isShowConfirmToast = ref(false)
+
+  let invalidTimer: ReturnType<typeof setTimeout> | null = null
+  let pollTimer: ReturnType<typeof setTimeout> | null = null
+
+  const invalidTimeout = config.invalidTimeout ?? DEFAULT_INVALID_TIMEOUT
+  const pollInterval = config.pollInterval ?? DEFAULT_POLL_INTERVAL
+
+  const urlGetDeviceCode = config.superRequestBaseUrl + '/superc/ad/open/v2/tv/getAdUrl'
+  const urlPollTVADStatus = config.superRequestBaseUrl + '/superc/ad/open/v2/tv/pollTVADStatus'
+
+  watch(() => qrCodeState.value, (newVal, oldVal) => {
+    if (newVal === 1 && oldVal === 0) {
+      startInvalidTimer()
+      callbacks?.onQrCodeScanned?.()
+    }
+  })
+
+  function getTodayString(): string {
+    const today = new Date()
+    return `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+  }
+
+  async function isTodayUnlocked(storage: { getString: (key: string, defaultValue?: string) => Promise<string> }): Promise<boolean> {
+    const today = getTodayString()
+    const unlockedDate = await storage.getString(storageKeys.unlockedTodayKey, '')
+    return unlockedDate === today
+  }
+
+  async function getTodayPlayCount(storage: { getString: (key: string, defaultValue?: string) => Promise<string>; putString: (key: string, value: string) => Promise<void> }): Promise<number> {
+    const today = getTodayString()
+    const savedDate = await storage.getString(storageKeys.unlockDateKey, '')
+
+    if (savedDate !== today) {
+      await storage.putString(storageKeys.unlockDateKey, today)
+      await storage.putString(storageKeys.playCountKey, '0')
+      return 0
+    }
+
+    const count = await storage.getString(storageKeys.playCountKey, '0')
+    return parseInt(count) || 0
+  }
+
+  async function incrementPlayCount(storage: { getString: (key: string, defaultValue?: string) => Promise<string>; putString: (key: string, value: string) => Promise<void> }): Promise<number> {
+    const count = await getTodayPlayCount(storage)
+    const newCount = count + 1
+    await storage.putString(storageKeys.playCountKey, String(newCount))
+    return newCount
+  }
+
+  async function checkNeedAd(storage: { getString: (key: string, defaultValue?: string) => Promise<string>; putString: (key: string, value: string) => Promise<void> }, freePlayCount: number): Promise<boolean> {
+    const unlocked = await isTodayUnlocked(storage)
+    if (unlocked) {
+      return false
+    }
+    const count = await getTodayPlayCount(storage)
+    return count >= freePlayCount
+  }
+
+  async function pollTVADStatus(deviceId: string): Promise<void> {
+    try {
+      const res = await requestManager.post(urlPollTVADStatus, {
+        data: { deviceId }
+      })
+
+      if (isStopPoll.value) {
+        return
+      }
+
+      qrCodeState.value = parseInt(`${res}`)
+
+      if (qrCodeState.value === 2) {
+        callbacks?.onUnlockSuccess?.()
+      } else {
+        pollTimer = setTimeout(() => {
+          pollTVADStatus(deviceId)
+        }, pollInterval)
+      }
+    } catch {
+      pollTimer = setTimeout(() => {
+        pollTVADStatus(deviceId)
+      }, pollInterval)
+    }
+  }
+
+  async function getAdQrCode(deviceId: string, scanTitle: string = '观看奖励', scanContent: string = '观看广告后可获得奖励', scanToast: string = '奖励已获得，请前往电视端观看'): Promise<string> {
+    isLoading.value = true
+    isInvalid.value = false
+    qrCodeState.value = 0
+
+    try {
+      const res = await requestManager.post(urlGetDeviceCode, {
+        data: {
+          deviceId,
+          scanTitle,
+          scanContent,
+          scanToast
+        }
+      })
+
+      if (res) {
+        adQrCode.value = res
+        isInvalid.value = false
+        startPollTvADStatusTimer(deviceId)
+        startInvalidTimer()
+        isLoading.value = false
+        return res
+      } else {
+        isLoading.value = false
+        callbacks?.onUnlockFailed?.(new Error('获取二维码失败'))
+        return ''
+      }
+    } catch (e) {
+      isLoading.value = false
+      callbacks?.onUnlockFailed?.(e as Error)
+      return ''
+    }
+  }
+
+  function startPollTvADStatusTimer(deviceId: string): void {
+    stopPollTvADStatusTimer()
+    isStopPoll.value = false
+    pollTimer = setTimeout(() => {
+      pollTVADStatus(deviceId)
+    }, pollInterval)
+  }
+
+  function stopPollTvADStatusTimer(): void {
+    if (pollTimer) {
+      clearTimeout(pollTimer)
+      pollTimer = null
+      isStopPoll.value = true
+    }
+  }
+
+  function stopInvalidTimer(): void {
+    if (invalidTimer) {
+      clearTimeout(invalidTimer)
+      invalidTimer = null
+    }
+  }
+
+  function startInvalidTimer(): void {
+    stopInvalidTimer()
+    invalidTimer = setTimeout(() => {
+      invalidQrCode()
+      invalidTimer = null
+    }, invalidTimeout)
+  }
+
+  function invalidQrCode(): void {
+    isInvalid.value = true
+    stopPollTvADStatusTimer()
+    callbacks?.onQrCodeInvalid?.()
+  }
+
+  function reset(): void {
+    adQrCode.value = ''
+    isInvalid.value = false
+    qrCodeState.value = 0
+    isLoading.value = false
+    isStopPoll.value = false
+    isShowConfirmToast.value = false
+    stopPollTvADStatusTimer()
+    stopInvalidTimer()
+  }
+
+  onUnmounted(() => {
+    stopPollTvADStatusTimer()
+    stopInvalidTimer()
+  })
+
+  return {
+    adQrCode,
+    isInvalid,
+    qrCodeState,
+    isLoading,
+    isShowConfirmToast,
+    getAdQrCode,
+    startPollTvADStatusTimer,
+    stopPollTvADStatusTimer,
+    startInvalidTimer,
+    stopInvalidTimer,
+    invalidQrCode,
+    reset,
+    isTodayUnlocked,
+    getTodayPlayCount,
+    incrementPlayCount,
+    checkNeedAd
+  }
+}
+
+export function useTVAdUnlockStorage(
+  storage: { getString: (key: string, defaultValue?: string) => Promise<string>; putString: (key: string, value: string) => Promise<void> },
+  storageKeys: TVAdUnlockStorageKeys,
+  freePlayCount: number = 32
+) {
+  function getTodayString(): string {
+    const today = new Date()
+    return `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+  }
+
+  async function isTodayUnlocked(): Promise<boolean> {
+    const today = getTodayString()
+    const unlockedDate = await storage.getString(storageKeys.unlockedTodayKey, '')
+    return unlockedDate === today
+  }
+
+  async function getTodayPlayCount(): Promise<number> {
+    const today = getTodayString()
+    const savedDate = await storage.getString(storageKeys.unlockDateKey, '')
+
+    if (savedDate !== today) {
+      await storage.putString(storageKeys.unlockDateKey, today)
+      await storage.putString(storageKeys.playCountKey, '0')
+      return 0
+    }
+
+    const count = await storage.getString(storageKeys.playCountKey, '0')
+    return parseInt(count) || 0
+  }
+
+  async function incrementPlayCount(): Promise<number> {
+    const count = await getTodayPlayCount()
+    const newCount = count + 1
+    await storage.putString(storageKeys.playCountKey, String(newCount))
+    return newCount
+  }
+
+  async function checkNeedAd(): Promise<boolean> {
+    const unlocked = await isTodayUnlocked()
+    if (unlocked) {
+      return false
+    }
+    const count = await getTodayPlayCount()
+    return count >= freePlayCount
+  }
+
+  async function setTodayUnlocked(): Promise<void> {
+    const today = getTodayString()
+    await storage.putString(storageKeys.unlockedTodayKey, today)
+    await storage.putString(storageKeys.playCountKey, '0')
+    await storage.putString(storageKeys.unlockDateKey, today)
+  }
+
+  return {
+    isTodayUnlocked,
+    getTodayPlayCount,
+    incrementPlayCount,
+    checkNeedAd,
+    setTodayUnlocked
+  }
+}