Skip to content

L
live-management-web
Commit d9eb9ee6 by haojie
Options

5分钟的倍数音频切割后会多一个空文件的问题

parent 4320b0ed
Showing with 119 additions and 298 deletions
src/components/CheckBox.vue deleted 100644 → 0
<template>
<t-checkbox class="custom-default-checkbox" v-model="checkboxValue">
<slot />
</t-checkbox>
</template>
<script lang="ts" setup>
import { Checkbox as TCheckbox } from 'tdesign-vue-next';
import { ref, watch } from 'vue';
const props = withDefaults(
defineProps<{
modelValue: boolean;
}>(),
{},
);
const emit = defineEmits(['update:modelValue', 'change']);
const checkboxValue = ref(false);
watch(
() => checkboxValue.value,
(v) => {
emit('update:modelValue', v);
emit('change', v);
},
);
watch(
() => props.modelValue,
(v) => {
checkboxValue.value = v;
},
);
</script>
<style lang="less">
@import '@/style/variables.less';
.custom-default-checkbox {
.t-checkbox__input {
background: transparent;
border: 1px solid #848e9c;
border-radius: 0;
border-radius: 2px;
}
.t-checkbox__label {
color: white;
font-weight: 300;
font-size: @size-12;
}
&:hover {
.t-checkbox__input {
border-color: #00f9f9;
}
}
}
.custom-default-checkbox.t-is-checked {
.t-checkbox__input {
background: #00f9f9;
border-color: transparent;
&::after {
border-color: black;
}
}
}
</style>
src/components/checkbox/index.less 0 → 100644
.le-checkbox {
display: flex;
align-items: center;
cursor: pointer;
.le-checkbox-label {
color: white;
font-weight: 300;
font-size: 12px;
margin-left: 6px;
}
.le-checkbox-input {
background: transparent;
border: 1px solid #848e9c;
border-radius: 2px;
width: 16px;
height: 16px;
box-sizing: border-box;
transition: all 0.2s;
&:hover {
border-color: #00f9f9;
transition: all 0.2s;
}
}
.le-checkbox-active {
transition: all 0.2s;
background-color: #00f9f9;
border-color: #00f9f9;
position: relative;
&::after {
content: '';
position: absolute;
opacity: 1;
top: 6px;
left: 3px;
width: 5px;
height: 9px;
border: 2px solid black;
border-radius: 0 0 1px;
border-top: 0;
border-left: 0;
-webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
transform: rotate(45deg) scale(1) translate(-50%, -50%);
background: transparent;
box-sizing: border-box;
}
}
}
src/components/checkbox/index.tsx 0 → 100644
import './index.less';
import { computed, defineComponent } from 'vue';
export default defineComponent({
props: {
modelValue: Boolean,
},
emits: ['update:modelValue', 'change'],
setup(props, { emit, slots }) {
const checkValue = computed({
get() {
return props.modelValue;
},
set(value) {
emit('update:modelValue', value);
emit('change', value);
},
});
const change = () => {
checkValue.value = !props.modelValue;
};
return () => (
<div class="le-checkbox" onClick={change}>
<div
class={[
'le-checkbox-input',
checkValue.value ? 'le-checkbox-active' : '',
]}
></div>
<div class="le-checkbox-label">
{slots.default ? slots.default() : ''}
</div>
</div>
);
},
});
src/components/table.vue deleted 100644 → 0
<template>
<TTable class="admin-real-table" :row-key="rowkey" :data="list" :columns="columns" :loading="loading">
<template #check_all>
<template v-if="checkbox">
<TCheckbox class="check-all-box" v-model="is_check_all" @change="CheckAll"></TCheckbox>
</template>
</template>
<template #checkbox="{ row }">
<template v-if="checkbox">
<TCheckbox v-model="row.is_check" class="check-all-box" @change="CheckOne(row)"></TCheckbox>
</template>
</template>
</TTable>
<div class="custom-pagination" v-if="pagination">
<t-pagination
v-model="cPageNum"
v-model:page-size="cPageSize"
:total="total"
:pageSizeOptions="[]"
@current-change="pageChange"
/>
</div>
</template>
<script lang="ts" setup>
import { Table as TTable, Checkbox as TCheckbox } from 'tdesign-vue-next';
import { ref } from 'vue';
import { Pagination as TPagination } from 'tdesign-vue-next';
const props = withDefaults(
defineProps<{
rowkey?: string;
columns: any[];
checkbox?: boolean;
filter_num?: number;
filter_api?: any;
AlreadyChoose?: any;
pageNum: number;
pageSize: number;
loading: boolean;
total: number;
list: any[];
pagination?: boolean;
}>(),
{
checkbox: true,
filter_num: 1,
filter_api: false,
AlreadyChoose: {},
pagination: true,
rowkey: 'index',
},
);
const emit = defineEmits(['ChangeList', 'ChoseList', 'PageNumChange']);
const cPageNum = ref<number>(props.pageNum);
const cPageSize = ref<number>(props.pageSize);
// 是否选择全部
const is_check_all = ref(false);
// 修改当前页
const ChangeCurrentPage = (value: number) => {
cPageNum.value = value;
emit('PageNumChange', value);
};
const pageChange = (value: number) => {
ChangeCurrentPage(value);
};
// 提交选中项
const SubmitChoseRow = (list: any[] = []) => {
emit('ChoseList', list);
};
// 选择全部
const CheckAll = () => {
props.list.forEach((item: any) => {
item.is_check = is_check_all.value;
});
if (is_check_all.value) {
// 通知父组件
SubmitChoseRow(props.list);
} else {
SubmitChoseRow();
}
};
// 选择行
const CheckOne = () => {
let check_all_num = 0;
let not_check_num = 0;
// 判断是否全选或全不选
for (let i = 0; i < props.list.length; i++) {
let item = props.list[i];
if (item.is_check) {
check_all_num += 1;
} else {
not_check_num += 1;
}
}
if (check_all_num == props.list.length) {
is_check_all.value = true;
SubmitChoseRow(props.list);
} else if (not_check_num == props.list.length) {
is_check_all.value = false;
SubmitChoseRow();
} else {
// 找到所有选择项
const list = props.list.filter((item: any) => item.is_check == true);
SubmitChoseRow(list);
}
};
</script>
<style lang="less">
@import '@/style/variables.less';
.t-table.admin-real-table {
background-color: transparent;
min-height: 500px;
.t-table__content {
background-color: transparent;
}
.t-loading--center {
border-radius: 8px;
.t-loading__gradient {
color: #00dddd;
}
}
.check-all-box {
.t-checkbox__input {
border: 1px solid #ffffff;
border-radius: 2px;
background: transparent;
}
}
.t-is-checked {
.t-checkbox__input {
border: 1px solid white;
background: transparent;
&::after {
border-color: black;
}
}
}
.t-table__header {
tr {
background-color: transparent;
th {
border: none;
background-color: #1e1e1e !important;
color: white;
font-size: @size-15;
font-weight: 400;
padding-top: 8px;
padding-bottom: 8px;
}
// & > :first-child {
// border-top-left-radius: 8px;
// border-bottom-left-radius: 8px;
// }
// & > :last-child {
// border-top-right-radius: 8px;
// border-bottom-right-radius: 8px;
// }
}
}
tbody {
.t-table__empty-row {
.t-table__empty {
color: white;
background-color: rgb(48, 48, 48);
}
}
tr {
td {
color: #ffffff;
border-bottom: 1px solid #464646;
font-weight: 400;
font-size: @size-14;
background: rgb(48, 48, 48);
.edit-text {
cursor: pointer;
transition: color 0.2s;
&:hover {
color: white;
transition: color 0.2s;
}
}
}
&:hover {
td {
background: rgb(48, 48, 48) !important;
}
}
}
}
.t-loading--center {
background: rgba(255, 255, 255, 0.1);
}
}
.custom-pagination {
padding: 12px 0;
.t-pagination__total {
color: white;
}
.t-is-current {
background: #00f9f9;
border-radius: 2px;
border: none;
color: #000000;
}
.t-pagination__btn {
& > :nth-child(1) {
color: #c9cdd4;
}
}
}
</style>
src/pages/OnlyVideoLive/useScript.ts
...@@ -279,7 +279,7 @@ export default function () { ...@@ -279,7 +279,7 @@ export default function () {
// 当前播放进度变化 // 当前播放进度变化
const currentTimeChange = (index: number, value: number) => { const currentTimeChange = (index: number, value: number) => {
try { try {
console.log(value, '当前主视频进度'); // console.log(value, '当前主视频进度');
let row = mainVideoList.value[index]; let row = mainVideoList.value[index];
// 剩余多少没有播放 // 剩余多少没有播放
let currentEsidueTime = row.total - value; let currentEsidueTime = row.total - value;
......
src/pages/createLive/components/scripts.vue
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
import { computed, onMounted, reactive, ref, watch, toRaw, onActivated } from 'vue'; import { computed, onMounted, reactive, ref, watch, toRaw, onActivated } from 'vue';
import AudioSvg from '@/assets/svg/upload/audio.svg'; import AudioSvg from '@/assets/svg/upload/audio.svg';
import Button from '@/components/Button.vue'; import Button from '@/components/Button.vue';
import CheckBox from '@/components/CheckBox.vue'; import CheckBox from '@/components/checkbox';
import ConfirmDialog from '@/components/ConfirmDialog.vue'; import ConfirmDialog from '@/components/ConfirmDialog.vue';
import TextScriptDialog from './TextScriptDialog.vue'; import TextScriptDialog from './TextScriptDialog.vue';
import ScriptTemplate from '@/components/ScriptTemplate.vue'; import ScriptTemplate from '@/components/ScriptTemplate.vue';
......
src/pages/createLive/index.vue
...@@ -508,15 +508,27 @@ const splitCallback = async (splitInfo: any) => { ...@@ -508,15 +508,27 @@ const splitCallback = async (splitInfo: any) => {
for (let j = 0; j < item.length; j++) { for (let j = 0; j < item.length; j++) {
let row = item[j]; let row = item[j];
if (getAudioUrl(row) == splitInfo.url) { if (getAudioUrl(row) == splitInfo.url) {
row.new_content = splitInfo.list.join('|'); row.duration = '';
row.new_content = '';
// 更新时长 // 更新时长
let durationList = await getDurationOfAudioFileList(splitInfo.list); let durationList = await getDurationOfAudioFileList(splitInfo.list);
durationList.forEach((durationRow: any, index: number) => {
if (durationRow.duration) {
// 四舍五入 // 四舍五入
durationList = durationList.map((it: any) => { durationRow.duration = Math.round(durationRow.duration);
return Math.round(it); if (!row.duration) {
// 新的duration
row.duration += `${durationRow.duration}`;
// 新的content
row.new_content += `${durationRow.url}`;
} else {
row.duration += `|${durationRow.duration}`;
row.new_content += `|${durationRow.url}`;
}
} else {
console.log('没有时长的音频已被过滤:', durationRow.url);
}
}); });
row.duration = durationList.join('|');
console.log(row.duration, 'row.duration,切割后的时长字段');
row.py_split_status = true; row.py_split_status = true;
} }
// 统计完成数量 // 统计完成数量
......
src/pages/home/index.vue
...@@ -83,6 +83,7 @@ import Button from '@/components/Button.vue'; ...@@ -83,6 +83,7 @@ import Button from '@/components/Button.vue';
import { callPyjsInWindow } from '@/utils/pyqt'; import { callPyjsInWindow } from '@/utils/pyqt';
import { jumpToCreateLivePage } from '@/router/jump'; import { jumpToCreateLivePage } from '@/router/jump';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { show_message } from '@/utils/tool';
const router = useRouter(); const router = useRouter();
const store = useStore(); const store = useStore();
......
src/pages/login/index.vue
...@@ -54,7 +54,7 @@ import { useStore } from 'vuex'; ...@@ -54,7 +54,7 @@ import { useStore } from 'vuex';
import { setRememberList, getRememberList } from '@/utils/remember'; import { setRememberList, getRememberList } from '@/utils/remember';
import { UserLogin } from '@/utils/api/userApi'; import { UserLogin } from '@/utils/api/userApi';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import CheckBox from '@/components/CheckBox.vue'; import CheckBox from '@/components/checkbox';
import CustomForm from '@/components/form'; import CustomForm from '@/components/form';
import CustomFormItem from '@/components/formItem'; import CustomFormItem from '@/components/formItem';
......
src/service/CreateLive.ts
...@@ -61,14 +61,22 @@ export const movementTypeEnd = 2; // 结尾插入 ...@@ -61,14 +61,22 @@ export const movementTypeEnd = 2; // 结尾插入
// 获取音频文件列表的时长 // 获取音频文件列表的时长
export const getDurationOfAudioFileList = async (list: string[]) => { export const getDurationOfAudioFileList = async (list: string[]) => {
let durationList = []; let durationList = [];
try {
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
const duration = await getDurationOfAudioFile(list[i]); let duration = 0;
durationList.push(duration); try {
} duration = await getDurationOfAudioFile(list[i]);
durationList.push({
url: list[i],
duration: duration,
});
} catch (e) { } catch (e) {
console.log('音频文件列表的时长失败'); durationList.push({
url: list[i],
duration: 0,
});
console.log(e); console.log(e);
console.log('音频文件列表的时长失败', list[i]);
}
} }
return durationList; return durationList;
}; };
......
src/utils/audio.ts
...@@ -30,7 +30,7 @@ export const getFileBuffer = (url: string) => { ...@@ -30,7 +30,7 @@ export const getFileBuffer = (url: string) => {
// 获取音频文件的时长 // 获取音频文件的时长
export const getDurationOfAudioFile = (file: File | string) => { export const getDurationOfAudioFile = (file: File | string) => {
return new Promise((resolve, reject) => { return new Promise<number>((resolve, reject) => {
let audio = null; let audio = null;
if (typeof file === 'string') { if (typeof file === 'string') {
audio = new Audio(file); audio = new Audio(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