<!-- 播放器详情页 -->
<page-meta page-style="overflow:hidden; background:#1A1208;" />
<view class="player-page">

  <!-- 状态栏占位（custom 导航模式必须手动留出状态栏高度） -->
  <view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>

  <!-- 环境光背景 -->
  <view class="bg-glow"
    style="background: radial-gradient(ellipse at 50% -10%, {{domain.bgColor || '#FF9D42'}}44 0%, transparent 65%);">
  </view>

  <!-- 顶部：返回 + 标题 + 分享 -->
  <view class="top-bar">
    <view class="top-btn tap-active" bindtap="goBack">
      <text class="top-back">‹</text>
    </view>
    <view class="top-title-wrap">
      <text class="top-label">正在播放</text>
      <text class="top-title">{{activeContent.title || '加载中...'}}</text>
    </view>
    <view class="top-btn tap-active" bindtap="onShare">
      <text class="top-share">↑</text>
    </view>
  </view>

  <!-- 中央 Banner：封面 ↔ 文案 -->
  <view class="banner-area" bindtap="onBannerTap">

    <!-- 封面视图（默认） -->
    <view class="banner-cover {{showTranscript ? 'banner-hidden' : ''}}">
      <!-- 涟漪声波（播放中才显示） -->
      <view class="ripple-wrap" wx:if="{{isPlaying}}">
        <view class="ripple-ring" style="animation-delay: 0s;"></view>
        <view class="ripple-ring" style="animation-delay: 0.7s;"></view>
        <view class="ripple-ring" style="animation-delay: 1.4s;"></view>
      </view>

      <!-- 大 emoji，无卡片背景 -->
      <text class="cover-emoji {{isPlaying ? 'emoji-active' : ''}}">📻</text>

      <!-- 频道名 -->
      <text class="cover-channel">{{domain.name}}</text>

      <text class="banner-hint">点击查看文案</text>
    </view>

    <!-- 文案视图 -->
    <view class="banner-transcript {{showTranscript ? '' : 'banner-hidden'}}">
      <scroll-view scroll-y enhanced show-scrollbar="{{false}}" class="transcript-scroll">
        <text class="transcript-content" wx:if="{{activeContent.content}}">{{activeContent.content}}</text>
        <view wx:else class="transcript-empty">
          <text class="transcript-empty-icon">📄</text>
          <text class="transcript-empty-text">暂无文案</text>
        </view>
      </scroll-view>
      <text class="banner-hint">点击返回封面</text>
    </view>
  </view>

  <!-- 日期 + like 同行，进度条上方 -->
  <view class="date-like-row">
    <text class="date-text">{{displayDate}}</text>
    <view class="like-btn-inline tap-active" bindtap="onLike">
      <text class="like-icon">♡</text>
    </view>
  </view>

  <!-- 进度条 -->
  <view class="progress-section">
    <slider
      class="progress-slider"
      min="0"
      max="{{duration}}"
      value="{{currentTime}}"
      activeColor="#FF9D42"
      backgroundColor="rgba(255,255,255,0.12)"
      block-size="14"
      block-color="#FF9D42"
      bindchange="onSliderChange"
      bindchanging="onSliderChanging"
    />
    <view class="time-row">
      <text class="time-text">{{currentTimeText}}</text>
      <text class="time-text">{{durationText}}</text>
    </view>
  </view>

  <!-- 控制区：← 15s | 播放/暂停 | 15s → -->
  <view class="controls-row">
    <view class="skip-btn tap-active" bindtap="onBackward">
      <text class="skip-arrow">↺</text>
      <text class="skip-sec">15</text>
    </view>

    <view class="play-btn tap-active" bindtap="onTogglePlay">
      <view wx:if="{{isPlaying}}" class="pause-group">
        <view class="pause-bar"></view>
        <view class="pause-bar"></view>
      </view>
      <text wx:else class="play-tri">▶</text>
    </view>

    <view class="skip-btn tap-active" bindtap="onForward">
      <text class="skip-arrow">↻</text>
      <text class="skip-sec">15</text>
    </view>
  </view>

  <!-- 倍速选择面板 -->
  <t-action-sheet
    visible="{{showSpeedSheet}}"
    items="{{speedItems}}"
    bind:selected="onSpeedSelect"
    bind:cancel="onSpeedCancel"
  />
</view>
