HTTP Data Requests

Encapsulate the @ohos.net.http module to manage network requests efficiently.

import http from '@ohos.net.http';

interface NetworkOptions {
  endpoint?: string;
  httpMethod?: HttpMethod;
  queryParameters?: Record<string, string>;
  payload?: string | Object | ArrayBuffer;
  headers?: Object;
}

enum HttpMethod {
  GET = "GET",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE"
}

class NetworkClient {
  async fetch<T>(options: NetworkOptions): Promise<T> {
    const response = await this.executeRequest(options);
    if (typeof response.result !== 'string') {
      throw new Error('Unexpected response format');
    }
    return JSON.parse(response.result) as T;
  }

  private async executeRequest(config: NetworkOptions): Promise<http.HttpResponse> {
    const client = http.createHttp();
    const targetUrl = this.constructUrl(config.endpoint, config.queryParameters);
    
    try {
      const result = await client.request(targetUrl, {
        method: config.httpMethod,
        header: config.headers,
        extraData: config.payload,
        expectDataType: http.HttpDataType.STRING
      });
      
      if (result.responseCode !== http.ResponseCode.OK) {
        throw new Error(`HTTP ${result.responseCode}`);
      }
      return result;
    } finally {
      client.destroy();
    }
  }

  private constructUrl(base: string, params?: Record<string, string>): string {
    return base;
  }
}

class RequestHandler {
  private static instance: RequestHandler;
  private client = new NetworkClient();

  static get shared(): RequestHandler {
    if (!RequestHandler.instance) {
      RequestHandler.instance = new RequestHandler();
    }
    return RequestHandler.instance;
  }

  async perform<T>(config: NetworkOptions): Promise<T> {
    return this.client.fetch<T>(config);
  }
}

export default RequestHandler;

Measuring Text Dimensions

Utilize the measure API to determine text width for layout calculations.

import measure from '@ohos.measure';

@State captionWidth: number = measure.measureText({
  textContent: this.videoTitle,
});

Video Playback Control

Manage video playback using VideoController for seamless transitions between clips.

@State isPlaying: boolean = false;
private player = new VideoController();

private handleVideoEnd() {
  this.playNextVideo();
}

Key Video Properties:

Property	Type	Description
muted	boolean	Toggles audio output
autoPlay	boolean	Enables automatic playback
controls	boolean	Shows/hides player controls
objectFit	ImageFit	Defines video scaling behavior
loop	boolean	Enables continuous playback

Common Video Events:

Event	Description
onStart	Triggered when playback begins
onPause	Fired when video pauses
onFinish	Executes upon playback completion
onError	Activated on playback failure
onPrepared	Runs when video is ready
onSeeking	Reports progress during seeking
onSeeked	Indicates seek completion
onUpdate	Notifies playback progress changes
onFullscreenChange	Handles fullscreen transitions

Touch-Based Video Navigation

Implement vertical swipe gestures to switch between videos.

private initialY: number = 0;
private threshold: number = 50;

private handleTouch(event: TouchEvent) {
  switch (event.type) {
    case TouchType.Down:
      this.initialY = event.touches[0].y;
      break;
    case TouchType.Move:
      const deltaY = (event.touches[0].y - this.initialY) * 2;
      if (Math.abs(deltaY) > this.threshold) {
        deltaY < 0 ? this.playNext() : this.playPrevious();
        this.initialY = event.touches[0].y;
      }
      break;
  }
}

List-Based Scrolling with Lazy Loading

Optimize performance by loading video thumbnails initially and fetching additional content during scroll.

@State videoItems: Array<VideoData> = [];
private currentPage: number = 0;
private apiEndpoint: string = "https://api.example.com/videos";

List({ space: 8 }) {
  ForEach(this.videoItems, (item: VideoData) => {
    ListItem() {
      Stack({ alignment: Alignment.TopStart }) {
        Image(item.thumbnail)
          .width('100%')
          .height(320)
        
        Row() {
          Image($rawfile('play_icon.png')).width(48).height(48)
        }
        .onClick(() => {
          this.startPlayback(item);
        })
      }
    }
  })
}
.onScrollIndex((start: number) => {
  if (this.videoItems.length - start < 3) {
    this.loadMoreVideos();
  }
})

private loadMoreVideos() {
  RequestHandler.shared.perform({
    httpMethod: HttpMethod.GET,
    endpoint: `${this.apiEndpoint}?page=${++this.currentPage}`
  }).then((response: VideoResponse) => {
    this.videoItems = [...this.videoItems, ...response.items];
  });
}