-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add link to new lecture * target blank * :) * prepared everthing for inpage recording * nice record button * video design * responsive * added select screen * add start stop methods * recording should work * added play buttonc * simplify colors * controls working * add data as a file * make it work * mute video preview * added notices * fix bug * fix OnLastSlide :)
- Loading branch information
Showing
5 changed files
with
388 additions
and
13 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
88 changes: 88 additions & 0 deletions
88
web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| {{define "lecture-record-slide"}} | ||
| <div | ||
| x-data="{ | ||
| recorder: initRecorder($el) | ||
| }" | ||
| > | ||
| <div class="dark:bg-gray-800 dark:text-orange-300 border-l-4 border-orange-500 rounded text-orange-500 p-4 bg-orange-100 mt-2"> | ||
| <p class="font-bold">Notice</p> | ||
| <p>Please keep in mind, this feature hasn't been fully tested yet. So, we recommend using it only for short recordings where you can easily redo them if anything goes wrong.</p> | ||
| </div> | ||
| <div class="flex flex-col justify-center mt-7 xl:flex-row"> | ||
| <div | ||
| class="aspect-video xl:w-[47%] xl:mx-[1.5%] my-2 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden" | ||
| :class="recorder.screencastAvailable ? 'bg-black' : 'bg-black/30 dark:bg-black/20'" | ||
| > | ||
| <div | ||
| x-show="!recorder.screencastAvailable" | ||
| @click="() => recorder.selectScreencast($refs.screenDisplay)" | ||
| class="flex justify-center flex-col items-center h-full" | ||
| > | ||
| <i class="fa fa-desktop text-2xl mb-2"></i> | ||
| <span class="block"> | ||
| Click to enable Screencast | ||
| </span> | ||
| </div> | ||
|
|
||
| <video class="h-full w-full" x-ref="screenDisplay"></video> | ||
| </div> | ||
| <div | ||
| class="aspect-video xl:w-[47%] xl:mx-[1.5%] my-2 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden" | ||
| :class="recorder.cameraAvailable ? 'bg-black' : 'bg-black/30 dark:bg-black/20'" | ||
| > | ||
| <div | ||
| x-show="!recorder.cameraAvailable" | ||
| @click="() => recorder.selectCamera($refs.camDisplay)" | ||
| class="flex justify-center flex-col items-center h-full" | ||
| > | ||
| <i class="fa fa-camera text-2xl mb-2"></i> | ||
| <span class="block"> | ||
| Click to enable Camera | ||
| </span> | ||
| </div> | ||
|
|
||
| <video class="h-full w-full" x-ref="camDisplay"></video> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="dark:text-gray-300 p-4 text-center"> | ||
| <p>We kindly draw your attention to the fact that <b>voice recording functionality is dependent on the activation of your camera feed</b>.</p> | ||
| </div> | ||
|
|
||
| <div x-show="!recorder.recordingsReady" class="flex justify-center mt-7"> | ||
| <button | ||
| @click.prevent="recorder.toggleRecording()" | ||
| class="rounded-full w-20 h-20 hover:scale-105 transition ease-in-out active:scale-90 active:bg-gray-600 flex justify-center items-center duration-100 disabled:opacity-20 disabled:scale-100 disabled:bg-gray-400" | ||
| :class="recorder.isRecording ? 'bg-gray-500' : 'bg-red-400'" | ||
| :disabled="recorder.retrieveRecording" | ||
| > | ||
| <div | ||
| class="bg-white transition-all ease-in-out duration-100" | ||
| :class="recorder.isRecording ? 'rounded w-7 h-7' : 'rounded-full w-5 h-5'" | ||
| ></div> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div x-show="recorder.recordingsReady" class="flex justify-center mt-7"> | ||
| <button | ||
| @click.prevent="recorder.deleteRecordings()" | ||
| class="rounded-full w-20 h-20 hover:scale-110 transition ease-in-out active:scale-90 flex justify-center items-center text-red-400 duration-100 disabled:opacity-20 disabled:scale-100" | ||
| > | ||
| <i class="fa fa-trash text-2xl"></i> | ||
| </button> | ||
| <button | ||
| @click.prevent="recorder.togglePlay()" | ||
| class="rounded-full w-20 h-20 hover:scale-105 transition ease-in-out bg-blue-400 active:scale-90 active:bg-gray-600 flex justify-center items-center duration-100 text-white disabled:opacity-20 disabled:scale-100 disabled:bg-gray-400" | ||
| > | ||
| <i x-show="!recorder.isPlaying" class="fa fa-play text-2xl"></i> | ||
| <i x-show="recorder.isPlaying" class="fa fa-pause text-2xl"></i> | ||
| </button> | ||
| <button | ||
| @click.prevent="recorder.resetPlay()" | ||
| class="rounded-full w-20 h-20 hover:scale-110 transition ease-in-out active:scale-90 flex justify-center items-center text-blue-400 duration-100 disabled:opacity-20 disabled:scale-100" | ||
| > | ||
| <i class="fa fa-stop text-2xl"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| {{end}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.