Skip to content

Add batch video upload functionality #1668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DaniEnsi wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Add batch video upload functionality #1668

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eefb4a6
feat(upload): add batch video upload functionality
DaniEnsi Oct 18, 2025
a8dc3f1
chore: merge upstream dev
DaniEnsi Aug 5, 2026
074746d
fix(web): remove title requirement for batch vod upload
DaniEnsi Aug 5, 2026
1edac7d
chore: update go.work.sum
DaniEnsi Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 85 additions & 7 deletions web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,66 @@
</label>
</div>

<label for="name" x-show="!loading">
{{- /* Video Upload Mode - Batch UI */ -}}
<div x-show="formData.vodup && !loading" class="col-span-full">
<div class="space-y-3">
<template x-for="(lecture, index) in formData.batchLectures" :key="index">
<div class="flex gap-2 items-start">
<div class="flex-1 grid grid-cols-2 gap-2">
<label>
<span class="text-sm text-5">Lecture Name</span>
<input type="text" class="tl-input" x-model="lecture.title"
@input="onUpdate"
@keydown.enter.prevent="$event.target.blur()"
placeholder="L01: Binary Trees"/>
</label>
<label>
<span class="text-sm text-5">Start Time</span>
<input type="text" class="tl-input"
x-model="lecture.start"
x-init="$nextTick(() => {
if ($el && !$el._flatpickr) {
const fp = flatpickr($el, {
enableTime: true,
time_24hr: true,
altInput: true,
altFormat: 'Y-m-d H:i',
dateFormat: 'Z',
allowInput: true,
onChange: function(selectedDates, dateStr) {
lecture.start = dateStr;
onUpdate();
}
});
}
})"
@input="onUpdate"
@keydown.enter.prevent="$event.target.blur()"
placeholder="2024-01-08 14:00"/>
</label>
</div>
<button type="button" @click="removeBatchLectureRow(index)"
x-show="formData.batchLectures.length > 1"
class="mt-6 text-red-500 hover:text-red-700 px-2" title="Remove">
<i class="fas fa-trash"></i>
</button>
</div>
</template>
</div>
<div class="mt-3 flex justify-center">
<button type="button" @click="addBatchLectureRow" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
<i class="fas fa-plus-circle mr-1"></i> Add Another Lecture
</button>
</div>
</div>

{{- /* Non-Video Upload Mode UI */ -}}
<label for="name" x-show="!loading && !formData.vodup">
<span class="text-sm text-5">Lecture Name</span>
<input class="tl-input" name="name" id="name" x-model="formData.title" @change="onUpdate" placeholder="L01: Binary Trees"/>
<input class="tl-input" name="name" id="name" x-model="formData.title"
@input="onUpdate"
@keydown.enter.prevent="$event.target.blur()"
placeholder="L01: Binary Trees"/>
</label>

<label x-show="!formData.premiere && !formData.vodup && !loading">
Expand All @@ -35,21 +92,42 @@
</select>
</label>

<label for="start" x-show="!loading && !formData.adHoc">
<label for="start" x-show="!loading && !formData.adHoc && !formData.vodup">
<span class="text-sm text-5">Start</span>
<input class="tl-input" name="start" placeholder="2021-04-08 14:00" id="start" x-model="formData.start"
x-ref="start"
x-init="flatpickr($refs.start, {enableTime: true, time_24hr: true, altInput:true, altFormat:'Y-m-d H:i', dateFormat:'Z', allowInput: true})"
@change="onStartChange"/>
x-init="flatpickr($refs.start, {
enableTime: true,
time_24hr: true,
altInput: true,
altFormat: 'Y-m-d H:i',
dateFormat: 'Z',
allowInput: true,
onChange: function(selectedDates, dateStr) {
formData.start = dateStr;
onStartChange();
}
})"
@input="onStartChange"/>
</label>
<template x-if="!formData.premiere && !formData.vodup && !loading">
<label for="end">
<span class="text-sm text-5">End</span>
<span x-show="formData.formatedDuration !== ''" class="text-sm font-light opacity-75"
x-text="`( ${formData.formatedDuration} )`"></span>
<input class="tl-input" name="end" placeholder="16:00" id="end" x-model="formData.end" x-ref="end"
x-init="flatpickr($refs.end, {enableTime: true, noCalendar: true, dateFormat: 'H:i', time_24hr: true, allowInput: true })"
@change="onEndChange"/>
x-init="flatpickr($refs.end, {
enableTime: true,
noCalendar: true,
dateFormat: 'H:i',
time_24hr: true,
allowInput: true,
onChange: function(selectedDates, dateStr) {
formData.end = dateStr;
onEndChange();
}
})"
@input="onEndChange"/>
</label>
</template>

