Merge branch 'dev_aliyun' of https://bdgit.educoder.net/Hjqreturn/educoder into dev_chen

app/services/create_watch_video_service.rb

@@ -38,9 +38,9 @@ class CreateWatchVideoService < ApplicationService
         end
       else
         # 开始播放时记录一次
-        if params[:course_video_id].present?
+        if params[:course_id].present?
           # 课堂视频
-          course_video = CourseVideo.find(params[:course_video_id])
+          course_video = CourseVideo.find_by(video_id: params[:video_id], course_id: params[:course_id])
           watch_course_video = WatchCourseVideo.find_or_initialize_by(course_video_id: course_video.id, user_id: user.id) do |d|
             d.start_at = current_time
             d.duration = params[:duration]
@@ -52,7 +52,7 @@ class CreateWatchVideoService < ApplicationService
           watch_course_video.save! unless watch_course_video.persisted?
         else
           # 非课堂视频
-          video = Video.find_by(params[:video_id])
+          video = Video.find(params[:video_id])
           watch_video_history = build_video_log(current_time, video.id)
           watch_video_history.save!
         end

public/react/src/modules/courses/Video/Video.js

@@ -13,6 +13,7 @@ import VideoPanel from './video-play'
 import './video.css';
 import '../../user/usersInfo/video/InfosVideo.css'
 import axios from 'axios';
+import { logWatchHistory } from "../../../services/video-service";
 
 const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
 const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
@@ -70,7 +71,6 @@ class Video extends Component {
     }
   }
 
