窗口方向

export class ResponsiveValueResolver {
  // Evaluate rules against the developer-defined Context.
  // Returns the first matching rule's value, or defaultValue when none match.
  // Context is typed as Object so the developer can pass their own context class.
  static getValue<T>(context: Object | undefined, responsiveValue: ResponsiveValue<T>): T | undefined {
    if (!responsiveValue) {
      return undefined;
    }

    if (!context) {
      return responsiveValue.defaultValue;
    }

    const ctxRecord: Record<string, ConditionValue> = context as Object as Record<string, ConditionValue>;

    for (let i = 0; i < responsiveValue.rules.length; i++) {
      const rule: Rule<T> = responsiveValue.rules[i];
      let allMatch = true;
      for (let j = 0; j < rule.conditions.length; j++) {
        const condition: Condition = rule.conditions[j];
        const ctxValue: ConditionValue | undefined = ctxRecord[condition.field];

        if (ctxValue === undefined) {
          Logger.warn(
            `[ResponsiveValueResolver] field '${condition.field}' not in context, rule will fall back to defaultValue`);
          allMatch = false;
          break;
        }

        if (!ResponsiveValueResolver.isConditionValue(ctxValue as Object)) {
          Logger.warn(
            `[ResponsiveValueResolver] field '${condition.field}' value is not a valid ConditionValue ` +
            `(string|number|boolean|array of them), rule will fall back to defaultValue`);
          allMatch = false;
          break;
        }

        const predicate: Predicate = OPERATOR_PREDICATES[condition.operator];
        if (!predicate) {
          Logger.warn(`[ResponsiveValueResolver] Unknown operator: ${condition.operator}`);
          allMatch = false;
          break;
        }
        if (!ResponsiveValueResolver.areTypesCompatible(condition.operator, ctxValue, condition.value)) {
          Logger.warn(
            `[ResponsiveValueResolver] type mismatch for field '${condition.field}':` +
            ` operator '${condition.operator}' is incompatible with context value and condition value types,` +
            ` rule will fall back to defaultValue`);
          allMatch = false;
          break;
        }
        if (!predicate(ctxValue, condition.value)) {
          allMatch = false;
          break;
        }
      }

      if (allMatch) {
        return rule.value;
      }
    }

    return responsiveValue.defaultValue;
  }

  // Validate that a context field value conforms to ConditionValue at runtime,
  // guarding against unsafe casts when a developer passes a custom context object.
  private static isConditionValue(value: Object): boolean {
    // ...
  }

  // Ensure the runtime types of ctxValue and condValue are compatible with the
  // operator before invoking the predicate, so mismatches are reported instead
  // of silently making a rule fail to match.
  private static areTypesCompatible(operator: Operator, ctxValue: ConditionValue, condValue: ConditionValue): boolean {
    // ...
  }
}

export class ResponsiveOrientationConfig {
  // ...
  private static getLandscapeVideoFullscreenConfigData(): ConditionResponsiveValue<OrientationConfig> {
    return {
      rules: [
        {
          conditions: [
            { field: 'displayLongEdgeVp', operator: Operator.GREATER_THAN_OR_EQUAL,
              value: LANDSCAPE_FULLSCREEN_LONG_EDGE_MIN },
            { field: 'displayLongEdgeVp', operator: Operator.LESS_THAN,
              value: LANDSCAPE_FULLSCREEN_LONG_EDGE_MID },
            { field: 'displayLongShortRatio', operator: Operator.GREATER_THAN_OR_EQUAL,
              value: LANDSCAPE_FULLSCREEN_RATIO_BAND_1 }
          ],
          value: { mode: 'autoRotate', range: AutoRotateRange.LANDSCAPE_ONLY }
        },
        {
          conditions: [
            { field: 'displayLongEdgeVp', operator: Operator.GREATER_THAN_OR_EQUAL,
              value: LANDSCAPE_FULLSCREEN_LONG_EDGE_MID },
            { field: 'displayLongEdgeVp', operator: Operator.LESS_THAN,
              value: LANDSCAPE_FULLSCREEN_LONG_EDGE_MAX },
            { field: 'displayLongShortRatio', operator: Operator.GREATER_THAN_OR_EQUAL,
              value: LANDSCAPE_FULLSCREEN_RATIO_BAND_2 }
          ],
          value: { mode: 'autoRotate', range: AutoRotateRange.LANDSCAPE_ONLY }
        }
      ],
      defaultValue: { mode: 'autoRotate', range: AutoRotateRange.ALL_ORIENTATIONS }
    };
  }
}

aboutToAppear() {
  // ...

  const config: ConditionResponsiveValue<OrientationConfig> =
    ResponsiveOrientationConfig.getConfig(PageType.LONG_VIDEO);
  try {
    this.windowObj?.setPreferredOrientation(
      OrientationStrategy.resolveResponsive(globalThis.context, config));
  } catch (err) {
    const error = err as BusinessError;
    Logger.error('VideoDetail', `setPreferredOrientation failed, code: ${error.code}, message: ${error.message}`);
  }
}

// Physical orientation, used for fixed orientation and auto-rotate preferred.
export enum OrientationType {
  UNSPECIFIED = 'UNSPECIFIED',
  PORTRAIT = 'PORTRAIT',
  LANDSCAPE = 'LANDSCAPE',
  PORTRAIT_INVERTED = 'PORTRAIT_INVERTED',
  LANDSCAPE_INVERTED = 'LANDSCAPE_INVERTED',
}

// Allowed auto-rotation range.
export enum AutoRotateRange {
  LANDSCAPE_ONLY = 'LANDSCAPE_ONLY',
  PORTRAIT_ONLY = 'PORTRAIT_ONLY',
  ALL_ORIENTATIONS = 'ALL_ORIENTATIONS',
}

export interface FixedConfig {
  mode: 'fixed';
  orientation?: OrientationType;
}

export interface AutoRotateConfig {
  mode: 'autoRotate';
  range: AutoRotateRange;
  preferred?: OrientationType;
}

export interface FollowDesktopConfig {
  mode: 'followDesktop';
}

export type OrientationConfig = FixedConfig | AutoRotateConfig | FollowDesktopConfig;

export class OrientationStrategy {
  // ...

  private static resolveUserRotation(preferred?: OrientationType): window.Orientation {
    if (!preferred || preferred === OrientationType.UNSPECIFIED) {
      return window.Orientation.AUTO_ROTATION_UNSPECIFIED;
    }
    switch (preferred) {
      case OrientationType.PORTRAIT:
        return window.Orientation.USER_ROTATION_PORTRAIT;
      case OrientationType.LANDSCAPE:
        return window.Orientation.USER_ROTATION_LANDSCAPE;
      case OrientationType.PORTRAIT_INVERTED:
        return window.Orientation.USER_ROTATION_PORTRAIT_INVERTED;
      case OrientationType.LANDSCAPE_INVERTED:
        return window.Orientation.USER_ROTATION_LANDSCAPE_INVERTED;
      default:
        return window.Orientation.AUTO_ROTATION_UNSPECIFIED;
    }
  }

  static resolve(config: OrientationConfig): window.Orientation {
    switch (config.mode) {
      case 'followDesktop':
        return OrientationStrategy.followDesktop();
      case 'fixed':
        return OrientationStrategy.fixed(config.orientation);
      case 'autoRotate':
        return OrientationStrategy.autoRotate(config.range, config.preferred);
      default:
        return window.Orientation.AUTO_ROTATION_UNSPECIFIED;
    }
  }

  static resolveResponsive(
    context: Object | undefined,
    responsiveValue: ResponsiveValue<OrientationConfig>
  ): window.Orientation {
    const config: OrientationConfig | undefined =
      ResponsiveValueResolver.getValue<OrientationConfig>(context, responsiveValue);
    if (!config) {
      return window.Orientation.UNSPECIFIED;
    }
    return OrientationStrategy.resolve(config);
  }
}

{
  "name": "default",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "base": "file:../../commons/base",
    "multidevicelibrary": "file:../../commons/multidevicelibrary",
    "home": "file:../../features/home",
    "portrait": "file:../../features/portrait",
    "landscape": "file:../../features/landscape",
    "photos": "file:../../features/photos",
    "stock": "file:../../features/stock",
    "longvideo": "file:../../features/longvideo",
    "shortvideo": "file:../../features/shortvideo",
    "hovervideo": "file:../../features/hovervideo"
  }
}

// Developer-defined context for scene orientation resolution.
// Maintained by EntryAbility and passed to OrientationController as Object.
// The library's resolver accesses fields generically via Record<string, ConditionValue>.
@Observed
export class ResponsiveContext {
  public displayLongEdgeVp: number;
  public displayShortEdgeVp: number;
  public displayLongShortRatio: number;
  public widthBreakpoint: WidthBreakpoint;
  public heightBreakpoint: HeightBreakpoint;

  constructor(
    displayLongEdgeVp: number = 0,
    displayShortEdgeVp: number = 0,
    displayLongShortRatio: number = 1,
    widthBreakpoint: WidthBreakpoint = WidthBreakpoint.WIDTH_SM,
    heightBreakpoint: HeightBreakpoint = HeightBreakpoint.HEIGHT_SM
  ) {
    this.displayLongEdgeVp = displayLongEdgeVp;
    this.displayShortEdgeVp = displayShortEdgeVp;
    this.displayLongShortRatio = displayLongShortRatio;
    this.widthBreakpoint = widthBreakpoint;
    this.heightBreakpoint = heightBreakpoint;
  }
}

