cis-oss/libav-wasm
2
0
Fork 0
forked from forks/ffprobe-wasm
Code Pull Requests Activity

Add stream metadata tags. (#17)

Browse Source
This commit is contained in:
Alfred Gutierrez
2022-05-28 16:48:14 -07:00
committed by GitHub
parent ff36b01373
commit 48507f53a6
3 changed files with 90 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
www/src/components/Overview.vue
View File

@@ -7,14 +7,42 @@
<b-table stacked :items="items"></b-table>
<h4>Streams</h4>
<b-table striped hover :items="info.streams"></b-table>
<b-table striped hover :items="info.streams" :fields="stream_fields">
<template #cell(show_details)="row">
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}}
</b-button>
</template>
<template #row-details="row">
<b-card>
<div v-for="(value, key) in row.item.tags" :key="key">
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>{{ key }}:</b></b-col>
<b-col>{{ value }}</b-col>
</b-row>
</div>
</b-card>
</template>
</b-table>
<div v-show="info.chapters.length > 0">
<h4>Chapters</h4>
<b-table striped hover :items="info.chapters">
<template #cell(tags)="data">
<b-table-lite small stacked outlined :items="data.item.tags"></b-table-lite>
</template>
<b-table striped hover :items="info.chapters" :fields="chapter_fields">
<template #cell(show_details)="row">
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}}
</b-button>
</template>
<template #row-details="row">
<b-card>
<div v-for="(value, key) in row.item.tags" :key="key">
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>{{ key }}:</b></b-col>
<b-col>{{ value }}</b-col>
</b-row>
</div>
</b-card>
</template>
</b-table>
</div>
</div>
@@ -24,6 +52,28 @@
export default {
name: 'Overview',
props: ['info'],
data() {
return {
stream_fields: [
'id',
'start_time',
'duration',
'codec_type',
'codec_name',
'format',
'bit_rate',
'profile',
'level',
'width',
'height',
'channels',
'sample_rate',
'frame_size',
{ key: 'show_details', label: 'Tags' },
],
chapter_fields: ['id', 'time_base', 'start', 'end', { key: 'show_details', label: 'Tags' }],
}
},
computed: {
items() {
return [