-
   // 编辑成功后回调的方法
   editSuccess = () => {
     this.props.showNotification("视频信息修改成功!");
@@ -118,8 +118,6 @@ class Video extends Component {
         _clipboard = null;
       }
     } else {
-      // videoEl.current && videoEl.current.play()
-
       setTimeout(() => {
         if (!_clipboard) {
           _clipboard = new ClipboardJS('.copybtn');
@@ -224,7 +222,7 @@ class Video extends Component {
           className="showVideoModal"
           width={800 - 1}
         >
-          {videoId && <VideoPanel src={videoId.file_url} />}
+          {videoId && <VideoPanel src={videoId.file_url} videoId={videoId.videoId} courseId={CourseId} logWatchHistory={logWatchHistory} />}
 
           <div className="df copyLine">
             <Input value={_inputValue}

public/react/src/modules/courses/Video/video-play/flv-player.jsx

@@ -1,37 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-
-export default ({ url }) => {
-  const ref = useRef()
-
-  useEffect(() => {
-    let player = null
-    if (window.flvjs.isSupported) {
-      player = window.flvjs.createPlayer({
-        type: 'flv',
-        volume: 0.8,
-        cors: true,
-        url,
-        muted: false
-      })
-
-      if (ref.current) {
-        player.attachMediaElement(ref.current)
-        player.load()
-        player.play()
-      }
-    }
-    return () => {
-      if (player) {
-        player.unload()
-        player.pause()
-        player.destroy()
-        player = null
-      }
-    }
-
-  }, [url, ref.current])
-
-  return (
-    <video ref={ref} controls autoPlay={true} muted={false} className="flv-player"></video>
-  )
-}

public/react/src/modules/courses/Video/video-play/index.jsx

@@ -1,18 +1,139 @@
-import React, { Fragment } from 'react'
+import React, { useRef, useEffect, useCallback } from 'react'
-import ReactFlvPlayer from './flv-player'
+
+const regex = /(android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini)/i
+//接口文档 https://www.showdoc.cc/educoder?page_id=4029884447803706
+export default ({ src, videoId, logWatchHistory, courseId = null }) => {
 
-export default ({ src }) => {
   const suf = src.split('.').pop()
   const isFlv = suf === 'flv'
-  return (
+  const el = useRef()
-    <Fragment>
+
-      {
+  const deviceMatch = navigator.userAgent.toLowerCase().match(regex)
-        isFlv ? <ReactFlvPlayer url={src} isMuted={true} /> : <video src={src} controls autoPlay={true} controlsList="nodownload">
+  const device = deviceMatch ? deviceMatch[0] : 'pc'
-          <source type={`video/${suf}`} src={src} />
+
-          您的浏览器不支持 video 标签。
+  let totalDuration = 0
-    </video>
+  let totalTimePlayed = 0
+  let sumTimePlayed = 0
+  let lastUpdatedTime = 0
+  let lastEffectUpdatedTime = 0
+  let logId = null
+  let initLog = false
+  let timeTick = 20 //记录频率 默认20s
+  let logCount = 1
+
+  const log = useCallback((callback) => {
+    let params = {}
+    if (logId) {
+      params['log_id'] = logId
+      params['watch_duration'] = totalTimePlayed //当前观看视频时长，拖放进度条，重复的视频片段观看时，不会把重复的时长累积进来，最大时长是视频的总时长
+      params['total_duration'] = sumTimePlayed //累计观看视频时长，拖放进度条，重复的视频片段观看时，重复观看时长要累积进来
+    } else {
+      if (courseId) {
+        params['course_video_id'] = videoId
+      } else {
+        params['video_id'] = videoId
       }
-    </Fragment>
+      params['duration'] = totalDuration
+      params['device'] = device
+    }
+    async function getLogId() {
+      let id = await logWatchHistory(params)
+      logId = id
+      if (callback) {
+        callback()
+      }
+    }
+    getLogId()
+  }, [videoId, courseId])
+
+  useEffect(() => {
+    let player = null
+    if (window.flvjs.isSupported && isFlv) {
+      player = window.flvjs.createPlayer({
+        type: 'flv',
+        volume: 0.8,
+        cors: true,
+        url: src,
+        muted: false
+      })
 
+      if (el.current) {
+        player.attachMediaElement(el.current)
+        player.load()
+      }
+    } else {
+      el.current.setAttribute('src', src)
+    }
+    return () => {
+      if (player) {
+        player.unload()
+        player.pause()
+        player.destroy()
+        player = null
+      }
+    }
+  }, [el, isFlv, src])
+
+  useEffect(() => {
+
+    function onPlay() {
+      if (!initLog) {
+        initLog = true
+        log()
+      }
+    }
+
+    async function onEnded() {
+      log(() => {
+        logId = null
+        logCount = 1
+        totalTimePlayed = 0
+        lastUpdatedTime = 0
+        sumTimePlayed = 0
+        initLog = false
+        lastEffectUpdatedTime = 0
+      })
+    }
+
+    function onTimeupdate() {
+      let newTime = el.current.currentTime
+      let timeDiff = newTime - lastUpdatedTime
+      let effectTimeDiff = newTime - lastEffectUpdatedTime
+      if (effectTimeDiff > 0) {
+        totalTimePlayed += effectTimeDiff
+        lastEffectUpdatedTime = newTime
+      }
+      sumTimePlayed += Math.abs(timeDiff)
+      lastUpdatedTime = newTime
+
+      if (sumTimePlayed - logCount * timeTick >= 0) {
+        logCount++
+        log()
+      }
+    }
+
+    function onCanPlay() {
+      totalDuration = el.current.duration
+      if (totalDuration <= 20) {
+        timeTick = totalDuration / 3
+      }
+      el.current.addEventListener('play', onPlay)
+    }
+
+    el.current.addEventListener('canplay', onCanPlay)
+    el.current.addEventListener('ended', onEnded)
+
+    el.current.addEventListener('timeupdate', onTimeupdate)
+    return () => {
+      el.current.removeEventListener('canplay', onCanPlay)
+      el.current.removeEventListener('play', onPlay)
+      el.current.removeEventListener('ended', onEnded)
+      el.current.removeEventListener('timeupdate', onTimeupdate)
+    }
+  }, [el, src])
+
+
+  return (
+    <video ref={el} controls autoPlay={false} controlsList="nodownload" muted={false} />
   )
 }

public/react/src/modules/user/usersInfo/common/HeadlessModal.js

@@ -1,20 +1,12 @@
-import React, { useState, useEffect, useContext, useRef, memo } from 'react';
+import React, { useContext } from 'react';
-import {Link} from 'react-router-dom';
 
-import { getUrl2, isDev, ThemeContext } from 'educoder'
+import { ThemeContext } from 'educoder'
 import { Modal } from 'antd'
 
 
 function HeadlessModal(props) {
-    // const [ visible, setVisible ] = useState(false)
     const theme = useContext(ThemeContext);
-    const { category, visible, setVisible, className, width } = props;
+    const { visible, setVisible, className, width } = props;
-    
-    
-    useEffect(() => {
-
-    }, [])
-
     return (
         <Modal
             visible={visible}

public/react/src/modules/user/usersInfo/video/InfosVideo.js

@@ -10,6 +10,7 @@ import HeadlessModal from '../common/HeadlessModal'
 
 import ClipboardJS from 'clipboard'
 import VideoPlay from '../../../courses/Video/video-play';
+import { logWatchHistory } from '../../../../services/video-service';
 
 function useModal(initValue) {
     const [visible, setVisible] = useState(initValue)
@@ -267,7 +268,7 @@ function InfoVideo(props) {
                 className="showVideoModal"
                 width={800 - 1}
             >
-                {videoModalObj.visible && <VideoPlay src={videoId.file_url} />}
+                {videoModalObj.visible && <VideoPlay src={videoId.file_url} videoId={videoId.videoId} logWatchHistory={logWatchHistory} />}
                 <div className="df copyLine">
                     <Input value={_inputValue}
                         className="dark"

public/react/src/services/video-service.js

@@ -0,0 +1,11 @@
+import axios from 'axios'
+
+export async function logWatchHistory(params) {
+  try {
+    const response = await axios.post('/watch_video_histories.json', params)
+    return response.data.log_id
+  } catch (error) {
+    console.log(error)
+  }
+  return 0
+}