Merge pull request #164 from jamebal/dev

feat: 新增视频转码配置

src/api/setting-api.js

@@ -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',

src/components/TaskProgress/index.vue

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

src/components/preview/VideoPreview.vue

@@ -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 = []
       }
     }
   },

src/views/setting/cloudManager.vue

@@ -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"
+              <ldap-config></ldap-config>
-                       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>
           </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>

src/views/setting/ldapConfig.vue

@@ -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>

src/views/setting/transcodeConfig.vue

@@ -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>