export default class EntryAbility extends UIAbility {
  // ...
  private responsiveContext?: ResponsiveContext;
  // ...
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // ...

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        Logger.error(`Failed to load the content. Cause: ${JSON.stringify(err)}`);
        return;
      }
      Logger.info('Succeeded in loading the content.');

      windowStage.getMainWindow().then((data: window.Window) => {
        try {
          this.uiContext = data.getUIContext();
        } catch (err) {
          Logger.error(`Invoke set preferred orientation failed, code is ${err.code}, message is ${err.message}`);
        }

        const abilityRegi: AbilityRegister = new AbilityRegister(data);
        AppStorage.setOrCreate('multidevicelibrary.abilities', abilityRegi.registerContext('defaults'));

        // Maintain the ResponsiveContext for scene orientation resolution and store it in AppStorage.
        this.responsiveContext = new ResponsiveContext();
        this.updateResponsiveContext();
        AppStorage.setOrCreate('multidevicelibrary.context', this.responsiveContext);

        // ...
      }).catch((err: BusinessError) => {
        Logger.error(`Error occured, error code: ${err.code}, error message: ${err.message}`);
      });
    });
  }

  // ...
}

export default class EntryAbility extends UIAbility {
  // ...
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // ...

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        Logger.error(`Failed to load the content. Cause: ${JSON.stringify(err)}`);
        return;
      }
      Logger.info('Succeeded in loading the content.');

      windowStage.getMainWindow().then((data: window.Window) => {
        // ...
        data.on('windowSizeChange', this.onWindowSizeChange);
        this.registerDisplayListener();
      }).catch((err: BusinessError) => {
        Logger.error(`Error occured, error code: ${err.code}, error message: ${err.message}`);
      });
    });
  }

  // ...

  private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => {
    if (!this.uiContext) {
      Logger.error('[EntryAbility] uiContext is undefined in onWindowSizeChange.');
      return;
    }
    let widthBp: WidthBreakpoint = this.uiContext.getWindowWidthBreakpoint();
    AppStorage.setOrCreate(CommonConstants.WIDTH_BREAK_POINT, widthBp);
    let heightBp: HeightBreakpoint = this.uiContext.getWindowHeightBreakpoint();
    AppStorage.setOrCreate(CommonConstants.HEIGHT_BREAK_POINT, heightBp);
    let windowSizeVp: window.Size = {
      width: this.uiContext.px2vp(windowSize.width),
      height: this.uiContext.px2vp(windowSize.height)
    };
    AppStorage.setOrCreate(CommonConstants.WINDOW_SIZE_VP, windowSizeVp);
    this.updateResponsiveContext();
    this.scene?.recompute();
  }
  // ...
  private registerDisplayListener(): void {
    try {
      display.on('change', () => {
        this.updateResponsiveContext();
        this.scene?.recompute();
      });
    } catch (e) {
      Logger.error(`[EntryAbility] display.on('change') unavailable: ${JSON.stringify(e)}`);
    }
  }
}

private updateResponsiveContext(): void {
  if (!this.responsiveContext) {
    return;
  }
  try {
    const defaultDisplay: display.Display = display.getDefaultDisplaySync();
    const longEdgePx: number =
      defaultDisplay.width >= defaultDisplay.height ? defaultDisplay.width : defaultDisplay.height;
    const shortEdgePx: number =
      defaultDisplay.width >= defaultDisplay.height ? defaultDisplay.height : defaultDisplay.width;
    const longShortRatio: number = shortEdgePx > 0 ? longEdgePx / shortEdgePx : 1;
    const densityPixels: number = defaultDisplay.densityPixels;
    this.responsiveContext.displayLongEdgeVp = longEdgePx / densityPixels;
    this.responsiveContext.displayShortEdgeVp = shortEdgePx / densityPixels;
    this.responsiveContext.displayLongShortRatio = longShortRatio;
    if (this.uiContext) {
      this.responsiveContext.widthBreakpoint = this.uiContext.getWindowWidthBreakpoint();
      this.responsiveContext.heightBreakpoint = this.uiContext.getWindowHeightBreakpoint();
    }
    AppStorage.setOrCreate(CommonConstants.DISPLAY_SHORT_EDGE_VP, this.responsiveContext.displayShortEdgeVp);
    AppStorage.setOrCreate(CommonConstants.DISPLAY_LONG_SHORT_RATIO, this.responsiveContext.displayLongShortRatio);
  } catch (error) {
    Logger.error(`[EntryAbility] updateResponsiveContext failed: ${JSON.stringify(error)}`);
  }
}

aboutToAppear() {
  // ...

  const config: ConditionResponsiveValue<OrientationConfig> =
    ResponsiveOrientationConfig.getConfig(PageType.LONG_VIDEO);
  try {
    this.windowObj?.setPreferredOrientation(
      OrientationStrategy.resolveResponsive(globalThis.context, config));
  } catch (err) {
    const error = err as BusinessError;
    Logger.error('VideoDetail', `setPreferredOrientation failed, code: ${error.code}, message: ${error.message}`);
  }
}