Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
452f23b9 1 parent 1ab03d6b

refactor(VideoPlayer): 移除移动网络流量警告功能 

清理不再需要的流量警告相关代码，包括组件模板、样式和逻辑
简化播放控制流程，直接使用原生播放方法
Inline Side-by-side
Showing 2 changed files with 6 additions and 249 deletions
......@@ -38,17 +38,6 @@
</div>
</div>
<div v-if="trafficWarnVisible && !showErrorOverlay" class="traffic-overlay">
<div class="traffic-content">
<div class="traffic-title">当前为移动网络</div>
<div class="traffic-message">{{ `视频大小约：${trafficFileSizeText}，注意流量消耗` }}</div>
<div class="traffic-actions">
<button class="traffic-cancel" @click="cancelTrafficWarn">取消</button>
<button class="traffic-confirm" @click="confirmTrafficWarn">继续播放</button>
</div>
</div>
</div>
<!-- 错误提示覆盖层 -->
<div v-if="showErrorOverlay" class="error-overlay">
<div class="error-content">
......@@ -110,13 +99,9 @@ const {
errorMessage,
showNetworkSpeedOverlay,
networkSpeedText,
trafficWarnVisible,
trafficFileSizeText,
confirmTrafficWarn,
cancelTrafficWarn,
requestPlay,
retryLoad,
handleVideoJsMounted,
tryNativePlay
} = useVideoPlayer(props, emit, videoRef, nativeVideoRef);
// 事件处理
......@@ -149,10 +134,10 @@ defineExpose({
},
play() {
if (useNativePlayer.value) {
void requestPlay(false);
tryNativePlay();
return;
}
void requestPlay(false);
player.value?.play()?.catch(console.warn);
},
getPlayer() {
return useNativePlayer.value ? nativeVideoRef.value : player.value;
......@@ -248,70 +233,6 @@ defineExpose({
opacity: 0.95;
}
.traffic-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 950;
pointer-events: auto;
}
.traffic-content {
padding: 16px 18px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(12px);
color: #fff;
text-align: center;
max-width: 86%;
}
.traffic-title {
font-size: 16px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 8px;
}
.traffic-message {
font-size: 14px;
line-height: 1.4;
opacity: 0.95;
margin-bottom: 14px;
}
.traffic-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.traffic-cancel,
.traffic-confirm {
border: none;
padding: 10px 14px;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.traffic-cancel {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.95);
}
.traffic-confirm {
background: #007bff;
color: #fff;
}
.retry-button {
background: #007bff;
color: white;
......
......@@ -34,11 +34,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
const hasEverPlayed = ref(false);
let networkSpeedTimer = null;
const networkKind = ref('unknown');
const trafficWarnVisible = ref(false);
const trafficWarnAcknowledged = ref(false);
let trafficWarnDuringAutoplay = false;
// 原生播放器状态
const nativeReady = ref(false);
let nativeListeners = null;
......@@ -105,12 +100,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
return String(size) + "B";
};
const trafficFileSizeText = computed(() => {
const len = probeInfo.value.content_length;
if (!len) return "未知";
return formatBytes(len) || "未知";
});
const getErrorHint = () => {
if (probeInfo.value.status === 403) return "（403：无权限或已过期）";
if (probeInfo.value.status === 404) return "（404：资源不存在）";
......@@ -124,52 +113,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
return "";
};
const detectNetworkKind = async () => {
if (typeof navigator === 'undefined') {
networkKind.value = 'unknown';
return;
}
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
const connectionType = connection && typeof connection.type === 'string' ? connection.type : '';
if (connectionType) {
if (connectionType === 'wifi') {
networkKind.value = 'wifi';
return;
}
if (connectionType === 'cellular') {
networkKind.value = 'cellular';
return;
}
}
const effectiveType = connection && typeof connection.effectiveType === 'string' ? connection.effectiveType : '';
if (effectiveType) {
if (effectiveType === '4g' || effectiveType === '3g' || effectiveType === '2g' || effectiveType === 'slow-2g') {
networkKind.value = 'cellular';
return;
}
}
if (typeof window !== 'undefined' && window.WeixinJSBridge) {
await new Promise((resolve) => {
try {
window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
const wxType = (res && (res.networkType || res.err_msg || '')).toString().toLowerCase();
if (wxType.includes('wifi')) networkKind.value = 'wifi';
else if (wxType.includes('2g') || wxType.includes('3g') || wxType.includes('4g') || wxType.includes('5g')) networkKind.value = 'cellular';
resolve();
});
} catch (e) {
resolve();
}
});
return;
}
networkKind.value = 'unknown';
};
// 资源探测
const probeVideo = async () => {
const url = videoUrlValue.value;
......@@ -239,7 +182,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
const handleError = (code, message = '') => {
showErrorOverlay.value = true;
showNetworkSpeedOverlay.value = false;
trafficWarnVisible.value = false;
if (networkSpeedTimer) {
clearInterval(networkSpeedTimer);
networkSpeedTimer = null;
......@@ -288,7 +230,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
const showNetworkSpeed = () => {
if (!hasEverPlayed.value) return;
if (showErrorOverlay.value) return;
if (trafficWarnVisible.value) return;
if (showNetworkSpeedOverlay.value) return;
showNetworkSpeedOverlay.value = true;
......@@ -308,63 +249,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
}
};
const isOnWifi = computed(() => networkKind.value === 'wifi');
const isOnCellular = computed(() => networkKind.value === 'cellular');
// 8. 流量警告逻辑
const trafficWarnThresholdBytes = 1000 * 1024 * 1024;
const needTrafficWarn = computed(() => {
if (isOnWifi.value) return false;
if (!isOnCellular.value) return false;
const len = probeInfo.value.content_length;
if (!len) return false;
return len >= trafficWarnThresholdBytes;
});
const openTrafficWarn = async (fromAutoplay) => {
if (trafficWarnAcknowledged.value) return false;
trafficWarnDuringAutoplay = Boolean(fromAutoplay);
if (!probeInfo.value.content_length && !probeLoading.value) {
await probeVideo();
}
if (!needTrafficWarn.value) return false;
trafficWarnVisible.value = true;
hideNetworkSpeed();
return true;
};
const closeTrafficWarn = () => {
trafficWarnVisible.value = false;
trafficWarnDuringAutoplay = false;
};
const requestPlay = async (fromAutoplay) => {
const blocked = await openTrafficWarn(fromAutoplay);
if (blocked) return;
if (useNativePlayer.value) {
tryNativePlay();
return;
}
if (player.value && !player.value.isDisposed()) {
player.value.play().catch(console.warn);
}
};
const confirmTrafficWarn = () => {
trafficWarnAcknowledged.value = true;
closeTrafficWarn();
void requestPlay(trafficWarnDuringAutoplay);
};
const cancelTrafficWarn = () => {
closeTrafficWarn();
};
// 4. 原生播放器逻辑 (iOS微信)
const initNativePlayer = () => {
const videoEl = nativeVideoRef.value;
......@@ -394,28 +278,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
};
const onPlay = () => {
if (!trafficWarnAcknowledged.value) {
if (!probeInfo.value.content_length && isOnCellular.value) {
try {
videoEl.pause();
} catch (e) {
void e;
}
void requestPlay(false);
return;
}
if (needTrafficWarn.value) {
try {
videoEl.pause();
} catch (e) {
void e;
}
trafficWarnVisible.value = true;
hideNetworkSpeed();
return;
}
}
hasEverPlayed.value = true;
hideNetworkSpeed();
};
......@@ -460,11 +322,11 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
};
if (props.autoplay) {
void requestPlay(true);
tryNativePlay();
if (typeof document !== "undefined") {
document.addEventListener(
"WeixinJSBridgeReady",
() => void requestPlay(true),
() => tryNativePlay(),
{ once: true }
);
}
......@@ -553,20 +415,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
});
player.value.on('play', () => {
if (!trafficWarnAcknowledged.value) {
if (!probeInfo.value.content_length && isOnCellular.value) {
player.value.pause();
void requestPlay(false);
return;
}
if (needTrafficWarn.value) {
player.value.pause();
trafficWarnVisible.value = true;
hideNetworkSpeed();
return;
}
}
hasEverPlayed.value = true;
hideNetworkSpeed();
});
......@@ -592,7 +440,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
});
if (props.autoplay) {
void requestPlay(true);
player.value.play().catch(console.warn);
}
}
};
......@@ -607,7 +455,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
retryCount.value++;
showErrorOverlay.value = false;
hideNetworkSpeed();
closeTrafficWarn();
if (useNativePlayer.value) {
const videoEl = nativeVideoRef.value;
......@@ -634,8 +481,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
showErrorOverlay.value = false;
hideNetworkSpeed();
hasEverPlayed.value = false;
trafficWarnAcknowledged.value = false;
closeTrafficWarn();
void probeVideo();
// 如果是原生播放器且 URL 变化，需要手动处理 HLS (如果是非 iOS Safari 环境)
......@@ -646,7 +491,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
});
onMounted(() => {
void detectNetworkKind();
void probeVideo();
if (useNativePlayer.value) {
initNativePlayer();
......@@ -670,7 +514,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
}
hideNetworkSpeed();
closeTrafficWarn();
if (videoRef.value?.$player) {
videoRef.value.$player.dispose();
}
......@@ -686,13 +529,6 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
errorMessage,
showNetworkSpeedOverlay,
networkSpeedText,
trafficWarnVisible,
trafficFileSizeText,
isOnWifi,
isOnCellular,
confirmTrafficWarn,
cancelTrafficWarn,
requestPlay,
retryLoad,
handleVideoJsMounted,
tryNativePlay
......