eli-video-interview 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 eli-video-interview
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,411 @@
+# 鳄梨科技-AI视频面试web端插件
+
+AI视频面试web端插件是鳄梨科技提供的【AI视频题目+AI视频报告】的服务，致力于用AI解决大规模人力资源问题，此插件需搭配【小程序插件】来使用。
+
+## :sparkles: 特性
+
+- 简单易用
+- 包含的组件有AI视频题目、AI视频报告、视频预览
+- 使用 TypeScript 构建，提供完整的类型定义文件
+
+## :package: 安装
+
+```bash
+// npm
+npm i eli-video-interview --save
+
+// yarn
+yarn add eli-video-interview
+```
+
+## 🔨 配置
+
+```ts
+import { avocadoVideoInterview } from 'eli-video-interview';
+
+const App: React.FC = () => {
+  useEffect(() => {
+    avocadoVideoInterview.init({
+      server_url: '', // 接口域名地址
+      auth_callback: () => new Promise((resolve, reject) => { // 授权认证回调 return Promise
+        resolve({
+          accessToken: '', // 必须返回accessToken为接口授权认证
+          expireTime: 0, // accessToken过期时间（可以不返回）
+        });
+      }),
+    });
+  }, []);
+}
+```
+
+## AI视频题目
+
+AI视频题目组件内置了AI测评题目模版，支持9种题型【普通题、色盲检测、英文字母识别、语言能力、游戏决策-气球、数字记忆、情绪判断、全身素质检测、局部纹身检测】，也可以根据自身需求自定义自由作答题或语言能力题，可自定义引导视频。
+
+### Example
+
+```tsx
+import { AiQuestion, useAiQuestion } from 'eli-video-interview';
+
+const { handleSubmit, handleValues, ...aiQuestionProps } = useAiQuestion({ token });
+
+const handleSave = async () => {
+  const { code, message, data } = await handleSubmit();
+  if (code === 0) { // code === 0: 提交成功
+    console.log({ code, message, data });
+    // 具体业务实现逻辑
+  }
+};
+
+return (
+  <AiQuestion {...aiQuestionProps} />
+)
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 必传 | 默认值 |
+| :--- | :--- | :--- | :--- | :--- |
+| token | - | string | 是 | - |
+| name | 职位名称 | string | 否 | - |
+| historyPatterns | 已有岗位模型，当数据为空时会禁用已有岗位模型切换 | Array&lt;any&gt; | 否 | [] |
+| mediaList | 引导视频 | Array&lt;[MediaList](#medialist)&gt; | 否 | [] |
+
+### AiQuestionInstance
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| handleValues | 获取AI视频题目所以字段值 | () => [AiQuestionValues](#aiquestionvalues) |
+| handleSubmit | 提交AI视频题目 | () => Promise&lt;[AiQuestionSubmitRes](#aiquestionsubmitres)&gt; |
+
+#### MediaList
+
+| 参数 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| url | 视频地址 | string |
+| thumbUrl | 视频图片 | string |
+
+#### AiQuestionValues
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| data | 题目信息 | { name?: string; token?: string; steps: [QuestionModelStep](#questionmodelstep)[] \| undefined; } |
+| media | 引导视频 | { mediaUrl?: string; thumbUrl?: string; } |
+
+#### AiQuestionSubmitRes
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| [code](#业务状态码) | 业务状态码 | number |
+| data | 主体信息 | { token: string; mediaUrl: string; thumbUrl: string; } \| undefined |
+| message | 提示信息 | string |
+
+#### QuestionModelStep
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| name | 题目名称 | string |
+| token | 题目ID | string |
+| type | 题目类型 | number |
+| desc | 题目描述 | string |
+| prepareTime | 准备时长 | number |
+| duration | 回答时长 | number |
+| category | 标签信息 | string[] |
+| [broadcastType](#题目播报类型) | 题目播报类型 | number |
+| [aiSwitch](#题目是否开启ai分析) | 题目是否开启AI分析 | number |
+| aiType | 是否可AI评分，值为2视为是可AI评分题目 | number |
+| weight | 题目权重 | number \| string |
+| [language](#AI分析语种) | 语种 | number |
+| [aiShowType](#题目作答类型) | 题目作答类型 | number |
+| [answerStatus](#题目重复作答状态) | 题目重复作答状态 | number |
+| videoBroadcast | 题目播报类型为视频播报时存储的参数 | [VideoBroadcast](#videobroadcast) |
+| aiAbilities | 题目AI分析参数集合 | [AiAbilityParams](#aiabilityparams)[] |
+
+
+#### VideoBroadcast
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| [videoRetry](#允许重复听题) | 允许重复听题 | number |
+| videoUrl | 视频地址 | string |
+
+#### AiAbilityParams
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| name | AI维度名称 | string |
+| token | AI维度ID | string |
+| [type](#ai维度类型) | AI维度类型 | number |
+| [category](#ai维度分类) | AI维度分类 | number |
+| desc | AI维度描述 | string |
+| weight | AI维度权重 | number \| string |
+| relatedAbilities | 语种所关联的AI维度类型集合 | number[] |
+| extra | AI维度【是否意愿、要点分析】字段值 | string |
+| sort | AI维度排序 | number |
+
+## AI视频报告
+
+AI视频报告组件可根据面试者的答题情况，计算出视频面试得分及单题目的综合评分，您也可以手动调节单题的评分分值，手动调节后会重新计算视频面试得分。
+
+### Example
+
+```tsx
+import React, { FC, useState, useCallback } from 'react';
+import { Box } from 'fbm-ui';
+import { AiReport, VideoPreview, useAiReport } from 'eli-video-interview';
+
+const Report: FC = () => {
+  const token = ''; // 具体业务token
+  const [steps, setSteps] = useState<any[]>([]); // 题目信息
+  const [faceAnalysis, setFaceAnalysis] = useState<any>({}); // 人脸识别信息
+  const [pageStepIndexes, setPageStepIndexes] = useState<number[]>([]); // 具有视频信息的下标集合
+  const [stepIndex, setStepIndex] = useState<number>(0); // 当前题目下标
+
+  const aiReport = useAiReport({
+    token,
+    disabledScore: false,
+    scoreRankIntervals: [],
+    stepToken: steps[pageStepIndexes[stepIndex]]?.token,
+    operableButtons: ['export', 'refresh', 'scoreRank', 'abilities'],
+    onLoad: params => {
+      setSteps(params.steps);
+      setFaceAnalysis(params.faceAnalysis);
+      setPageStepIndexes(params.pageStepIndexes);
+    },
+    onScoreChange: scoreState => {
+      console.log(scoreState);
+    },
+    onStepChange: stepToken => {
+      const index = steps.findIndex(({ token }) => token === stepToken);
+      const stepIndex = pageStepIndexes.findIndex(i => i === index);
+      setStepIndex(stepIndex);
+    },
+    onScoreRankIntervalsChange: scoreRankIntervals => {
+      console.log(scoreRankIntervals);
+    },
+  });
+
+  const handlePrev = useCallback(() => {
+    setStepIndex(stepIndex - 1);
+  }, [stepIndex]);
+
+  const handleNext = useCallback(() => {
+    setStepIndex(stepIndex + 1);
+  }, [stepIndex]);
+
+  return (
+    <Box sx={{ width: '100%', height: '100%', overflow: 'hidden' }}>
+      <Box sx={{ position: 'absolute', left: 100 }}>
+        {steps.length > 0 && pageStepIndexes.length > 0 && (
+          <VideoPreview
+            url={steps[stepIndex].answer.videoUrl}
+            faceAnalysis={faceAnalysis}
+            currentPage={pageStepIndexes[stepIndex] + 1}
+            totalPage={steps.length}
+            disabledPrev={stepIndex === 0}
+            disabledNext={stepIndex === pageStepIndexes.length - 1}
+            onNext={handleNext}
+            onPrev={handlePrev}
+          />
+        )}
+      </Box>
+      <Box sx={{ width: '584px', height: '100%', margin: '0 auto' }}>
+        <AiReport {...aiReport} />
+      </Box>
+    </Box>
+  );
+};
+
+export default Report;
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 必传 | 默认值 |
+| :--- | :--- | :--- | :--- | :--- |
+| token | 订单ID | string | 是 | - |
+| scoreRankIntervals | 排名区间 | [ScoreRankInterval](#scorerankinterval)[] | 否 | - |
+| disabledScore | 禁用调整分值 | boolean | 否 | true |
+| reminderSent | 是否已提醒面试者作答 | boolean | 否 | - |
+| operableButtons | 可操作按钮组 | Array<'export' \| 'refresh' \| 'scoreRank' \| 'abilities' \| 'sendReminder'> | 否 | - |
+| stepToken | 当前选中视频题目token | string | 否 | - |
+| onLoad | 报告数据获取成功后回调事件 | (values: [AiReportLoadedValues](#aireportloadedvalues)) => void | 否 | - |
+| onExportReportClick | 点击导出报告后回调事件 | () => void | 否 | - |
+| onScoreChange | 分值更新时触发回调事件 | (scoreState?: [ScoreManualUpdateState](#scoremanualupdatestate)) => void | 否 | - |
+| onStepChange | 选中视频题更新时触发回调事件 | (stepToken: string) => void | 否 | - |
+| onSendReminderClick | 点击发送提醒后回调事件 | () => void | 否 | - |
+| onScoreRankIntervalsChange | 排名区间更新时触发回调事件 | (scoreRankIntervals?: [ScoreRankIntervals](#scorerankintervals)[]) => void | 否 | - |
+| onScoreRankIntervalsSubmit | 排名区间提交成功后触发回调事件 | (scoreRankIntervals?: [ScoreRankIntervals](#scorerankintervals)[]) => Promise&lt;any&gt; | 否 | - |
+
+### AiReportInstance
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| handleRefresh | 刷新报告数据 | () => void |
+
+#### AiReportLoadedValues
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| faceUrl | 人脸照片 | string |
+| faceAnalysis | 人脸分析（颜值得分、年龄） | [FaceAnalysis](#faceanalysis) |
+| steps | 题目信息 | any[] |
+| pageStepIndexes | 具有视频信息的下标集合 | number[] |
+
+#### FaceAnalysis
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| age | 年龄 | number |
+| beauty | 颜值得分 | number |
+
+#### ScoreRankInterval
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| rank | - | number |
+| scoreRankIntervals | 排名区间 | [ScoreRankIntervals](#scorerankintervals) |
+| score | 排名分数 | [Score](#score) |
+
+#### ScoreRankIntervals
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| startRankProportion | 开始区间比例 | number |
+| endRankProportion | 结束区间比例 | number |
+
+#### Score
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| startScore | 开始区间分数 | number |
+| endScore | 结束区间分数 | number |
+
+#### ScoreManualUpdateState
+
+| 名称 | 说明 | 类型 |
+| :--- | :--- | :--- |
+| flowStepToken | 当前分值的token | string |
+| type | 分值类型（1: 总分；2: ai纬度） | 1 \| 2 |
+| aiAbilityChangeType | 纬度类型，type=2时存在 | number |
+| score | 分值 | number |
+
+## AI视频预览
+
+AI视频预览组件可配合AI视频报告组件使用，展示单题答题者的视频情况。
+
+### Example
+
+```tsx
+import { VideoPreview } from 'eli-video-interview';
+
+// 具体示例请在AI视频报告查看
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 必传 | 默认值 |
+| :--- | :--- | :--- | :--- | :--- |
+| url | 预览视频链接 | string | 是 | - |
+| faceAnalysis | 人脸分析（颜值得分、年龄） | [FaceAnalysis](#faceanalysis) | 否 | - |
+| isShowPageTurning | 是否显示分页 | boolean | 否 | true |
+| currentPage | 当前页数 | number | 否 | 1 |
+| totalPage | 总页数 | number | 否 | 1 |
+| disabledPrev | 禁用上一页按钮 | boolean | 否 | false |
+| disabledNext | 禁用下一页按钮 | boolean | 否 | false |
+| width | 组件宽度 | number \| string | 否 | - |
+| style | 自定义样式 | CSSProperties | 否 | - |
+| onPrev | 点击上一页后回调事件 | () => void | 否 | - |
+| onNext | 点击下一页后回调事件 | () => void | 否 | - |
+
+## 全局类型常量
+
+### 题目作答类型
+
+```json
+1: 自由作答
+2: 跟读
+```
+
+### 题目播报类型
+
+```json
+1: 语音播报
+2: 视频播报
+```
+
+### 题目是否开启AI分析
+
+```json
+1: 开启
+2: 关闭
+```
+
+### 题目重复作答状态
+
+```json
+1: 允许重复作答
+2: 不允许重复作答
+```
+
+### AI分析语种
+
+```json
+2: 普通话
+11: 英文
+12: 日语
+16: 粤语
+```
+
+### AI维度类型
+
+```json
+1: 形象打分
+3: 语意流畅
+4: 保持微笑
+5: 语言丰富
+6: 要点分析
+7: 语速
+8: 是否意愿
+9: 年龄
+10: 颜值
+```
+
+### AI维度分类
+
+```json
+1: 语种
+2: 语意
+3: 表达
+4: 形象
+6: 语言能力
+```
+
+### 允许重复听题
+
+```json
+0: 不允许
+1: 允许
+```
+
+## HTTP状态码
+
+API采用标准HTTP错误码来表示接口的错误:
+
+| 状态码 | 含义 |
+| :--- | :--- |
+| 200 | OK -- 请求成功 |
+| 400 | Bad Request -- 接口请求参数错误. |
+| 401 | Unauthorized -- 认证信息非法. |
+| 403 | Forbidden -- 所访问的资源拒绝访问. |
+| 404 | Not Found -- 访问的资源不存在. |
+| 405 | Method Not Allowed -- 错误的请求Method. |
+| 500 | Internal Server Error -- 服务器内部错误. |
+| 503 | Service Unavailable -- 服务器暂时不可用. |
+
+## 业务状态码
+
+| 状态码 | 含义 |
+| :--- | :--- |
+| 0 | OK -- 请求成功 |
+| 其他code | ERROR -- 请求失败 |

package/esm/assets/icons/free.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/></svg>

package/esm/assets/icons/video.svg

@@ -0,0 +1 @@
+<svg width="51" height="32" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="55.987%" x2="100%" y2="55.987%" id="a"><stop stop-color="#4BB051" offset="0%"/><stop stop-color="#71D376" offset="100%"/></linearGradient></defs><path d="M34 0a4 4 0 014 4v24a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4h30zm16.88 7.172a2 2 0 01.12.683v16.29a2 2 0 01-2.683 1.88l-7-2.546A2 2 0 0140 21.599V10.401a2 2 0 011.317-1.88l7-2.545a2 2 0 012.563 1.196zM16.5 11.069a1 1 0 00-.993.883l-.007.117v8.881a1 1 0 001.44.898l.102-.058 6.782-4.377a1 1 0 00.104-1.603l-.093-.07-6.782-4.504a1 1 0 00-.553-.167z" fill="url(#a)" fill-rule="evenodd"/></svg>

package/esm/components/BigBallSvg/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const BigBallSvg: FC;
+export default BigBallSvg;

package/esm/components/BigBallSvg/index.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './index.module.css';
+var BigBallSvg = function () {
+    return (_jsxs("svg", __assign({ className: styles.waves, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 24 150 28", preserveAspectRatio: "none", shapeRendering: "auto" }, { children: [_jsx("defs", { children: _jsx("path", { id: "gentle-wave", d: "M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" }) }), _jsxs("g", __assign({ className: styles.parallax }, { children: [_jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "0", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "3", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "5", fill: "rgba(59, 203, 120, 0.2)" }), _jsx("use", { xlinkHref: "#gentle-wave", x: "48", y: "7", fill: "rgba(59, 203, 120, 0.2)" })] }))] })));
+};
+export default BigBallSvg;

package/esm/components/BigBallSvg/index.module.css

@@ -0,0 +1,37 @@
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0); }
+  100% {
+    transform: translate3d(85px, 0, 0); }
+}
+
+.waves {
+  position: absolute;
+  bottom: 0;
+  width: 200%;
+  height: 50%;
+}
+
+.parallax > use {
+  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+}
+
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+}
+
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+}
+
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+}
+
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+}

package/esm/components/Charts/Chart.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ChartProps } from './interface';
+declare const Chart: FC<ChartProps>;
+export default Chart;

package/esm/components/Charts/Chart.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import echarts from '@avocadoui/echarts';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { theme } from './const';
+var Chart = function (_a) {
+    var options = _a.options;
+    var target = useRef(null);
+    useEffect(function () {
+        echarts.registerTheme('eli', theme);
+        var chart = echarts.init(target.current, 'eli', { devicePixelRatio: 2 });
+        chart.setOption(options);
+        var animationFrameID;
+        var ro = new ResizeObserver(function (entries) {
+            entries.forEach(function (_a) {
+                var t = _a.target;
+                var instance = echarts.getInstanceByDom(t);
+                if (instance) {
+                    animationFrameID = window.requestAnimationFrame(function () {
+                        instance.resize();
+                    });
+                }
+            });
+        });
+        if (ro)
+            ro.observe(target.current);
+        return function () {
+            if (animationFrameID)
+                window.cancelAnimationFrame(animationFrameID);
+            ro.disconnect();
+        };
+    }, [options]);
+    return (_jsx("div", { ref: target, style: {
+            width: '100%',
+            height: '100%',
+        } }));
+};
+export default Chart;