const plugin = wx.createPlayletPage({
  fail: (res) => {
    console.error('[createPlayletPage] failed:', res.errMsg);
  }
});

playletPlugin.onPageLoad((res) => {
  console.log('Page loaded, Player ID:', res.playerId);
});

playletPlugin.onPageDestory((res) => {
  console.log('Page destroyed, Player ID:', res.playerId);
});


plugin.onPageLoad((info) => {
      const playletManager = plugin.PlayletManager.getPageManager(info.playerId);
      console.log('manager',manager);
})

PlayletManager.setPlaylets({
       id: "sid", // Drama ID
       serialNo: 1, // Episode ID, starting from 1
       title: "Name",
       imgUrl: "Image URL",
       introduction: "Short drama introduction",
       tags: ["Friendship", "Fantasy"],
       playRate: 1,
       extParam: "{{xxx}}",
       clarity: [{"360p": 240 * 426}, {"480p": 480 * 852}, {"720p": 720 * 1280}, {"1080p": 1080 * 1920}], // Effective only under HLS
       defaultClarity: {"720p": 720 * 1280}, // Default video quality
       'initial-time': 0,
       interaction: { // Drama-level interaction data (favorite / share)
            favorite: { enabled: true, isFavorited: false, count: "1.2w" },
            share: { enabled: true, count: "567", title: "Share title", path: "pages/xxx/xxx?id=1", imageUrl: "" }
       },
       data: [{
            license-url: "",
            certificate-url: "",
            provision-url: "",
            status: 0,
            videoUrl: "Playback URL", // Not required for paid episodes
            coverImg: "Cover image", // Not required
            interaction: { // Episode-level interaction data (like)
                 like: { enabled: true, isLiked: false, count: "2.2w" }
            },
       }]
  })


    PlayletManager.setLockMenu([
      {
        title: "Watch ad to unlock",
        callback: (data) => {
          if (!data.serialNo) {
            return;
          }
          PlayletManager.setCanPlay(data.serailNo, 1)
        }
      },
      {
        title: "Purchase single episode",
        callback: (data) => {
          if (!data.serialNo) {
            return;
          }
          PlayletManager.setCanPlay(data.serailNo, 1)
        }
      }
  ])


   const unlockData = [{
      serialNo: 6, // Episode number
      status: 1,  
      videoUrl: videoUrl // Playback URL
    }];
    PlayletManager.setCanPlay(unlockData);



    manager.onCheckIsCanPlay((data) => {
      let episodes = [];
      if (data.episodes) {
        episodes = data.episodes;
      } 

      // Batch check and set status
      const results = episodes.map(ep => {
        const serialNo = ep.serialNo;
        let status;

        if (parseInt(serialNo) <= 3) {
          // Assume the first 3 episodes are free
          status = 0;
        } else {
          status = 2;
        }
        return { serialNo: serialNo, status: status };
      });
      
      manager.setCanPlay(results);
    });


    manager.onCustomEvent((data) => {
      if (data.eventType === 'CHANGE_CLARITY') {
        console.log('User changed clarity:', data.clarity);
      }
      if (data.eventType === 'CHANGE_SERIAL') {
        console.log('User switched episode:', data.slideType);
      }
      if (data.eventType === 'CHANGE_SPEED') {
        console.log('User changed playback speed:', data.speedType, data.source);
      }
    });

manager.setInteractionState({
  serialNo: 1,        // Episode number: required for type=like; optional for type=favorite/share
  type: 'like',       // Interaction type: 'like' | 'favorite' | 'share'
  isActive: true,     // Whether it is active (optional when type=share)
  count: "1.2w"       // Count text, string, formatted by the business side
})

manager.onLikeClick((args) => {
  // args.playerId      current player id
  // args.id            drama id
  // args.serialNo      episode number
  // args.currentState  state before the tap (false = not liked previously)
  // args.extParam      the extParam passed through in setPlaylets
})

manager.onFavoriteClick((args) => {
  // args.playerId
  // args.id
  // args.currentState  favorite state before the tap
  // args.extParam
})

manager.onShareClick((args) => {
  // args.playerId
  // args.id
  // args.serialNo
  // args.extParam
})

manager.setActivityInfo({
  logo: 'https://miniprogram.tcsas-superapp.com/xxx/xxx.png'
})

manager.onSetActivityInfo((args) => {
  // Triggered when the user taps the promotional logo
})

manager.updateOpenArea({
  showLeft: true,                              // Whether to show the left custom area
  playerId: '<optional>',                      // Specify the target player id
  serialNo: 1,                                 // Current episode number
  ext: JSON.stringify({ dramaId: 1 })          // Extra data (string) passed through to the custom component
})

Component({
  properties: {
    ext:      { type: String, value: '' },
    playerId: { type: String, value: '' },
    serialNo: { type: Number, value: 0 }
  },
  methods: {
    onJoinTap() {
      // Business logic: navigate to the campaign page / open a popup, etc.
    },
    onCloseTap() {
      this.triggerEvent('close');  // Notify the plugin to close the custom area
    }
  }
});

<cover-view style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;">

  <!-- Campaign banner image -->
  <cover-image
    src="https://miniprogram.tcsas-superapp.com/hackthon/upload_1755932019262.jpg"
    style="width: 500rpx; height: 500rpx; border-radius: 16rpx;"
  />

  <!-- Campaign title -->
  <cover-view style="margin-top: 30rpx; font-size: 36rpx; font-weight: bold; color: #fff;">
    Limited-time reward campaign
  </cover-view>

  <!-- Campaign description -->
  <cover-view style="margin-top: 16rpx; font-size: 26rpx; color: rgba(255,255,255,0.8); text-align: center;">
    Watch an ad to unlock all episodes for free
  </cover-view>

  <!-- Button area -->
  <cover-view style="display: flex; flex-direction: row; margin-top: 40rpx; width: 100%; justify-content: center;">
    <cover-view
      style="width: 200rpx; height: 100rpx; line-height: 80rpx; font-size: 28rpx; background: #FF6B6B; color: #fff; border-radius: 36rpx; text-align: center; margin-right: 20rpx;"
      bindtap="onJoinTap"
    >Join now</cover-view>
    <cover-view
      style="width: 200rpx; height: 100rpx; line-height: 80rpx; font-size: 28rpx; background: rgba(255,255,255,0.3); color: #fff; border-radius: 36rpx; text-align: center;"
      bindtap="onCloseTap"
    >Close</cover-view>
  </cover-view>

</cover-view>

manager.setRecommend([
  { id: 'drama_2', name: 'Palace Drama: Harem Legend', imgUrl: 'https://example.com/cover.jpg' },
  { id: 'drama_3', name: 'Mystery: Escape Room',       imgUrl: 'https://example.com/cover.jpg' }
])

manager.onRecommendItemClick((args) => {
  // args.id  — id of the recommendation item the user tapped (matches the id passed to setRecommend)
})