${coverHtml}
-
-
-
+
+
+
`;
- // 绑定控制按钮（原生 transport controls）
- // Bind the controls (native transport controls)
- el.querySelector('[data-act="prev"]').onclick = () => bridge.call('mediaPrevious');
- el.querySelector('[data-act="play"]').onclick = () => bridge.call('mediaPlayPause');
- el.querySelector('[data-act="next"]').onclick = () => bridge.call('mediaNext');
- // 进度条实时更新
- startMediaProgress(el, info);
+ // 绑定控制按钮（传入当前索引，作用于当前滑到的会话）
+ // Bind the controls (pass the current index, act on the shown session)
+ el.querySelector('[data-act="prev"]').onclick = () => bridge.call('mediaPrevious', currentMediaIndex);
+ el.querySelector('[data-act="play"]').onclick = () => bridge.call('mediaPlayPause', currentMediaIndex);
+ el.querySelector('[data-act="next"]').onclick = () => bridge.call('mediaNext', currentMediaIndex);
+ // 封面点击跳转到对应媒体 App 的播放界面
+ // Cover tap opens the media app's playback UI
+ const coverEl = el.querySelector('.cover');
+ if (coverEl) coverEl.onclick = () => bridge.call('openMediaApp', currentMediaIndex);
+ // 进度状态 + 全局 ticker
+ updateMediaProgressState(info);
+ startMediaTicker();
// 多会话滑动切换
setupMediaSwipe(el);
+ // 布局方向（上下 / 左右）
+ applyMediaLayout(el);
return el;
}
-// 进度条实时更新（播放时每秒推进）
-// Live progress bar (advance every second while playing)
-function startMediaProgress(el, info) {
- const bar = el.querySelector('.bar');
- const startTime = Date.now();
- const startPos = info.position || 0;
- const duration = info.duration || 0;
- const tick = () => {
- if (!duration) return;
- const pos = info.playing ? startPos + (Date.now() - startTime) : startPos;
- const pct = Math.min(100, (pos / duration) * 100);
- bar.style.width = pct + '%';
+// 全局进度状态：独立于卡片重建，进度条不因重新渲染而"跳回"
+// Global progress state: independent of card rebuild, so the bar doesn't reset on re-render
+let mediaProgressState = null;
+function updateMediaProgressState(info) {
+ mediaProgressState = {
+ position: info.position || 0,
+ duration: info.duration || 0,
+ playing: !!info.playing,
+ updatedAt: Date.now(),
};
- tick();
- el._progressTimer = setInterval(tick, 1000);
+}
+
+let mediaTicker = null;
+function startMediaTicker() {
+ if (mediaTicker) return;
+ mediaTicker = setInterval(() => {
+ const bar = document.querySelector('.media-card .bar');
+ if (!bar || !mediaProgressState) return;
+ const { position, duration, playing, updatedAt } = mediaProgressState;
+ if (!duration) return;
+ const pos = playing ? position + (Date.now() - updatedAt) : position;
+ bar.style.width = Math.min(100, (pos / duration) * 100) + '%';
+ }, 1000);
+}
+
+// 布局方向：默认上下（封面在上、信息在下），横条（宽>高）时左右
+// Layout direction: vertical (cover on top, info below) by default; horizontal
+// (cover left, info right) when the card is wider than tall
+function applyMediaLayout(el) {
+ const check = () => {
+ const w = el.clientWidth;
+ const h = el.clientHeight;
+ if (w > 0 && h > 0) el.classList.toggle('wide', w > h);
+ };
+ check();
+ requestAnimationFrame(check);
}
// 多会话滑动切换（左右滑动切换媒体会话）
@@ -192,13 +230,23 @@ function setupMediaSwipe(el) {
function switchMedia(delta) {
if (!currentMediaList || currentMediaList.length <= 1) return;
currentMediaIndex = (currentMediaIndex + delta + currentMediaList.length) % currentMediaList.length;
+ const info = currentMediaList[currentMediaIndex];
+ updateMediaProgressState(info);
const grid = document.getElementById('tri-col');
if (!grid) return;
const old = grid.querySelector('.media-card');
- if (old) {
- if (old._progressTimer) clearInterval(old._progressTimer);
- old.replaceWith(renderMediaCard(currentMediaList[currentMediaIndex]));
- }
+ if (!old) return;
+ // 滑动方向过渡：左滑（下一个）旧卡左出、新卡右入；右滑反之
+ // Directional transition: swipe left (next) slides old out left and new in from
+ // the right; swipe right (prev) reverses it
+ const outClass = delta > 0 ? 'slide-out-left' : 'slide-out-right';
+ const inClass = delta > 0 ? 'slide-in-right' : 'slide-in-left';
+ old.classList.add(outClass);
+ old.addEventListener('animationend', () => {
+ const fresh = renderMediaCard(info);
+ fresh.classList.add(inClass);
+ old.replaceWith(fresh);
+ }, { once: true });
}
// 转义 HTML 特殊字符，避免媒体元数据注入标签
diff --git a/app/src/main/java/top/yeij/hearth/media/MediaSessionSource.kt b/app/src/main/java/top/yeij/hearth/media/MediaSessionSource.kt
index 2de23c9..25bd30a 100644
--- a/app/src/main/java/top/yeij/hearth/media/MediaSessionSource.kt
+++ b/app/src/main/java/top/yeij/hearth/media/MediaSessionSource.kt
@@ -2,6 +2,7 @@ package top.yeij.hearth.media
import android.content.ComponentName
import android.content.Context
+import android.content.Intent
import android.graphics.Bitmap
import android.media.MediaMetadata
import android.media.session.MediaController
@@ -13,11 +14,13 @@ import java.io.ByteArrayOutputStream
// 监听系统活跃媒体会话（支持多个：音乐/听书/视频同时在线），
// 元数据/播放状态变化时实时回调（切歌、暂停/播放即时推送）；
-// 提供播放控制（上一首/暂停播放/下一首）与封面提取。
+// 提供播放控制（上一首/暂停播放/下一首）、封面提取与跳转播放界面。
// Watch active media sessions (supports multiple: music/audiobook/video at once),
// push in real time on metadata/playback-state change (track switch, play/pause);
-// provide transport controls (previous/play-pause/next) and cover extraction.
+// provide transport controls (previous/play-pause/next), cover extraction and
+// jumping to the playback UI.
class MediaSessionSource(context: Context) {
+ private val appContext = context.applicationContext
private val msm = context.getSystemService(Context.MEDIA_SESSION_SERVICE) as MediaSessionManager
// 通知监听组件作为授权凭据传入 addOnActiveSessionsChangedListener，
@@ -99,23 +102,48 @@ class MediaSessionSource(context: Context) {
}
}
- // 播放控制：作用于第一个（当前展示）controller
- // Transport controls: act on the first (currently shown) controller
- fun previous() {
- controllers.firstOrNull()?.transportControls?.skipToPrevious()
- Log.d(TAG, "previous")
+ // 播放控制：作用于指定索引的 controller（对应 H5 当前滑到的会话）
+ // Transport controls: act on the controller at the given index (matching the
+ // session the H5 card is currently showing)
+ fun previous(index: Int) {
+ controllers.getOrNull(index)?.transportControls?.skipToPrevious()
+ Log.d(TAG, "previous: index=$index")
}
- fun next() {
- controllers.firstOrNull()?.transportControls?.skipToNext()
- Log.d(TAG, "next")
+ fun next(index: Int) {
+ controllers.getOrNull(index)?.transportControls?.skipToNext()
+ Log.d(TAG, "next: index=$index")
}
- fun playPause() {
- val c = controllers.firstOrNull() ?: return
+ fun playPause(index: Int) {
+ val c = controllers.getOrNull(index) ?: return
val playing = c.playbackState?.state == PlaybackState.STATE_PLAYING
if (playing) c.transportControls.pause() else c.transportControls.play()
- Log.d(TAG, "playPause: playing=$playing")
+ Log.d(TAG, "playPause: index=$index playing=$playing")
+ }
+
+ // 跳转到指定会话的播放界面：优先 sessionActivity（PendingIntent），
+ // 失败则回退到启动该 App
+ // Jump to the session's playback UI: prefer sessionActivity (PendingIntent),
+ // fall back to launching the app
+ fun openMediaApp(index: Int) {
+ val c = controllers.getOrNull(index) ?: return
+ val sessionActivity = c.sessionActivity
+ if (sessionActivity != null) {
+ try {
+ sessionActivity.send()
+ Log.d(TAG, "openMediaApp: sessionActivity sent for ${c.packageName}")
+ return
+ } catch (e: Exception) {
+ Log.w(TAG, "openMediaApp: sessionActivity failed: ${e.message}")
+ }
+ }
+ val launch = appContext.packageManager.getLaunchIntentForPackage(c.packageName)
+ if (launch != null) {
+ launch.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+ appContext.startActivity(launch)
+ Log.d(TAG, "openMediaApp: launched ${c.packageName}")
+ }
}
// 更新 controller 列表：注销旧回调、注册新回调
diff --git a/app/src/main/java/top/yeij/hearth/webview/JsBridge.kt b/app/src/main/java/top/yeij/hearth/webview/JsBridge.kt
index aecc2ea..32e29ae 100644
--- a/app/src/main/java/top/yeij/hearth/webview/JsBridge.kt
+++ b/app/src/main/java/top/yeij/hearth/webview/JsBridge.kt
@@ -314,21 +314,29 @@ class JsBridge(
mediaSourceRef?.refresh()
}
- // 媒体播放控制（作用于当前展示的会话）
- // Media transport controls (act on the currently shown session)
+ // 媒体播放控制（作用于指定索引的会话，对应 H5 当前滑到的卡片）
+ // Media transport controls (act on the session at the given index, matching
+ // the card the H5 is currently showing)
@android.webkit.JavascriptInterface
- fun mediaPrevious() {
- mediaSourceRef?.previous()
+ fun mediaPrevious(index: Int) {
+ mediaSourceRef?.previous(index)
}
@android.webkit.JavascriptInterface
- fun mediaPlayPause() {
- mediaSourceRef?.playPause()
+ fun mediaPlayPause(index: Int) {
+ mediaSourceRef?.playPause(index)
}
@android.webkit.JavascriptInterface
- fun mediaNext() {
- mediaSourceRef?.next()
+ fun mediaNext(index: Int) {
+ mediaSourceRef?.next(index)
+ }
+
+ // 跳转到指定会话的播放界面（封面点击）
+ // Jump to the session's playback UI (cover tap)
+ @android.webkit.JavascriptInterface
+ fun openMediaApp(index: Int) {
+ mediaSourceRef?.openMediaApp(index)
}
private fun pushMedia(infos: List
, webView: android.webkit.WebView) {