Expand Down
100 changes: 74 additions & 26 deletions web/template/partial/course/manage/create-lecture-form-slides/lecture-media-slide.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,82 @@
{{define "lecture-media-slide"}}
<div class="mb-4">
<label x-show="formData.premiere || formData.vodup && !loading">
<span class="text-sm text-5">Combined Video (mp4, if possible h264)</span>
<label class="flex">
<input x-ref="fileSelection1" type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateFiles('COMB', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2" @click="updateFiles('COMB', []);$refs.fileSelection1.value = '';"></button>
</label>
</label>
{{- /* Batch/Multi-lecture Upload UI (for vodup) */ -}}
<div x-show="formData.vodup && !loading" class="space-y-6">
<template x-for="(lecture, index) in formData.batchLectures" :key="index">
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600">
<h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200" x-text="`${index + 1}. ${lecture.title || 'Untitled Lecture'}`"></h3>

<div class="mb-4">
<label>
<span class="text-sm text-5">Combined Video (mp4, if possible h264)</span>
<label class="flex">
<input type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateBatchLectureFiles(index, 'COMB', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2"
@click="updateBatchLectureFiles(index, 'COMB', []);$event.target.previousElementSibling.value = '';"></button>
</label>
</label>
</div>

<div class="mb-4">
<label>
<span class="text-sm text-5">Presentation Video (mp4, if possible h264)</span>
<label class="flex">
<input type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateBatchLectureFiles(index, 'PRES', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2"
@click="updateBatchLectureFiles(index, 'PRES', []);$event.target.previousElementSibling.value = '';"></button>
</label>
</label>
</div>

<div>
<label>
<span class="text-sm text-5">Camera Video (mp4, if possible h264)</span>
<label class="flex">
<input type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateBatchLectureFiles(index, 'CAM', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2"
@click="updateBatchLectureFiles(index, 'CAM', []);$event.target.previousElementSibling.value = '';"></button>
</label>
</label>
</div>
</div>
</template>
</div>

<div class="mb-4">
<label x-show="formData.premiere || formData.vodup && !loading">
<span class="text-sm text-5">Presentation Video (mp4, if possible h264)</span>
<label class="flex">
<input x-ref="fileSelection2" type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateFiles('PRES', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2" @click="updateFiles('PRES', []);$refs.fileSelection2.value = '';"></button>
{{- /* Other Modes (Premiere/Record) */ -}}
<div x-show="!formData.vodup">
<div class="mb-4">
<label x-show="formData.premiere || formData.vodup && !loading">
<span class="text-sm text-5">Combined Video (mp4, if possible h264)</span>
<label class="flex">
<input x-ref="fileSelection1" type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateFiles('COMB', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2" @click="updateFiles('COMB', []);$refs.fileSelection1.value = '';"></button>
</label>
</label>
</label>
</div>
</div>

<div class="mb-4">
<label x-show="formData.premiere || formData.vodup && !loading">
<span class="text-sm text-5">Presentation Video (mp4, if possible h264)</span>
<label class="flex">
<input x-ref="fileSelection2" type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateFiles('PRES', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2" @click="updateFiles('PRES', []);$refs.fileSelection2.value = '';"></button>
</label>
</label>
</div>

<div>
<label x-show="formData.premiere || formData.vodup && !loading">
<span class="text-sm text-5">Camera Video (mp4, if possible h264)</span>
<label class="flex">
<input x-ref="fileSelection3" type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateFiles('CAM', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2" @click="updateFiles('CAM', []);$refs.fileSelection3.value = '';"></button>
<div>
<label x-show="formData.premiere || formData.vodup && !loading">
<span class="text-sm text-5">Camera Video (mp4, if possible h264)</span>
<label class="flex">
<input x-ref="fileSelection3" type="file" accept="video/mp4" class="btn tl-choose-file mt-2 mx-2 w-full"
x-on:change="updateFiles('CAM', Object.values($event.target.files));">
<button type="button" title="Deselect File" class="fa fa-trash mt-2 mx-2" @click="updateFiles('CAM', []);$refs.fileSelection3.value = '';"></button>
</label>
</label>
</label>
</div>
</div>
{{end}}
Loading
Loading