Commit 995f016f authored by Chen Jiping's avatar Chen Jiping

feat:完成部分样式开发

parent 7f67d0ae
......@@ -12,6 +12,20 @@
line-height: 30px;
}
.upload-container {
width: 300px;
height: 100px;
position: relative;
border-radius: 2px;
border: 1px solid #dcdfe6;
line-height: 100px;
margin: 10px;
text-align: center;
display:flex;
align-items:center;
justify-content:center;
}
.hide-fileinput {
position: absolute;
top: 0px;
......@@ -21,3 +35,18 @@
opacity: 0;
cursor: pointer;
}
.image {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
display: none;
}
.stu-image {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
display: none;
}
\ No newline at end of file
......@@ -23,6 +23,12 @@
</div>
<div class="panel-body">
<form class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="video" class="col-sm-2 control-label">标题</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="title" placeholder="标题" value="请同学们根据视频复述课文">
</div>
</div>
<div class="form-group">
<label for="video" class="col-sm-2 control-label">视频</label>
<div class="col-sm-2">
......@@ -31,7 +37,22 @@
<video class="video" id="showVideo" src="" controls="controls"></video>
</div>
</div>
<div class="form-group">
<label for="video" class="col-sm-2 control-label">关键词</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="keyWord" placeholder="多个关键词用','隔开,例:word,test">
</div>
</div>
<div class="form-group">
<label for="video" class="col-sm-2 control-label">学生端展示图片</label>
<div class="col-sm-2">
<div class="upload-container">
<div class="unimage">上传图片</div>
<img class="stu-image" src="" id='stuImage'>
<input class="hide-fileinput" type="file" name="stuImage" accept="image/*">
</div>
</div>
</div>
</form>
</div>
</div>
......
......@@ -26,9 +26,11 @@ class FormView {
initDefaultData() {
if (!this.data) {
this.data = {};
this.data = {title:'请同学们根据视频复述课文'};
this.save();
}
}
initView() {
......@@ -38,6 +40,15 @@ class FormView {
_dom.find(".video").attr("src", this.data.video).show();
}
if(this.data.stuImage){
_dom.find(".stu-image").attr("src", this.data.stuImage).show();
}
$("#keyWord").val(this.data.keyWord);
$("#title").val(this.data.title);
const _this = this;
_dom.find("[name='video']").change(function () {
......@@ -55,6 +66,32 @@ class FormView {
}
});
});
_dom.find("[name='stuImage']").change(function () {
const files = $(this).prop('files');
$(this).attr("disabled", true);
$(this).prev().text("上传中...");
commonUploadFile(files[0], (data) => {
$(this).attr("disabled", false);
$(this).prev().text("上传图片");
if (data) {
const d = JSON.parse(data);
$("#stuImage").attr("src", d.url).show();
_this.data.stuImage = d.url;
_this.save();
}
});
});
$("#keyWord").change(function(){
_this.data.keyWord = $(this).val();
_this.save();
})
$("#title").change(function(){
_this.data.title = $(this).val();
_this.save();
});
}
saveTmsp = null;
......
......@@ -57,7 +57,7 @@ body {
}
.video-container {
position: relative;
position: absolute;
width: 60%;
height: 50%;
left: 20%;
......@@ -146,7 +146,13 @@ body {
background-color: #3e9b31;
}
#video {
.progress-bar-no-ani{
-webkit-transition: width 0s ease;
-o-transition: width 0s ease;
transition: width 0s ease;
}
.video {
width: 100%;
height: 100%;
}
......@@ -218,6 +224,32 @@ body {
100% { box-shadow: 0px 0px 0px 0px #e7cc97; transform: scale(.99, .99); }
}
.recorder-tips {
position: absolute;
width: 310%;
height: 100px;
background: #3e9e33;
border-radius: 15px;
text-align: center;
color: #fff;
line-height: 100px;
font-size: 25px;
top: -100px;
left: -105%;
}
.triangle-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #3e9e33;
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: -18px;
}
.recorder-play-icon{
width: 100px;
height: 100px;
......@@ -277,6 +309,7 @@ body {
right: 0px;
bottom: 0px;
display: none;
z-index: 1000;
}
.jinmao-bottom {
......@@ -295,3 +328,147 @@ body {
right: 20px;
width: 20%;
}
.my-btn{
border: solid 6px #b17d5a;
background: #e7cc97;
border-radius: 21px;
color: #fff;
cursor: pointer;
}
.sent-btn {
text-align: center;
height: 65px;
line-height: 55px;
width: 240px;
font-size: 30px;
font-weight: bold;
position: absolute;
right: 10%;
bottom: 7%;
box-shadow: 0px 34px 17px -25px #e7cc97;
}
.back-btn {
text-align: center;
height: 65px;
line-height: 55px;
width: 120px;
font-size: 30px;
font-weight: bold;
position: absolute;
left: 9%;
bottom: 7%;
box-shadow: 0px 34px 17px -25px #e7cc97;
display: none;
}
.submit-btn {
text-align: center;
height: 65px;
line-height: 55px;
width: 240px;
font-size: 30px;
font-weight: bold;
position: absolute;
right: 10%;
bottom: 7%;
box-shadow: 0px 34px 17px -25px #e7cc97;
display: none;
}
.back-tips {
position: absolute;
width: 25%;
height: 100px;
background: #3e9e33;
border-radius: 15px;
text-align: center;
color: #fff;
line-height: 100px;
font-size: 25px;
bottom: 14%;
left: 4%;
}
.mask{
width: 100%;
height: 100%;
z-index: 99999;
position: fixed;
filter: Alpha(opacity=60);
background-color: black;
top: 0;
left: 0;
opacity: 0.6
}
.dialog-submit{
position: relative;
width: 100%;
height: 400px;
}
.clip{
position: absolute;
left: 17%;
margin-top: -51px;
}
.submit {
position: absolute;
font-family: HiraKakuStd-W8;
font-size: 52px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #ffffff;
margin-left: 43%;
z-index: 1;
}
.warning{
font-family: PingFangSC;
font-size: 48px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
text-align: center;
margin-top: 40px;
}
.my-btn2{
border-radius: 20px;
background-color: #f1e4c2;
width: 300px;
height: 80px;
font-family: PingFangSC;
font-size: 40px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 80px;
letter-spacing: normal;
text-align: center;
color: #3e9e33;
cursor: pointer;
box-shadow: 0px 5px 12px 5px #0a6500;
margin-left: 25%;
}
.submit-press {
animation: submit-press .1s forwards;
}
@keyframes submit-press {
100% { box-shadow: 0px 0px 0px 0px #0a6500; transform: scale(.99, .99); }
}
\ No newline at end of file
......@@ -16,12 +16,13 @@
<body>
<div class="content">
<div role="tea" id="tea">
<div style="position: absolute; top: 25px; left: 10%; z-index: 99;">
<span class="title">请同学们根据视频复述课文</span>
</div>
<div role="tea" id="tea">
<div class="video-container">
<video src=""></video>
<video class="video" src=""></video>
</div>
<div class="play-speed-content">
<p class="speed" style="font-size: 20px; line-height: 40px;">倍数</p>
......@@ -36,7 +37,7 @@
<span class="progress-label cur-time">00:00</span>&nbsp;&nbsp;
</div>
<div class="progress my-progress">
<div class="progress-bar my-progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<div class="progress-bar my-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
......@@ -53,16 +54,16 @@
<img src="../lib/images/recorder-pasue.png" class="recorder-pause">
</div>
</div>
<div class="my-btn sent-btn">
Sent
</div>
</div>
<div role="stu" id="stu">
<div id="exercise" style="display: none;">
<div style="position: absolute; top: 25px; left: 10%; z-index: 99;">
<span class="title">请同学们根据视频复述课文</span>
</div>
<div class="video-container">
<video id="video" src=""></video>
<video id="video" class="video" src=""></video>
</div>
<div class="play-speed-content">
<p class="speed" style="font-size: 20px; line-height: 40px;">倍数</p>
......@@ -74,19 +75,34 @@
</div>
<div class="progress-div">
<div class="progress-label-left">
<span class="progress-label cur-time">00:00</span>&nbsp;&nbsp;
<span class="progress-label cur-time" id="curTime">00:00</span>&nbsp;&nbsp;
</div>
<div class="progress my-progress">
<div class="progress-bar my-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<div class="progress-bar my-progress-bar progress-bar-no-ani" role="progressbar" id="progressbar" data-value='0' style="width: 0%;">
</div>
<div class="progress-bar progress-bar-danger progress-bar-no-ani" id="tempProgressbar" data-value='0' style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
<div class=" progress-label-right">
&nbsp;&nbsp;<span class="progress-label total-time">00:00</span>
&nbsp;&nbsp;<span class="progress-label total-time" id="totalTime">00:00</span>
</div>
</div>
<div class="back-tips" style="display: none;">
点击删除最新录制的一段录音
<div class="triangle-down" style="left: 30%;"></div>
</div>
<div class="my-btn back-btn" id="backBtn">
<img style="width: 40%; height: auto;" src="../lib/images/back.png">
</div>
<div class="video-play-bg">
<img src="../lib/images/play-circle.png" id='ani' class="video-play-ani">
<div class="recorder-tips">
点击开始录制,再次点击可暂停
<div class="triangle-down"></div>
</div>
<div class="recorder-play-icon">
<div class="control recorder-play">
......@@ -94,16 +110,52 @@
<img src="../lib/images/recorder-pasue.png" class="recorder-pause">
</div>
</div>
<div class="my-btn submit-btn" id="submitBtn">
Submit
</div>
</div>
<div class="hello-container">
<img id="stuimage" src="" alt="" style="object-fit: cover; width: 100%; height: 100%;">
<img id="stuimage" src="" alt="" style="object-fit: cover; width: 100%; height: 100%; ">
<div class="jinmao-bottom">
<img class="jinmao-logo" src="../lib/images/logo.png" alt="">
</div>
</div>
</div>
</div>
<div class="modal fade" id='submitDialog' aria-hidden="false" data-backdrop="static" >
<div class="modal-dialog modal-lg" style="width:60%; margin: 18% auto;">
<div class="modal-content" style="border-radius: 36px;background-color: #3e9e33">
<div class="modal-body" style="padding: 0px;">
<div class="dialog-submit">
<span class="submit">Submit</span>
<img src="../lib/images/clip.png" class="clip">
<table style="width: 100%; height: 84%; position: relative; top: 16%;">
<tr>
<td colspan="2">
<h1 class="warning">本题只能提交一次,确定交卷吗?</h1>
</td>
</tr>
<tr>
<td>
<div class="my-btn2" id="continueBtn">
继续录制
</div>
</td>
<td>
<div class="my-btn2" id="confirmBtn">
确定
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./index.js"></script>
<script src="./util.js"></script>
</html>
\ No newline at end of file
......@@ -6,7 +6,7 @@ window.courseware.getData(callback,key); //用于获取数据
window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调用此方法,用于隐藏遮罩层
*/
var cw = window.courseware;
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "JM-07";
......@@ -15,10 +15,35 @@ var USERINFO = null;
var ROLE = null;
var defaultData = '{"stuImage":"http://staging-teach.cdn.ireadabc.com/0623b0c0d8b1da234f64959a8826e113.jpg","video":"http://staging-teach.cdn.ireadabc.com/bcb8b751b98371ea71956a1d1a447956.mp4"}';
// 维护切面数据
var teaUserAspect = {
isSendQuestion: false, // 是否是答题环节
bindData: null
};
var stuUserAspect = {
speed: 1,//播放速度
videoCurTime: 0,//播放进度
recorderScoreObj: null, // 这块只记录一个最好的成绩
recorderArr: [],//录音记录
isPause: true,
firstClickRecorder: true,
firstClickCancel: true,
};
//进度条刷新是否启动
var started = false;
var tempRecorder;
$(function () {
window.courseware.getData(function (data) {
//初始化监听事件
initListener();
USERINFO = window.air.airClassInfo.user;
ROLE = USERINFO.classRole;
......@@ -56,21 +81,24 @@ class PlayView {
initDefaultData() {
if (!this.data) {
this.data = {};
this.data = JSON.parse(defaultData);
}
console.log(this.data);
}
initData() {
teaUserAspect.bindData = this.data;
}
initView() {
if (ROLE == "tea") {
$("[role='tea']").show(); // 老师特定的页面
//绑定sent事件
bindSentBtn();
}
else {
......@@ -78,22 +106,27 @@ class PlayView {
bindSpeedBtn();
//$(".hello-container").show();
bindBackBtn();
$("#exercise").show();
bindSubmitBtn();
// 学生特定的页面
$("[role='stu']").show();
bindContinueBtnBtn();
bindConfirmBtn();
$(".hello-container").show();
// 学生特定的页面
$("[role='stu']").show();
}
if (this.data.video) {
$("#video").attr("src", this.data.video);
$(".video").attr("src", this.data.video);
const video = $("#video")[0];
let i = setInterval(() => {
if(video.readyState > 0){
if (video.readyState > 0) {
let totalTime = getTimeStr(video.duration);
$(".total-time").empty();
......@@ -104,10 +137,15 @@ class PlayView {
}
if (this.data.stuImage) {
$("#stuimage").attr("src", this.data.stuImage);
}
if(this.data.title){
$(".title").empty();
$(".title").append(this.data.title);
}
}
}
// 视频播放按钮
......@@ -139,36 +177,124 @@ function bindVideoPlayBtn() {
function bindRecorderBtn() {
bindPressAnimation($(".recorder-play-icon"));
$("#video")[0].addEventListener('ended', function () {
// 监听视频播放结束
$(".recorder-play-icon .recorder-pause").hide();
$(".recorder-play-icon .control").addClass("recorder-play");
stuUserAspect.isPause = true;
if (started) {
clearInterval(started);
}
});
$(".recorder-play-icon").click(function () {
if (stuUserAspect.firstClickRecorder) {
$(".recorder-tips").hide();
stuUserAspect.firstClickRecorder = false;
}
const control = $(".recorder-play-icon .control");
const status_ = control.hasClass("recorder-play");
//开始录制
if (status_) {
//隐藏按钮
$("#backBtn").hide();
$(".back-tips").hide();
//获取临时进度条的进度
let tempProgressValue = $("#tempProgressbar").attr("data-value");
let progressValue = $("#progressbar").attr("data-value");
let newValue = parseFloat(progressValue) + parseFloat(tempProgressValue);
console.log(newValue);
//绘制滚动条
drawProgress( $("#progressbar"), newValue);
drawProgress( $("#tempProgressbar"), 0);
control.removeClass("recorder-play");
$(".recorder-play-icon .recorder-pause").show();
//当前时间
let startTime = $("#video")[0].currentTime;
tempRecorder = {
startTime: startTime,
endTime: startTime
}
$("#video")[0].play();
stuUserAspect.isPause = false;
//刷新进度条
refreshProgress();
} else {
$(".recorder-play-icon .recorder-pause").hide();
control.addClass("recorder-play");
$("#video")[0].pause();
let curTime = $("#video")[0].currentTime;
tempRecorder.endTime = curTime;
if (started) {
clearInterval(started);
}
//录完后,显示撤销按钮
if (stuUserAspect.firstClickCancel) {
$(".back-tips").show();
}
$("#backBtn").show();
$("#submitBtn").show();
//将当前时间保存到切片中
stuUserAspect.curTime = curTime;
stuUserAspect.isPause = true;
stuUserAspect.recorderArr.push(tempRecorder);
//保存切片
cw.storeAspect(stuUserAspect);
}
});
}
// 绑定点击效果
function bindPressAnimation(_dom) {
function bindPressAnimation(_dom, cssName = null) {
let css = 'press';
if(cssName){
css = cssName;
}
_dom.mousedown(function () {
$(this).addClass("press");
$(this).addClass(css);
}).mouseup(function () {
$(this).removeClass("press");
$(this).removeClass(css);
}).mouseout(function () {
$(this).removeClass("press");
$(this).removeClass(css);
})
_dom.on("touchstart", function (e) {
e.preventDefault();
$(this).addClass("press");
$(this).addClass(css);
}).on("touchend", function (e) {
e.preventDefault();
$(this).removeClass("press");
$(this).removeClass(css);
})
}
......@@ -186,7 +312,17 @@ function getTimeStr(time) {
return timeStr;
}
function bindSpeedBtn(){
function bindSpeedBtn() {
$.each($("#exercise").find(".speed-choice"), function (i, item) {
let speed = $(item).attr("data-speed");
if (speed == stuUserAspect.speed) {
$(item).addClass('speed-active');
return;
}
});
$(".speed-choice").click(function () {
$(".speed-choice").removeClass('speed-active');
......@@ -196,10 +332,144 @@ function bindSpeedBtn(){
const video = $("#video")[0];
let speed = $(this).attr('data-speed');
stuUserAspect.speed = speed;
if(video){
if (video) {
video.playbackRate = speed;
}
//保存切片
cw.storeAspect(stuUserAspect);
});
}
function bindSentBtn() {
bindPressAnimation($(".sent-btn"));
$(".sent-btn").click(function () {
//设置已经发题
teaUserAspect.isSendQuestion = true;
$(this).hide();
cw.sendEvent('sendQuestion', teaUserAspect);
});
}
function initListener() {
cw.onEvent('sendQuestion', (data, next) => {
if (ROLE == "tea") {
} else {
stuUserAspect.currentWordIndex = data.currentWordIndex;
const bindData = data.bindData;
$(".hello-container").hide();
$("#exercise").show();
}
next();
});
}
function bindBackBtn() {
const backBtn = $("#backBtn");
bindPressAnimation(backBtn);
backBtn.click(function () {
if (stuUserAspect.firstClickCancel) {
$(".back-tips").hide();
stuUserAspect.firstClickCancel = false;
}
var recorder = stuUserAspect.recorderArr.pop();
if (recorder) {
const video = $("#video")[0];
//视频时间回滚
video.currentTime = recorder.startTime;
$("#curTime").empty();
$("#curTime").append(getTimeStr(video.currentTime));
//重新绘画进度条
drawProgress($("#tempProgressbar"), 0);
}
$(this).hide();
})
}
function bindSubmitBtn(){
const submitBtn = $("#submitBtn");
bindPressAnimation(submitBtn);
submitBtn.click(function(){
$("#submitDialog").modal('show');
});
}
/**
* 刷新进度条
*/
function refreshProgress() {
started = setInterval(() => {
if (stuUserAspect.isPause) {
return;
}
const video = $("#video")[0];
let curTime = video.currentTime;
let duration = curTime - tempRecorder.startTime;
$("#curTime").empty();
$("#curTime").append(getTimeStr(curTime))
drawProgress($("#tempProgressbar"), duration);
}, 100);
}
function drawProgress(progressbar, duration) {
const video = $("#video")[0];
let totalTime = video.duration;
let progress = Math.floor(duration / totalTime * 100 * 100) / 100;
progressbar.attr('data-value', progress);
progressbar.css("width", progress + "%");
}
/**
* 继续录制操作
*/
function bindContinueBtnBtn(){
const continueBtn = $("#continueBtn");
bindPressAnimation(continueBtn, 'submit-press');
continueBtn.click(function(){
$("#submitDialog").modal('hide');
})
}
/**
* 确诊提交事件
*/
function bindConfirmBtn(){
const confirmBtn = $("#confirmBtn");
bindPressAnimation(confirmBtn, 'submit-press');
confirmBtn.click(function(){
$("#submitDialog").modal('hide');
})
}
function hideMask(){
$('div.mask').remove();
}
function showMask(){
var str = '';
str += '<div class="mask">';
str += '</div>';
$("body").append(str);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment