lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增视频转码配置

Browse Source
This commit is contained in:
jmal 2024-06-06 22:28:00 +08:00
parent 64620c7072
commit 9b35c66f76
6 changed files with 304 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/setting-api.js
View File

@ -1,6 +1,20 @@
import request from '@/utils/request'
export default {
getTranscodeConfig(params) {
return request({
url: '/cloud/setting/transcode/config',
method: 'get',
params
})
},
setTranscodeConfig(data) {
return request({
url: '/cloud/setting/transcode/config',
method: 'put',
data
})
},
syncUser(params) {
return request({
url: '/user/setting/sync',

3
src/components/TaskProgress/index.vue
View File

@ -69,4 +69,7 @@ export default {
</script>
<style lang="scss" scoped>
.container {
padding: 0 !important;
}
</style>

12
src/components/preview/VideoPreview.vue
View File

@ -45,6 +45,7 @@ export default {
return {
pc: this.$pc,
art: null,
switchQuality: false,
option: {
url: '',
title: '', // 视频标题，目前会出现在 视频截图 和 迷你模式 下
@ -137,8 +138,9 @@ export default {
}
}
this.option.url = videoUrl
if (this.file.m3u8) {
const supported = ['flv', 'mp4', 'ogg', 'mkv', 'webm', 'hls', 'mov']
const supported = ['mp4', 'ogg', 'mkv', 'webm', 'hls', 'mov']
if (supported.includes(this.file.suffix.toLowerCase())) {
this.option.quality = [
{
@ -156,7 +158,10 @@ export default {
m3u8: this.playM3u8
}
}
if (this.file.contentType.indexOf('flv') > -1) {
this.option.url = originUrl
this.option.quality = []
this.option.customType = {
flv: this.playFlv
}
@ -166,6 +171,11 @@ export default {
this.title = this.file.name
this.option.id = this.file.id
this.show = true
this.switchQuality = true
} else {
this.option.url = ''
this.videoLink = ''
this.option.quality = []
}
}
},

164
src/views/setting/cloudManager.vue
View File

@ -65,66 +65,20 @@
</div>
</el-tab-pane>
<el-tab-pane label="视频转码" name="3" class="setting-tab-panel">
<div v-if="activeName === '3'">
<transcode-config></transcode-config>
</div>
</el-tab-pane>
<el-tab-pane label="LDAP认证" name="2" class="setting-tab-panel">
<div v-if="activeName === '2'">
<el-form :rules="rules" ref="form" :model="ldapFormData" label-width="120px" size="small"
style="width: 450px" autocomplete="off">
<el-form-item label="功能状态" prop="enable">
<el-select v-model="ldapFormData.enable">
<el-option
v-for="item in ldapStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="LDAP 服务器" prop="ldapServer">
<el-input placeholder="例如: ldap.test.com:389" v-model="ldapFormData.ldapServer"></el-input>
</el-form-item>
<el-form-item label="Base DN" prop="baseDN">
<el-input placeholder="例如: dc=test,dc=com" v-model="ldapFormData.baseDN" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="账号" prop="userDN">
<el-input placeholder="管理员账号,例如: cn=admin,dc=test,dc=com" v-model="ldapFormData.userDN" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="管理员密码" v-model="ldapFormData.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :disabled="ldapTestBtn" v-loading="testLdapConfigLoading" @click="doTestLdapConfig">测试链接</el-button>
<span v-if="testLdapConfigResult === 0" class="el-icon-check" style="color: #67C23A"></span>
<span v-if="testLdapConfigResult > 0" class="el-icon-close" style="color: #F56C6C"></span>
</el-form-item>
<el-form-item label="登录名" prop="loginName">
<el-input placeholder="LDAP服务器中对应个人用户名的字段, 例如: uid" v-model="ldapFormData.loginName"></el-input>
</el-form-item>
<el-form-item label="默认角色" prop="defaultRoleList">
<el-select ref="selectRole" v-model="ldapFormData.defaultRoleList" multiple placeholder="请选择角色">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :disabled="ldapSaveBtn" v-loading="saveLdapConfigLoading" @click="saveLdapConfig">保存配置</el-button>
</el-form-item>
</el-form>
<ldap-config></ldap-config>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
<el-card class="box-card">
<el-card class="box-card progress">
<div slot="header">
<div class="box-card-header">
<div class="clearfix card-header-back">
@ -146,14 +100,14 @@ import settingApi, { getSetting, getTaskProgress } from "@/api/setting-api";
import Logo from "@/components/Logo";
import getPageTitle from "@/utils/get-page-title";
import UploadImageInput from "@/components/input/UploadImageInput.vue";
import roleApi from "@/api/role";
import { loadLdapConfig, testLdapConfig, updateLdapConfig} from '@/api/user'
import {mapGetters, mapState} from "vuex";
import store from "@/store";
import TaskProgress from "@/components/TaskProgress/index.vue";
import LdapConfig from "@/views/setting/ldapConfig.vue";
import TranscodeConfig from "@/views/setting/transcodeConfig.vue";
export default {
components: {TaskProgress, UploadImageInput, Logo},
components: {TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
data() {
return {
activeName: '1',
@ -171,44 +125,7 @@ export default {
showAckBtn: false,
inputNetdiskNameWidth: 150,
logoFileTypeList: ['image/svg+xml', 'image/jpg', 'image/png', 'image/jpeg'],
ldapFormData: {
enable: true,
ldapServer: '',
defaultRoleList: [],
baseDN: '',
userDN: '',
password: '',
loginName: ''
},
currentVersion: config.version,
roleList: [],
ldapStatusOptions: [{
value: true,
label: '启用'
}, {
value: false,
label: '禁用'
}],
rules: {
ldapServer: [
{required: true, message: '请填写LDAP服务器', trigger: 'submit'}
],
defaultRoleList: [
{required: true, message: '请选择默认角色', trigger: 'submit'}
],
baseDN: [
{required: true, message: '请填写 Base DN', trigger: 'submit'}
],
userDN: [
{required: true, message: '请填写 管理员账号', trigger: 'submit'}
],
loginName: [
{required: true, message: '请填写登录名', trigger: 'submit'}
]
},
testLdapConfigLoading: false,
saveLdapConfigLoading: false,
testLdapConfigResult: -1,
}
},
mounted() {
@ -218,8 +135,6 @@ export default {
if (this.$route.query.tab) {
this.activeName = this.$route.query.tab
if (this.activeName === '2') {
this.getRoleList()
this.getLdapConfig()
}
}
getTaskProgress().then(res => {
@ -231,12 +146,6 @@ export default {
...mapGetters([
'newVersion'
]),
ldapTestBtn() {
return !(this.ldapFormData.ldapServer.length > 0 && this.ldapFormData.baseDN.length > 0 && (this.ldapFormData.password ? this.ldapFormData.password.length > 0 : false))
},
ldapSaveBtn() {
return !(!this.ldapTestBtn && this.ldapFormData.defaultRoleList.length > 0 && this.ldapFormData.loginName.length > 0)
}
},
watch: {
message(msg) {
@ -246,32 +155,8 @@ export default {
}
},
methods: {
doTestLdapConfig() {
this.testLdapConfigLoading = true
testLdapConfig(this.ldapFormData).then(() => {
this.testLdapConfigLoading = false
this.testLdapConfigResult = 0
this.$message.success("连接成功")
}).catch(() => {
this.testLdapConfigResult = 1
this.testLdapConfigLoading = false
});
},
saveLdapConfig() {
this.saveLdapConfigLoading = true
updateLdapConfig(this.ldapFormData).then(() => {
this.saveLdapConfigLoading = false
this.$message.success("保存成功")
}).catch(() => {
this.saveLdapConfigLoading = false
});
},
handleClick(tab) {
this.$router.push({query: {tab: tab.name}})
if (tab.name === '2') {
this.getRoleList()
this.getLdapConfig()
}
},
handleAvatarSuccess(res) {
if (res.code === 0) {
@ -310,18 +195,6 @@ export default {
}
})
},
getRoleList() {
roleApi.roleList().then(res => {
this.roleList = res.data;
})
},
getLdapConfig() {
loadLdapConfig().then(res => {
if (res.data) {
this.ldapFormData = res.data;
}
})
},
inputNetdiskName(input) {
if (input) {
this.showAckBtn = true
@ -430,7 +303,7 @@ export default {
<style lang="scss" scoped>
@import "src/styles/setting";
> > > .el-textarea {
>>> .el-textarea {
max-width: 1080px;
}
@ -443,7 +316,7 @@ export default {
width: 220px;
}
.avatar-uploader > > > .el-upload {
.avatar-uploader >>> .el-upload {
display: block;
.avatar {
@ -462,11 +335,11 @@ export default {
}
}
> > > .el-card__body {
>>> .el-card__body {
padding: 0;
}
> > > .el-tabs__header {
>>> .el-tabs__header {
margin: 0;
@media screen and (min-width: 768px) {
.el-tabs__nav {
@ -478,7 +351,7 @@ export default {
}
}
> > > .el-form-item__content {
>>> .el-form-item__content {
.el-select {
width: 100%;
}
@ -492,4 +365,11 @@ export default {
}
}
.progress {
margin-top: 5px;
>>> .el-card__header {
padding: 8px 20px;
}
}
</style>

165
src/views/setting/ldapConfig.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<div class="container">
<el-form :rules="rules" ref="form" :model="ldapFormData" label-width="120px" size="small"
style="width: 450px" autocomplete="off">
<el-form-item label="功能状态" prop="enable">
<el-select v-model="ldapFormData.enable">
<el-option
v-for="item in ldapStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="LDAP 服务器" prop="ldapServer">
<el-input placeholder="例如: ldap.test.com:389" v-model="ldapFormData.ldapServer"></el-input>
</el-form-item>
<el-form-item label="Base DN" prop="baseDN">
<el-input placeholder="例如: dc=test,dc=com" v-model="ldapFormData.baseDN" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="账号" prop="userDN">
<el-input placeholder="管理员账号,例如: cn=admin,dc=test,dc=com" v-model="ldapFormData.userDN" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="管理员密码" v-model="ldapFormData.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :disabled="ldapTestBtn" v-loading="testLdapConfigLoading" @click="doTestLdapConfig">测试链接</el-button>
<span v-if="testLdapConfigResult === 0" class="el-icon-check" style="color: #67C23A"></span>
<span v-if="testLdapConfigResult > 0" class="el-icon-close" style="color: #F56C6C"></span>
</el-form-item>
<el-form-item label="登录名" prop="loginName">
<el-input placeholder="LDAP服务器中对应个人用户名的字段, 例如: uid" v-model="ldapFormData.loginName"></el-input>
</el-form-item>
<el-form-item label="默认角色" prop="defaultRoleList">
<el-select ref="selectRole" v-model="ldapFormData.defaultRoleList" multiple placeholder="请选择角色">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :disabled="ldapSaveBtn" v-loading="saveLdapConfigLoading" @click="saveLdapConfig">保存配置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {loadLdapConfig, testLdapConfig, updateLdapConfig} from "@/api/user";
import roleApi from "@/api/role";
export default {
name: 'LdapConfig',
props: {
data: {
type: Array,
default: []
},
},
computed: {
ldapTestBtn() {
return !(this.ldapFormData.ldapServer.length > 0 && this.ldapFormData.baseDN.length > 0 && (this.ldapFormData.password ? this.ldapFormData.password.length > 0 : false))
},
ldapSaveBtn() {
return !(!this.ldapTestBtn && this.ldapFormData.defaultRoleList.length > 0 && this.ldapFormData.loginName.length > 0)
}
},
data() {
return {
ldapFormData: {
enable: true,
ldapServer: '',
defaultRoleList: [],
baseDN: '',
userDN: '',
password: '',
loginName: ''
},
ldapStatusOptions: [{
value: true,
label: '启用'
}, {
value: false,
label: '禁用'
}],
rules: {
ldapServer: [
{required: true, message: '请填写LDAP服务器', trigger: 'submit'}
],
defaultRoleList: [
{required: true, message: '请选择默认角色', trigger: 'submit'}
],
baseDN: [
{required: true, message: '请填写 Base DN', trigger: 'submit'}
],
userDN: [
{required: true, message: '请填写 管理员账号', trigger: 'submit'}
],
loginName: [
{required: true, message: '请填写登录名', trigger: 'submit'}
]
},
testLdapConfigLoading: false,
saveLdapConfigLoading: false,
testLdapConfigResult: -1,
roleList: [],
}
},
mounted() {
this.getRoleList()
this.getLdapConfig()
},
methods: {
doTestLdapConfig() {
this.testLdapConfigLoading = true
testLdapConfig(this.ldapFormData).then(() => {
this.testLdapConfigLoading = false
this.testLdapConfigResult = 0
this.$message.success("连接成功")
}).catch(() => {
this.testLdapConfigResult = 1
this.testLdapConfigLoading = false
});
},
saveLdapConfig() {
this.saveLdapConfigLoading = true
updateLdapConfig(this.ldapFormData).then(() => {
this.saveLdapConfigLoading = false
this.$message.success("保存成功")
}).catch(() => {
this.saveLdapConfigLoading = false
});
},
getRoleList() {
roleApi.roleList().then(res => {
this.roleList = res.data;
})
},
getLdapConfig() {
loadLdapConfig().then(res => {
if (res.data) {
this.ldapFormData = res.data;
}
})
},
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 !important;
}
</style>

89
src/views/setting/transcodeConfig.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<div class="container">
<el-form :rules="rules" ref="transcodeConfigform" :model="configFormData" label-width="120px" size="small"
style="width: 520px" autocomplete="off">
<el-form-item label="功能状态" prop="enable">
<el-select v-model="configFormData.enable">
<el-option
v-for="item in configEnableOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="目标码率(kbps)" prop="bitrate">
<el-input placeholder="默认2500 kbps,小于该值则不转码" v-model.number="configFormData.bitrate"></el-input>
</el-form-item>
<el-form-item label="目标高度" prop="height">
<el-input placeholder="默认720,小于该值则不转码(视频宽度则默认随高度等比例缩放)" v-model.number="configFormData.height"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import settingApi from "@/api/setting-api";
export default {
name: 'TranscodeConfig',
props: {
data: {
type: Array,
default: []
},
},
computed: {
},
data() {
return {
saveConfigLoading: false,
configFormData: {
enable: true,
bitrate: undefined,
height: undefined
},
configEnableOptions: [{
value: true,
label: '启用'
}, {
value: false,
label: '禁用'
}],
rules: {
bitrate: [
{type: 'number', message: '码率必须为数字值', trigger: 'blur'}
],
height: [
{type: 'number', message: '高度必须为数字值', trigger: 'blur'}
]
}
}
},
mounted() {
this.getTranscodeConfig()
},
methods: {
getTranscodeConfig() {
settingApi.getTranscodeConfig().then(res => {
this.configFormData = res.data
})
},
saveConfig() {
settingApi.setTranscodeConfig(this.configFormData).then(() => {
this.$message.success('保存成功')
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 !important;
}
</style>