fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/videoPage/index.vue

@@ -0,0 +1,440 @@
+<template>
+  <div id="VideoPage" ref="videoCom" :class="[radius ? 'br8 over-hidden' : '']">
+    <video-player
+      ref="videoPlayer"
+      class="video-player vjs-custom-skin"
+      :playsinline="true"
+      :options="playerOptions"
+      :webkit-playsinline="true"
+      @ended="onPlayerEnded($event)"
+      @ready="playerReadied($event)"
+      @timeupdate="onPlayerTimeupdate($event)"
+      @play="onPlayerPlay($event)"
+       @pause="onPlayerPause($event)"
+      @fullscreenchange="onDefaultFullScreenchange($event)"
+    />
+  </div>
+</template>
+
+<script>
+import { isAndroid } from '../../assets/js/validate';
+import { mapState } from 'vuex';
+Vue.use(VueVideoPlayer);
+export default {
+    // 组件名称
+    name: 'VideoPage',
+    props: {
+        videoObj: {
+            type: Object,
+            default: () => {}
+        },
+        auto: {
+            type: Boolean,
+            default: () => false
+        },
+        radius: {
+            type: Boolean,
+            default: () => false
+        },
+        aspectRatio: {
+            type: String,
+            default: () => '16:9'
+        },
+        needRecord: {
+            type: Boolean,
+            default: () => true
+        }
+    },
+    // 组件状态值
+    data() {
+        return {
+            playerOptions: {
+                playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0], // 播放速度
+                autoplay: this.auto, // 如果true,浏览器准备好时开始回放。
+                muted: false, // 默认情况下将会消除任何音频。
+                loop: false, // 导致视频一结束就重新开始。
+                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+                language: 'zh-CN',
+                aspectRatio: this.aspectRatio, // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                sources: [
+                    {
+                        type: '', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+                        src: '' // url地址
+                    }
+                ],
+                poster: '', // 你的封面地址
+                notSupportedMessage: this.$t('aqcomponents.videopage.1c7h0m'), // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                controlBar: {
+                    timeDivider: true,
+                    durationDisplay: true,
+                    remainingTimeDisplay: true,
+                    fullscreenToggle: false // 全屏按钮
+                },
+                asked: false
+            },
+            showTip: false,
+            gklog: '0', // 视频观看时长
+            close_icon: 'https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/icon-gaunbi.svg',
+            isFullScreen: false,
+            clickCount: 0,
+            playtime: 0, //时间观看时间
+			stertPlayTime: '' //开始播放的时间
+        };
+    },
+    // 计算属性
+    computed: {
+        currentUrl() {
+            return this.playerOptions.sources[0].src;
+        },
+        player() {
+            return this.$refs.videoPlayer.player;
+        },
+        playerWidth() {
+            const currentVideoDOM = this.$refs.videoPlayer.$el.querySelector('.video-js');
+            return {
+                playerWidth: currentVideoDOM.clientWidth,
+                clickCount: this.clickCount
+            };
+        },
+        ...mapState({
+            userInfo: state => state.user.userInfo
+        })
+    },
+    // 侦听器
+    watch: {
+        videoObj: {
+            handler(newVal, oldVal) {
+                this.gklog = '';
+                if (newVal.type) this.$set(this.playerOptions.sources[0], 'type', newVal.type);
+                this.$set(this.playerOptions.sources[0], 'src', newVal.videoUrl);
+                this.$set(this.playerOptions, 'poster', newVal.img);
+            },
+            immediate: true
+        },
+        currentUrl: {
+            handler(newVal, oldVal) {
+                setTimeout(_ => {
+                    if (this.auto) {
+                        document.querySelector('.vjs-play-control').click();
+                    }
+                }, 100);
+            },
+            deep: true
+        }
+    },
+    /**
+	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+	 */
+    created() {
+    // 判断当前是app还是h5
+        const { isApp, isIOS, isAndroid } = this.$globalData;
+        if (isIOS || isAndroid) {
+            window.appToJSNetStatus = this.appToJSNetStatus;
+            window.AppToJSSaveVideoDuration = this.AppToJSSaveVideoDuration;
+            window.AppToJSVideoBack = this.AppToJSVideoBack;
+        }
+        if (isApp) {
+            // app端，刻意练习，要求全屏
+            if (this.$route.name === 'ExerciseTaskDetails' || this.$route.name === 'ExerciseTaskClockInRecord' || this.$route.name === 'ExerciseTaskClockIn') {
+                this.$set(this.playerOptions.controlBar, 'fullscreenToggle', true);
+            }
+        }
+    },
+    deactivated() {
+        this.$refs.videoPlayer.player.pause();
+    },
+    // 组件方法
+    methods: {
+        addEvent() {
+        },
+        allClick(e) {
+            this.clickCount++;
+        },
+        appToJSNetStatus(data) {
+            const result = +data === 2 ? 'wifi' : data === 1 ? this.$t('aqcomponents.videopage.2p4g36') : this.$t('aqcomponents.videopage.73c556');
+            // 0 无网   2wifi  1移动网络
+            if (result === this.$t('aqcomponents.videopage.2p4g36')) {
+                this.$toast(this.$t('aqcomponents.videopage.7ikbgu'));
+            } else if (result === 'wifi') {
+                this.asked = true;
+            }
+        },
+        // 继续
+        goAhead() {
+            this.$refs.videoPlayer.player.play();
+            this.asked = true;
+            this.showTip = false;
+        },
+        // 暂停
+        pause() {
+            this.$refs.videoPlayer.player.pause();
+            this.showTip = false;
+        },
+        // 查询当前网络状态
+        getNetWorkState() {
+            if (this.$globalData.isAndroid) {
+                if (window.android && typeof window.android.getNetWorkState === 'function') {
+                    const data = window.android.getNetWorkState() + 1;
+                    const result = +data === 2 ? 'wifi' : data === 1 ? this.$t('aqcomponents.videopage.2p4g36') : this.$t('aqcomponents.videopage.73c556');
+                    if (result === this.$t('aqcomponents.videopage.2p4g36')) {
+                        this.$toast(this.$t('aqcomponents.videopage.7ikbgu'));
+                    } else if (result === 'wifi') {
+                        this.asked = true;
+                    }
+                }
+            } else if (this.$globalData.isIOS) {
+                if (window['webkit'] && window.webkit['messageHandlers'] && window.webkit.messageHandlers.videoCheckNet) {
+                    window.webkit.messageHandlers.videoCheckNet.postMessage('');
+                }
+            }
+        },
+        /* 获取视频播放进度 */
+        onPlayerTimeupdate(event) {
+			let currentTime = event.currentTime()
+			const player = this.$refs.videoPlayer.player
+			if (!player.paused() && Math.floor(currentTime) > Math.floor(this.gklog)) {
+				this.playtime++
+				console.log('当前已经看了多少秒', this.playtime, Math.floor(currentTime), Math.floor(this.gklog))
+				if (this.playtime % 10 == 0) {
+					this.gklog = currentTime
+					this.savePersonalWatchRecord1(10)
+				}
+			}
+			this.gklog = currentTime
+			// if (this.gklog === Math.floor(event.cache_.currentTime)) return
+			// this.gklog = parseInt(event.cache_.currentTime)
+			// if (!this.gklog) return
+			// const flag = this.gklog % 10
+			// if (flag === 0) {
+			// 	this.$emit('videoUpdate', this.gklog, 10)
+			// }
+		},
+        // 原生退出全屏
+        AppToJSVideoBack(jsonStr) {
+            const obj = JSON.parse(jsonStr);
+            const { duration = '0' } = obj;
+            // 设置视频进度
+            this.player.currentTime(duration);
+        },
+        // 保存播放进度
+		AppToJSSaveVideoDuration(duration) {
+			this.gklog = duration
+			// this.$emit('videoUpdate', this.gklog, 10)
+			if (this.playtime != 0) {
+				this.savePersonalWatchRecord1(Math.floor(this.playtime % 10))
+				this.playtime = 0
+				this.stertPlayTime = ''
+			}else{
+                this.savePersonalWatchRecord1(0)
+            }
+		},
+        /* 设置视频进度 */
+        playerReadied(player) {
+            if (!this.videoObj.duration) return;
+            if (this.$globalData.isApp || isAndroid()) {
+                this.createFullButton();
+            } else {
+                this.$set(this.playerOptions.controlBar, 'fullscreenToggle', true);
+            }
+            player.currentTime(this.videoObj.duration);
+        },
+        onPlayerPlay() {
+           	console.log('开始播放 onPlayerPlay')
+			if (this.playtime != 0) {
+				this.savePersonalWatchRecord1(Math.floor(this.playtime % 10))
+			}
+			this.stertPlayTime = new Date().getTime()
+			this.playtime = 0
+			this.$sensors.callTrack('playClick', { model_name: this.$t('aqcomponents.videopage.yhj38i'), viedo_name: this.videoObj?.title || '', viedo_id: this.videoObj?.id || '' })
+			this.updateVideoProgress('play')
+			if (this.asked) return
+			this.getNetWorkState()
+        },
+        onPlayerPause(e) {
+			console.log('点击了暂停播放')
+			if (this.playtime != 0) {
+				this.savePersonalWatchRecord1(Math.floor(this.playtime % 10))
+				this.playtime = 0
+				this.stertPlayTime = ''
+			}
+		},
+        onPlayerEnded(e) {
+            this.$emit('videoEnded');
+        },
+        updateVideoProgress() {
+            if (!this.needRecord || !this.judgeEmpty(this.videoObj)) return;
+            const saasId = this.userInfo.saasId;
+            const userId = this.userInfo.id || this.userInfo.userId;
+            const { id = '', watchStatus = '', courseId = '', title = '' } = this.videoObj;
+            // 如果已观看视频，就不执行保存记录
+            if (watchStatus === 1) return;
+            axios.post(`/gateway/course/cozCourseWatchRecord/saveWatchRecordCount`,{
+                    id: '',
+                    saasId,
+                    userId,
+                    duration: '0',
+                    courseId,
+                    courseName: title,
+                    courseDetailId: id
+                }).then(res => {
+                    // 保存成功
+                    this.$emit('updateVideoStatus');
+                }).catch(() => {});
+        },
+        onPlayerFullScreenchange() {
+            if (this.isFullScreen) {
+                this.exitFullscreen();
+                this.isFullScreen = false;
+                return;
+            }
+
+            const { watchStatus = '', videoUrl = '', title = '' } = this.videoObj;
+            if (this.$globalData.isApp && !this.$globalData.isQyWeiXin) {
+                const fullNeed = {
+                    courseName: title,
+                    duration: this.gklog + '',
+                    currentChapter: {
+                        chapterName: title,
+                        chapterNo: '1',
+                        contentAddress: videoUrl,
+                        contentName: title,
+                        contentTime: this.player.duration() + '',
+                        courseChildChapterList: [],
+                        courseMainId: '961682110418128896',
+                        coursePurchaseState: '1',
+                        createdate: '2022-04-18 15:17:03',
+                        id: '962734854079512576',
+                        modifydate: '2022-04-18 15:17:03',
+                        multiPartFlag: '0',
+                        num: '1',
+                        sumContentTime: '8',
+                        duration: this.gklog + ''
+                    },
+                    courseChapterList: [],
+                    isMultiPart: '0',
+                    currentRate: this.player.playbackRate() + '',
+                    creatorMessage: {},
+                    isFollowed: '0',
+                    studyCount: '0',
+                    likeState: '0',
+                    collectState: '0',
+                    type: '0',
+                    courseStudyState: watchStatus
+                };
+                if (
+                    this.$globalData.isIOS && window.webkit
+                ) {
+                    window.webkit.messageHandlers.JSToAppFullScreen.postMessage(fullNeed);
+                    this.player.pause();
+                } else if (
+                    this.$globalData.isAndroid && window.android
+                ) {
+                    window.android.JSToAppFullScreen(JSON.stringify(fullNeed));
+                    this.player.pause();
+                }
+            } else {
+                const playerDom = this.$refs.videoPlayer.$el.querySelector('.video-js');
+                this.launchFullscreen(playerDom);
+                this.isFullScreen = true;
+            }
+        },
+
+        // 判断各种浏览器，找到正确的方法
+        launchFullscreen(element) {
+            if (element.requestFullscreen) {
+                element.requestFullscreen();
+            } else if (element.mozRequestFullScreen) {
+                element.mozRequestFullScreen();
+            } else if (element.webkitRequestFullscreen) {
+                element.webkitRequestFullscreen();
+            } else if (element.msRequestFullscreen) {
+                element.msRequestFullscreen();
+            }
+        },
+        // 判断浏览器种类
+        exitFullscreen() {
+            // 退出视频时暂停播放视频
+            this.$refs.videoPlayer.player.pause();
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
+        },
+        // 创建全屏按钮
+        createFullButton() {
+            const Button = videojs.getComponent('Button');
+            const fullButton = videojs.extend(Button, {
+                constructor: function(player, options) {
+                    Button.apply(this, arguments);
+                    this.addClass('fullscreen-enter');
+                },
+                handleClick: () => {
+                    // 绑定点击事件
+                    this.onPlayerFullScreenchange();
+                },
+                buildCSSClass: function() {
+                    return 'vjs-icon-custombutton vjs-control vjs-button';
+                }
+            });
+            // 注册
+            videojs.registerComponent('fullButton', fullButton);
+            this.$nextTick(() => {
+                // 添加到controlBar中
+                this.player.getChild('controlBar').addChild('fullButton');
+            });
+        },
+        // 自带全屏按钮的点击事件
+        onDefaultFullScreenchange() {
+        }
+    }
+};
+</script>
+<style scoped lang="less">
+#VideoPage {
+  .landScapeY {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 100vw;
+    width: 100vh;
+    height: 100vw;
+    transform: rotate(90deg);
+    transform-origin: 0 0;
+  }
+  .dialog-button {
+    width: 124px;
+    height: 44px;
+    box-sizing: border-box;
+    padding: 14px 46px;
+  }
+  .close-icon {
+    width: 24px;
+    height: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -40px;
+  }
+  .dialog {
+    overflow: visible;
+  }
+  /deep/ .video-js {
+    .fullscreen-enter:before {
+      position: absolute;
+      width: 100%;
+      display: block;
+      height: 100%;
+      content: "";
+      left: 0;
+      top: 0;
+      background-image: url("https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/fullscreen.png");
+      background-size: 20px 20px;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+  }
+}
+</style>

package/plugins/sensors/fhsensors.js

@@ -0,0 +1,84 @@
+import { getStorage } from 'assets/js/storage'
+import i18n from 'assets/vantLang';
+
+function getPlatFormCode() {
+    const userGlobalGist = getStorage({ name: 'userGlobalGist' }) || {};
+    const loginResponseDO = userGlobalGist.loginResponseDO || {};
+    const platformCode = getStorage({ name: 'platformCode' });
+    const isShared = getStorage({ key: 'isTourists', type: 'session' });
+    const userHrefPlatformCode = getStorage({ name: 'userHrefPlatformCode' });
+    const finalPlatformCode = (isShared || userHrefPlatformCode) ? (platformCode || loginResponseDO?.platformCode || '00') : (loginResponseDO?.platformCode || platformCode || '00');
+    return finalPlatformCode; // 00 表示元租户;
+}
+
+function getPlatSaasId() {
+    const saasId = getStorage({ name: 'saasId' });
+    const userInfo = getStorage({ name: 'userInfo' });
+    return userInfo?.saasId || saasId || '000000';// 000000 表示元租户;
+}
+
+export default {
+    initSensorsData() {
+        function isWeiXin() {
+            var ua = window.navigator.userAgent.toLowerCase();
+            if (ua.match(/MicroMessenger/i) == 'micromessenger' && (ua.match(/wxwork/i) != 'wxwork')) {
+                return true;
+            }
+            return false;
+        }
+        function isQYWeiXin() {
+            var ua = window.navigator.userAgent.toLowerCase();
+            if ((ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork')) {
+                return true;
+            }
+            return false;
+        }
+
+        function isIOS() {
+            var ua = window.navigator.userAgent.toLowerCase();
+            if (ua.match(/iphone|ipad|ipod/)) {
+                return true;
+            }
+            return false;
+        }
+
+        function isAndroid() {
+            var ua = window.navigator.userAgent.toLowerCase();
+            if (ua.match(/android/)) {
+                return true;
+            }
+            return false;
+        }
+        const sensors = window['fhronsSensorsAnalytic202402'];
+        const interfaceAddress = `${window.location.origin}/gateway/datareport/behavior/getBehaviorData`;
+        const localTerminal = getStorage({ name: 'terminal', type: 'session' });
+        const terminal = localTerminal ? (localTerminal === 'normal' ? 'WECHAT' : localTerminal.toLowerCase() === 'pub' ? 'PUB' : localTerminal.toLowerCase() === 'app' ? 'APP' : '') : '';
+
+        sensors.initFhSensors({
+            sensorsUrl: interfaceAddress,
+            send_type: 'beacon',
+            show_log: false,
+            viewDuration: 10000
+        });
+        sensors.registerPage({
+            product_name: (function() {
+                if (getPlatFormCode() == '2') {
+                    return i18n.t('api.sesnsor_request.w9jfj8');
+                }
+                return getStorage({ name: 'smPlatformInfoDto' })?.smSaasPlatformDO?.platformName;
+            })(),
+            refer_product_name: (function() {
+                if (isWeiXin()) {
+                    return getStorage({ name: 'smPlatformInfoDto' })?.smSaasPlatformDO?.platformName + i18n.t('applyprocess.examine.qi3cfh');
+                } else if (isQYWeiXin()) {
+                    return getStorage({ name: 'smPlatformInfoDto' })?.smSaasPlatformDO?.platformName + i18n.t('utils.mockdata.unoim4');
+                } else if (isAndroid() || isIOS()) {
+                    return getStorage({ name: 'smPlatformInfoDto' })?.smSaasPlatformDO?.platformName + (terminal || 'APP');
+                }
+                return getStorage({ name: 'smPlatformInfoDto' })?.smSaasPlatformDO?.platformName + (terminal || 'MOBILE_WEB');
+            })(),
+            saas_id: getPlatSaasId(),
+            terminal: terminal || (isAndroid() ? 'Android' : isIOS() ? 'IOS' : isWeiXin() ? 'PUB' : isQYWeiXin() ? 'WECHAT' : 'MOBILE_WEB')
+        });
+    }
+};