Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_spelling
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
ww_spelling
Commits
a4d93283
Commit
a4d93283
authored
Oct 08, 2019
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add upload-video
parent
d8b62a10
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
546 additions
and
64 deletions
+546
-64
app.module.ts
src/app/app.module.ts
+6
-0
upload-video.component.html
src/app/common/upload-video/upload-video.component.html
+95
-0
upload-video.component.scss
src/app/common/upload-video/upload-video.component.scss
+130
-0
upload-video.component.ts
src/app/common/upload-video/upload-video.component.ts
+201
-0
resource.pipe.ts
src/app/pipes/resource.pipe.ts
+28
-0
time.pipe.ts
src/app/pipes/time.pipe.ts
+19
-0
video-not-upload.jpg
src/assets/default/video-not-upload.jpg
+0
-0
index.html
src/index.html
+63
-63
tslint.json
tslint.json
+4
-1
No files found.
src/app/app.module.ts
View file @
a4d93283
...
@@ -21,6 +21,9 @@ import { registerLocaleData } from '@angular/common';
...
@@ -21,6 +21,9 @@ import { registerLocaleData } from '@angular/common';
import
zh
from
'
@angular/common/locales/zh
'
;
import
zh
from
'
@angular/common/locales/zh
'
;
import
{
UploadImageWithPreviewComponent
}
from
"
./common/upload-image-with-preview/upload-image-with-preview.component
"
;
import
{
UploadImageWithPreviewComponent
}
from
"
./common/upload-image-with-preview/upload-image-with-preview.component
"
;
import
{
BackgroundImagePipe
}
from
"
./pipes/background-image.pipe
"
;
import
{
BackgroundImagePipe
}
from
"
./pipes/background-image.pipe
"
;
import
{
UploadVideoComponent
}
from
"
./common/upload-video/upload-video.component
"
;
import
{
ResourcePipe
}
from
"
./pipes/resource.pipe
"
;
import
{
TimePipe
}
from
"
./pipes/time.pipe
"
;
registerLocaleData
(
zh
);
registerLocaleData
(
zh
);
@
NgModule
({
@
NgModule
({
...
@@ -32,6 +35,9 @@ registerLocaleData(zh);
...
@@ -32,6 +35,9 @@ registerLocaleData(zh);
AudioRecorderComponent
,
AudioRecorderComponent
,
UploadImageWithPreviewComponent
,
UploadImageWithPreviewComponent
,
BackgroundImagePipe
,
BackgroundImagePipe
,
ResourcePipe
,
TimePipe
,
UploadVideoComponent
,
PlayerContentWrapperComponent
PlayerContentWrapperComponent
],
],
...
...
src/app/common/upload-video/upload-video.component.html
0 → 100644
View file @
a4d93283
<div
class=
"up-video"
style=
"display: flex;"
>
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
uploading
"
[
nzShowUploadList
]="
false
"
nzAccept =
".mp4"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
style=
"margin-right: 1rem"
>
<button
type=
"button"
nz-button
nzType=
"default"
*
ngIf=
"showUploadBtn"
[
disabled
]="
uploading
"
[
nzLoading
]="
uploading
"
>
<i
nz-icon
type=
"plus"
theme=
"outline"
></i>
<span>
{{ uploading ? 'Uploading' : 'Select Video' }}
</span>
<!--<span>Select Video</span>-->
</button>
</nz-upload>
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--style="margin-right: 1rem"-->
<!--type="button"-->
<!--[nzLoading]="uploading"-->
<!--(click)="handleUpload()"-->
<!--[disabled]="!videoFile || uploading">-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--</button>-->
<!--
<button type="button"
(click)="extraCover()"
nz-button nzType="default"
[disabled]=" !(videoUrl && videoUrl.constructor.name === 'String')">设置封面</button>
-->
<!--
<nz-divider></nz-divider>
<div [style.display]="!uploading?'none':''" style="position:relative">
<div style="width: calc( 100% - 20px);">
<nz-progress [nzPercent]="progress">
</nz-progress>
</div>
<i (click)="cancelUpload()" class="anticon anticon-close-circle" style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);cursor: pointer"></i>
</div>
-->
</div>
<div
class=
"p-box d-flex align-items-center p-video-uploader"
style=
"top: 20px;"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!showUploadBtn && !videoUrl && !uploading"
>
<i
nz-icon
type=
"upload"
theme=
"outline"
></i>
<div
class=
"m-3"
></div>
<span>
Click here to upload video
</span>
<div
class=
"mt-5 p-progress-bar"
*
ngIf=
"uploading"
>
<div
class=
"p-progress-bg"
[
style
.
width
]="
progress
*
0
.
2
+'
rem
'"
></div>
<div
class=
"p-progress-value"
>
{{progress}}%
</div>
</div>
</div>
<div
class=
"p-upload-progress-bg dddd "
*
ngIf=
"uploading"
[
ngClass
]="{'
smart-bar
'
:
showUploadBtn
}"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<fa
name=
"cloud-upload"
></fa>
Uploading...
</div>
</div>
<div
class=
"p-upload-check-bg"
*
ngIf=
"checking"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<fa
name=
"cloud-upload"
></fa>
<i
nz-icon
type=
"loading"
theme=
"outline"
></i>
Checking...
</div>
</div>
<div
class=
"p-preview"
*
ngIf=
"!showUploadBtn && !uploading && videoUrl "
>
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<video
[
src
]="
safeVideoUrl
(
videoUrl
)"
controls
#
videoNode
(
loadedmetadata
)="
videoLoadedMetaData
()"
></video>
</div>
</div>
<div
[
style
.
display
]="!
checkVideoExists
?'
none
'
:
''"
>
<span><i
nz-icon
type=
"loading"
theme=
"outline"
></i>
checking file to upload
</span>
</div>
src/app/common/upload-video/upload-video.component.scss
0 → 100644
View file @
a4d93283
@import
'../../style/common_mixin'
;
.p-video-uploader
{
position
:
relative
;
display
:
block
;
width
:
100%
;
height
:
0
;
padding-bottom
:
56
.25%
;
.p-box
{
position
:
absolute
;
left
:
0
;
top
:
0
;
right
:
0
;
bottom
:
0
;
border
:
2px
dashed
#ddd
;
//border-radius: 0.5rem;
background-color
:
#fafafa
;
text-align
:
center
;
color
:
#aaa
;
.p-upload-icon
{
text-align
:
center
;
margin
:
auto
;
.anticon-upload
{
color
:
#888
;
font-size
:
5rem
;
}
.p-progress-bar
{
position
:
relative
;
width
:
20rem
;
height
:
1
.5rem
;
border
:
1px
solid
#ccc
;
border-radius
:
1rem
;
.p-progress-bg
{
background-color
:
#1890ff
;
border-radius
:
1rem
;
height
:
100%
;
}
.p-progress-value
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
text-shadow
:
0
0
4px
#000
;
color
:
white
;
text-align
:
center
;
font-size
:
0
.9rem
;
line-height
:
1
.5rem
;
}
}
}
.p-preview
{
width
:
100%
;
height
:
100%
;
//background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
video
{
max-height
:
100%
;
max-width
:
100%
;
}
}
}
}
.p-btn-delete
{
position
:
absolute
;
right
:
-0
.5rem
;
top
:
-0
.5rem
;
width
:
2rem
;
height
:
2rem
;
border
:
0
.2rem
solid
white
;
border-radius
:
50%
;
font-size
:
1
.2rem
;
background-color
:
#fb781a
;
color
:
white
;
text-align
:
center
;
}
.p-upload-progress-bg
,
.p-upload-check-bg
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
&
.i-text
{
position
:
absolute
;
text-align
:
center
;
color
:
white
;
text-shadow
:
0
0
2px
rgba
(
0
,
0
,
0
,
.85
);
}
&
.i-bg
{
position
:
absolute
;
left
:
0
;
top
:
0
;
height
:
100%
;
background-color
:
#1890ff
;
//border-radius: 0.5rem 0 0 0.5rem;
}
}
.p-upload-progress-bg.smart-bar
{
height
:
50px
!
important
;
margin-top
:
20px
!
important
;
}
.p-upload-check-bg
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
&
.i-text
{
position
:
absolute
;
text-align
:
center
;
color
:
white
;
text-shadow
:
0
0
2px
rgba
(
0
,
0
,
0
,
.85
);
}
&
.i-bg
{
position
:
absolute
;
left
:
0
;
top
:
0
;
height
:
100%
;
background-color
:
#17a2b8
;
//border-radius: 0.5rem 0 0 0.5rem;
}
}
//:host ::ng-deep .ant-upload {
// display: block;
//}
src/app/common/upload-video/upload-video.component.ts
0 → 100644
View file @
a4d93283
import
{
Component
,
ElementRef
,
EventEmitter
,
Input
,
OnChanges
,
OnDestroy
,
Output
,
SecurityContext
,
ViewChild
}
from
'
@angular/core
'
;
import
{
NzMessageService
,
UploadFile
}
from
'
ng-zorro-antd
'
;
import
{
DomSanitizer
,
SafeResourceUrl
}
from
'
@angular/platform-browser
'
;
@
Component
({
selector
:
'
app-upload-video
'
,
templateUrl
:
'
./upload-video.component.html
'
,
styleUrls
:
[
'
./upload-video.component.scss
'
]
})
export
class
UploadVideoComponent
implements
OnChanges
,
OnDestroy
{
uploading
=
false
;
checking
=
false
;
checkVideoExists
=
false
;
uploadClicked
=
false
;
@
Input
()
videoFile
=
null
;
uploaderInst
=
null
;
progress
=
0
;
// @Input()
// setCovering = false;
@
Input
()
videoUrl
=
''
;
@
ViewChild
(
'
videoNode
'
)
videoNode
:
ElementRef
;
// @Input()
// extractCoverFunc = null;
@
Output
()
videoUploaded
=
new
EventEmitter
();
@
Output
()
videoUploadFailure
=
new
EventEmitter
();
@
Output
()
extractVideoCover
=
new
EventEmitter
();
@
Input
()
showUploadBtn
=
true
;
@
Input
()
item
:
any
;
// videoItem = null;
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
constructor
(
private
nzMessageService
:
NzMessageService
,
private
sanitization
:
DomSanitizer
// private cwService: _coursewareService,
// private resService: ResourceService
)
{
this
.
uploading
=
false
;
this
.
videoFile
=
null
;
}
ngOnChanges
()
{
// if (!this.videoFile || this.showUploadBtn) {
// return;
// }
// this.beforeUpload(this.videoFile);
// this.handleUpload();
}
ngOnDestroy
():
void
{
URL
.
revokeObjectURL
(
this
.
videoUrl
);
}
safeVideoUrl
(
url
)
{
console
.
log
(
url
)
return
this
.
sanitization
.
bypassSecurityTrustResourceUrl
(
url
);
// `${url}`;
}
videoLoadedMetaData
()
{
}
handleChange
(
info
:
{
type
:
string
,
file
:
UploadFile
,
event
:
any
}):
void
{
console
.
log
(
'
info:
'
,
info
);
switch
(
info
.
type
)
{
case
'
start
'
:
// this.beforeUpload(info.file);
if
(
!
this
.
checkSelectFile
(
info
.
file
))
{
return
;
}
this
.
uploading
=
true
;
this
.
progress
=
0
;
break
;
case
'
success
'
:
this
.
uploadSuccess
(
info
.
file
);
// this.beforeUpload(info.file);
// this.uploadSuccess(info.file);
break
;
case
'
progress
'
:
this
.
progress
=
parseInt
(
info
.
event
.
percent
,
10
);
this
.
doProgress
(
this
.
progress
);
break
;
}
}
checkSelectFile
(
file
)
{
if
(
!
file
.
lastModified
)
{
return
false
;
}
const
delta
=
500
;
const
isOverSize
=
(
file
.
size
/
1024
/
1024
)
<
delta
;
if
(
!
isOverSize
)
{
this
.
nzMessageService
.
error
(
`video must smaller than
${
delta
}
MB!`
);
return
false
;
}
return
true
;
}
checkHashFinish
=
(
hash
)
=>
{
this
.
checking
=
false
;
this
.
uploading
=
true
;
}
uploadSuccess
=
(
file
)
=>
{
this
.
nzMessageService
.
info
(
'
Upload Success
'
);
// this.updateStatus(false);
this
.
uploading
=
false
;
this
.
videoFile
=
null
;
// this.updateSource(url);
this
.
videoUrl
=
file
.
response
.
url
;
// console.log(this.picUrl)
// this.uploadFinished(url);
// if (!inOSS) {
const
vid
=
document
.
createElement
(
'
video
'
);
vid
.
addEventListener
(
'
loadedmetadata
'
,
()
=>
{
const
height
=
vid
.
videoHeight
;
const
width
=
vid
.
videoWidth
;
let
duration
=
vid
.
duration
;
if
(
duration
)
{
duration
=
duration
*
1000
;
}
file
[
'
height
'
]
=
height
;
file
[
'
width
'
]
=
width
;
file
[
'
duration
'
]
=
duration
;
vid
.
preload
=
'
none
'
;
vid
.
src
=
''
;
vid
.
remove
();
this
.
videoUploaded
.
emit
(
file
.
response
);
// this.resService.updateVideo(id, {width, height, duration}).then( () => {
// this.videoUploaded.emit({res_id: id, id, name, hash, url});
// });
});
vid
.
src
=
file
.
response
.
url
;
// } else {
// this.videoUploaded.emit(file.response);
// }
}
uploadFailure
=
(
err
,
file
)
=>
{
this
.
uploading
=
false
;
if
(
err
.
name
&&
err
.
name
===
'
cancel
'
)
{
return
;
}
console
.
log
(
err
);
this
.
nzMessageService
.
error
(
'
Upload Error
'
+
err
.
message
);
this
.
videoUploadFailure
.
emit
(
file
);
}
doProgress
=
(
p
)
=>
{
if
(
p
>
1
)
{
p
=
1
;
}
if
(
p
<
0
)
{
p
=
0
;
}
// console.log(Math.floor(p * 100));
this
.
progress
=
Math
.
floor
(
p
*
100
);
}
}
src/app/pipes/resource.pipe.ts
0 → 100644
View file @
a4d93283
import
{
Pipe
,
PipeTransform
}
from
'
@angular/core
'
;
// import {ElectronUtil} from '../util/ElectronUtil';
declare
const
APP_PATH
;
// const isInElectron = localStorage.getItem('electron');
@
Pipe
({
name
:
'
resource
'
})
export
class
ResourcePipe
implements
PipeTransform
{
transform
(
pic_url
:
any
,
coursewareSid
?:
string
):
string
{
// return pic_url;
if
(
pic_url
&&
typeof
pic_url
===
'
object
'
)
{
return
pic_url
;
}
// console.log('resource', pic_url)
return
`
${
pic_url
}
?t=
${
Math
.
random
()}
`
;
// let ret = value ? `/api/resource/${value}/file` : '';
// let ret = res_id ? `/resource/audio/${res_id}` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, res_id)) {
// ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${res_id}`;
// }
// return ret;
}
}
src/app/pipes/time.pipe.ts
0 → 100644
View file @
a4d93283
import
{
Pipe
,
PipeTransform
}
from
'
@angular/core
'
;
import
*
as
_
from
'
lodash
'
;
@
Pipe
({
name
:
'
time
'
})
export
class
TimePipe
implements
PipeTransform
{
transform
(
value
:
any
,
args
?:
any
):
any
{
let
ret
=
'
00:00
'
;
if
(
_
.
isNumber
(
value
)
&&
value
>
0
)
{
const
minutes
=
Math
.
floor
(
value
/
60
);
const
seconds
=
Math
.
floor
(
value
%
60
);
ret
=
_
.
padStart
(
minutes
,
2
,
'
0
'
)
+
'
:
'
+
_
.
padStart
(
seconds
,
2
,
'
0
'
);
}
return
ret
;
}
}
src/assets/default/video-not-upload.jpg
0 → 100755
View file @
a4d93283
33 KB
src/index.html
View file @
a4d93283
...
@@ -8,81 +8,81 @@
...
@@ -8,81 +8,81 @@
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<link
rel=
"icon"
type=
"image/x-icon"
href=
"favicon.ico"
>
<link
rel=
"icon"
type=
"image/x-icon"
href=
"favicon.ico"
>
<script>
<script>
window
.
courseware
=
(
function
(){
window
.
courseware
=
(
function
(){
if
(
window
.
parent
.
net
){
if
(
window
.
parent
.
net
){
window
.
net
=
window
.
parent
.
net
;
window
.
net
=
window
.
parent
.
net
;
var
id
=
window
.
frameElement
.
getAttribute
(
"
dataid
"
);
var
id
=
window
.
frameElement
.
getAttribute
(
"
dataid
"
);
return
{
return
{
getData
:
function
(
callback
){
getData
:
function
(
callback
,
key
=
''
){
net
.
getData
(
"
getCoursewareData
"
,
id
,
function
(
res
){
net
.
getData
(
"
getCoursewareData
"
,
id
,
function
(
res
){
if
(
res
){
if
(
res
){
res
=
JSON
.
parse
(
res
);
res
=
JSON
.
parse
(
res
);
if
(
res
.
msg
===
"
success
"
){
if
(
res
.
msg
===
"
success
"
){
let
callData
=
null
;
let
callData
=
null
;
if
(
res
.
data
&&
res
.
data
!=
'
null
'
){
if
(
res
.
data
&&
res
.
data
!=
'
null
'
){
callData
=
JSON
.
parse
(
res
.
data
);
callData
=
JSON
.
parse
(
res
.
data
);
}
callback
&&
callback
(
callData
);
}
else
{
alert
(
'
数据加载失败!
'
);
}
}
callback
&&
callback
(
callData
);
}
else
{
}
else
{
alert
(
'
数据加载失败!
'
);
alert
(
'
数据加载失败!
'
);
}
}
}
);
}
else
{
},
alert
(
'
数据加载失败!
'
);
setData
:
function
(
data
,
callback
){
}
let
str
=
JSON
.
stringify
(
data
);
}
);
net
.
getData
(
"
setCoursewareData
"
,{
id
:
id
,
data
:
str
},
function
(
res
){
},
if
(
res
){
setData
:
function
(
data
,
callback
,
key
=
''
){
res
=
JSON
.
parse
(
res
);
let
str
=
JSON
.
stringify
(
data
);
if
(
res
.
msg
===
"
success
"
){
net
.
getData
(
"
setCoursewareData
"
,{
id
:
id
,
data
:
str
},
function
(
res
){
callback
&&
callback
();
if
(
res
){
}
else
{
res
=
JSON
.
parse
(
res
);
alert
(
'
数据保存失败!
'
);
if
(
res
.
msg
===
"
success
"
){
}
callback
&&
callback
();
}
else
{
}
else
{
alert
(
'
数据保存失败!
'
);
alert
(
'
数据保存失败!
'
);
}
}
});
}
else
{
},
alert
(
'
数据保存失败!
'
);
uploadUrl
:
function
(){
return
net
.
getUploadFileURL
();
},
uploadData
:
function
(){
return
net
.
getAjaxData
(
"
uploadFile
"
,
""
);
}
}
}
else
{
return
{
getData
:
function
(
callback
){
let
data
=
localStorage
.
getItem
(
"
courseware_data
"
);
if
(
data
){
data
=
JSON
.
parse
(
data
);
}
}
callback
&&
callback
(
data
);
});
},
},
setData
:
function
(
data
,
callback
){
uploadUrl
:
function
(){
console
.
log
(
"
******local********
"
);
return
net
.
getUploadFileURL
();
localStorage
.
setItem
(
"
courseware_data
"
,
JSON
.
stringify
(
data
));
},
callback
&&
callback
();
uploadData
:
function
(){
},
return
net
.
getAjaxData
(
"
uploadFile
"
,
""
);
uploadUrl
:
function
(){
}
return
'
http://localhost:3000/api/test
'
;
}
},
}
else
{
uploadData
:
function
(){
return
{
return
{};
getData
:
function
(
callback
,
key
=
''
){
let
data
=
localStorage
.
getItem
(
"
courseware_data_
"
+
key
);
if
(
data
){
data
=
JSON
.
parse
(
data
);
}
}
callback
&&
callback
(
data
);
},
setData
:
function
(
data
,
callback
,
key
=
''
){
console
.
log
(
"
******local********
"
);
localStorage
.
setItem
(
"
courseware_data_
"
+
key
,
JSON
.
stringify
(
data
));
callback
&&
callback
();
},
uploadUrl
:
function
(){
return
'
http://localhost:3000/api/test
'
;
},
uploadData
:
function
(){
return
{};
}
}
}
}
})();
}
})();
</script>
</script>
</head>
</head>
<body>
<body>
<app-root></app-root>
<app-root></app-root>
</body>
</body>
</html>
</html>
tslint.json
View file @
a4d93283
...
@@ -89,7 +89,10 @@
...
@@ -89,7 +89,10 @@
"use-lifecycle-interface"
:
true
,
"use-lifecycle-interface"
:
true
,
"use-pipe-transform-interface"
:
true
,
"use-pipe-transform-interface"
:
true
,
"no-trailing-whitespace"
:
false
,
"no-trailing-whitespace"
:
false
,
"variable-name"
:
false
"variable-name"
:
false
,
"no-unused-expression"
:
false
,
"align"
:
false
},
},
"rulesDirectory"
:
[
"rulesDirectory"
:
[
"codelyzer"
"codelyzer"
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment