Spaces:
Sleeping
Sleeping
File size: 2,731 Bytes
74cf6bd 0ad6b1b 74cf6bd 5bea760 74cf6bd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
{% extends "base.html" %}
{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="lg:col-span-1">
<div class="card bg-base-100 shadow-xl">
<div class="card-body p-4">
<div class="aspect-video">
<iframe id="youtube-player" class="w-full h-full"
src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&start={{ start_time }}{% if start_time > 0 %}&autoplay=1&mute=1{% endif %}"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<div class="lg:col-span-1">
<div class="card bg-base-100 shadow-xl sticky top-4">
<div class="card-body">
<div class="flex justify-between items-center">
<h2 class="card-title">Video Transcript</h2>
</div>
<div class="form-control mb-4">
<label class="label">
<span class="label-text">Search in transcript</span>
</label>
<div class="join w-full">
<input type="text" id="search-input" placeholder="Search in this video..." class="input input-bordered join-item w-full" />
<button id="search-button" class="btn btn-primary join-item">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
Search
</button>
</div>
</div>
<div id="loading" class="hidden mt-2 mb-2">
<span class="loading loading-spinner loading-md"></span>
<span class="ml-2">Searching...</span>
</div>
<div id="transcript-container" class="mt-2 transcript-container">
<!-- Transcript will be loaded here -->
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
// Store the video ID in a JavaScript variable
const videoId = "{{ video_id }}";
</script>
<script src="{{ https_url_for('static', path='/js/video.js') }}"></script>
{% endblock %}
|