tencent cloud

// index.wxs
let startY = 0; // Starting Y coordinate
let isStart = false; // Whether the sliding has started
let moveDistance = 0; // Distance moved
let currentOffset = 0; // Save cumulative offset

// Touch start event
function touchstart(event, ins) {
  if (!isStart) {
    isStart = true;
    const touch = event.touches[0];
    startY = touch.pageY;
  }
}

// Touch move event
function touchmove(event, ins) {
  const { pageY } = event.touches[0];
  moveDistance = currentOffset + (pageY - startY);
  
  // Update element position
  ins.selectComponent('.videoBox').setStyle({
    transform: `translateY(${moveDistance}px)`
  });
}

// Touch end event
function touchend(event, ins) {
  isStart = false;
  currentOffset = moveDistance;
}

module.exports = {
  touchstart,
  touchmove,
  touchend
};

.container {
  width: 100vw;
  height: 100%;
  position: relative;
  overflow: hidden;
  top: 0;
  position: absolute;
  background: #000;
}

.videoBox {
  width: 100vw;
  height: 100%;
  position: absolute;
}

.video-item {
  width: 100vw;
  height: 100%;
  display: block;
}

// utils/debounce.js
function debounce(fn, delay = 300, immediate = false) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    
    if (immediate && !timer) {
      fn.apply(this, args); // Execute immediately once
    }
    
    timer = setTimeout(() => {
      if (!immediate) {
        fn.apply(this, args);
      }
      timer = null;
    }, delay);
  };
}
module.exports = debounce;



// pages/live.js
const debounce = require('../../utils/debounce');

Page({
  data: { danmuText: '' },
  
  onLoad() {
    // Create a debounced update function and bind the current Page's this
    this.debouncedUpdateDanmu = debounce(this.updateDanmu.bind(this), 300);
  },

  updateDanmu(text) {
    this.setData({ danmuText: text });
  }

  // Receive real-time WebSocket messages
  onSocketMessage(msg) {
    this.debouncedUpdateDanmu(msg.content); // High-frequency calls will be automatically merged
  }
});

Page({
  data: {
    open: false,
  },
  handleOpen: function () {
    this.setData({
      open: true
    })
  },
  handleClose: function () {
    this.setData({
      open: false
    })
  },
})

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000;
}
.liver-pusher {
  width: 100%;
  flex: 1;
}
.action-button {
  position: absolute;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: white;
}

.close {
  left: 100px;
}

.comments-modal {
  width: 100%;
  background-color: #fff;
  height: 40vh;
}