feat: update

backend/app/http/posts.go

@@ -166,6 +166,9 @@ type PlayUrl struct {
 //	@Bind	user local
 func (ctl *posts) Play(ctx fiber.Ctx, id int64, user *model.Users) (*PlayUrl, error) {
 	log := log.WithField("PlayPostID", strconv.FormatInt(id, 10))
+	// return &PlayUrl{
+	// 	Url: "https://github.com/mediaelement/mediaelement-files/raw/refs/heads/master/big_buck_bunny.mp4",
+	// }, nil
 
 	log.Infof("Fetching play URL for post ID: %d", id)
 	post, err := models.Posts.GetByID(ctx.Context(), id)

backend/frpc.toml

@@ -6,5 +6,5 @@ name = "test-http"
 type = "tcp"
 localIP = "127.0.0.1"
 #localPort = 8088
-localPort = 3000
+localPort = 8088
 remotePort = 1423

frontend/wechat/package.json

@@ -21,7 +21,9 @@
         "vue-icons-plus": "^0.1.8",
         "vue-router": "^4.5.0",
         "wechat-js-sdk": "^1.3.3",
-        "weixin-js-sdk": "^1.6.5"
+        "weixin-js-sdk": "^1.6.5",
+        "xgplayer": "^3.0.22",
+        "xgplayer-mp4": "^3.0.22"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.2",

frontend/wechat/src/hooks/useWxSDK.js

@@ -40,12 +40,12 @@ export function useWxSDK() {
             title: shareInfo.title, // 分享标题
             link: shareInfo.link, // 分享链接，可以不是当前页面，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
             imgUrl: shareInfo.imgUrl,
-            success: function () {
+            success: function (e) {
                 console.log("分享朋友圈成功", e);
                 // 用户确认分享后执行的回调函数
                 onSuccess();
             },
-            cancel: function () {
+            cancel: function (e) {
                 console.log("分享朋友圈取消", e);
                 onCancel();
                 // 用户取消分享后执行的回调函数

frontend/wechat/src/views/ArticleDetail.vue

@@ -1,6 +1,11 @@
 <script setup>
-import Plyr from "plyr";
+import Player, { Events, I18N } from 'xgplayer';
-import "plyr/dist/plyr.css";
+import Mp4Plugin from "xgplayer-mp4";
+import 'xgplayer/dist/index.min.css';
+import ZH from 'xgplayer/es/lang/zh-cn';
+import MobilePreset from 'xgplayer/es/presets/mobile';
+
+
 import { onMounted, onUnmounted, ref } from "vue";
 import { BsChevronLeft } from "vue-icons-plus/bs";
 import { useRoute, useRouter } from "vue-router";
@@ -18,44 +23,116 @@ const videoElement = ref(null);
 
 const mediaLoaded = ref(false);
 
-const initializePlayer = () => {
+// 启用中文
-    if (videoElement.value) {
+I18N.use(ZH)
-        player.value = new Plyr(videoElement.value, {
+
-            controls: [
+
-                "play",
+const initializePlayer = async () => {
-                "progress",
+    if (!videoElement.value) {
-                "current-time",
+        console.error("Video element not found");
-                "duration",
+        return;
-                "settings",
+    }
-                "fullscreen",
+
-            ],
+    try {
-            settings: ["speed"],
+        const { data } = await postApi.play(route.params.id);
-            speed: { selected: 1, options: [0.5, 0.75, 1] },
+
-            autoplay: false,
+        player.value = new Player({
+            // id: 'player',
+            el: videoElement.value,
+            url: data.url,
+            // height: '100%',
+            width: '100%',
+            // marginControls: true,
+            fitVideoSize: 'fixWidth',
+            fluid: true,
+            plugins: [Mp4Plugin],
+            presets: [MobilePreset],
+            playsinline: true,
+            playbackRate: [0.5, 0.75, 1],
+            autoplay: true,
+            videoFillMode: 'contain',
+            mp4plugin: {
+                maxBufferLength: 15,
+                minBufferLength: 5,
+                // reqOptions: {
+                //     mode: 'cors',
+                //     method: 'POST',
+                //     headers: { // 需要带的自定义请求头
+                //         'x-test-header': 'rrrr'
+                //     },
+                // }
+                // ... 其他配置
+            },
+
+            // 'x5-video-player-type': 'h5',
+            // 'x5-video-player-fullscreen': false,
+
+            poster: article.value.head_images[0],
         });
 
-        player.value.on("play", async () => {
+        player.value.on(Events.READY, async () => {
+            await loadVideoSource();
+        })
+
+        player.value.on(Events.PLAY, async () => {
             if (!mediaLoaded.value) {
                 await loadVideoSource();
             }
-        });
+        })
 
-        player.value.on("ended", () => {
+        player.value.on(Events.ENDED, () => {
             mediaLoaded.value = false;
         });
+
+        player.value.on(Events.ERROR, (error) => {
+            alert(`Player失败: ${error.errorCode} ${error.message} mediaError: ${error.mediaError?.code} ${error.mediaError?.message}`);
+        })
+    } catch (error) {
+        console.error("Failed to load video:", error);
+        alert("视频加载失败: " + error.response.data);
     }
+
+    // if (videoElement.value) {
+    //     player.value = new Plyr(videoElement.value, {
+    //         controls: [
+    //             "play",
+    //             "progress",
+    //             "current-time",
+    //             "duration",
+    //             "settings",
+    //             "fullscreen",
+    //         ],
+    //         settings: ["speed"],
+    //         speed: { selected: 1, options: [0.5, 0.75, 1] },
+    //         autoplay: false,
+    //     });
+
+    //     player.value.on("play", async () => {
+    //         if (!mediaLoaded.value) {
+    //             await loadVideoSource();
+    //         }
+    //     });
+
+    //     player.value.on("ended", () => {
+    //         mediaLoaded.value = false;
+    //     });
+    // }
 };
 
 const loadVideoSource = async () => {
     try {
         const { data } = await postApi.play(route.params.id);
-        if (videoElement.value) {
+        mediaLoaded.value = true;
-            mediaLoaded.value = true;
+        player.value.src = data.url;
 
-            videoElement.value.src = data.url;
+
-            await player.value.restart();
+        // if (videoElement.value) {
-            await player.value.play();
+        //     mediaLoaded.value = true;
-        }
+
+        // videoElement.value.src = data.url;
+        // await player.value.restart();
+        // await player.value.play();
+        // }
     } catch (error) {
         console.error("Failed to load video:", error);
         alert("视频加载失败: " + error.response.data);
@@ -80,7 +157,7 @@ const handleBuy = async () => {
                 if (res.err_msg === "get_brand_wcpay_request:ok") {
                     // 支付成功，刷新文章数据
                     fetchArticle();
-                    loadVideoSource();
+                    //TODO: reload media loadVideoSource();
                 } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
                     // 用户取消支付
                     console.log("Payment cancelled");
@@ -111,6 +188,7 @@ const fetchArticle = async () => {
         const { data } = await postApi.show(id);
         article.value = data;
 
+
         // 调用微信 JS SDK 分享接口
         wx.setShareInfo({
             title: article.value.title,
@@ -178,11 +256,12 @@ onUnmounted(() => {
 
         <div class="flex-1">
             <div v-if="article">
-                <video webkit-playsinline playsinline ref="videoElement" :poster="article.head_images[0]"
+                <!-- <video webkit-playsinline playsinline ref="videoElement" :poster="article.head_images[0]"
                     class="w-full aspect-video object-cover plyr-video" preload="none">
                     <source type="video/mp4" />
                     Your browser does not support the video tag.
-                </video>
+                </video> -->
+                <div ref="videoElement" id="player"></div>
 
                 <div v-if="article && !article.bought" class="bg-white border-b border-gray-200">
                     <div class="text-sm bg-orange-500 text-white px-4 py-2">

frontend/wechat/vite.config.js

@@ -16,9 +16,10 @@ export default defineConfig({
         }
     },
     server: {
-        port: 3000,
+	host: '0.0.0.0',
+	allowedHosts: ['mp.jdwan.com'],
+        port: 3001,
         open: true,
-        allowedHosts: [".jdwan.com", "0.0.0.0", "127.0.0.1", "localhost", "10.1.1.108"],
         proxy: {
             '/v1': 'http://localhost:8088',
         }