generated from ricardo/MVCLogin
260 lines
10 KiB
Plaintext
260 lines
10 KiB
Plaintext
@using SumaTube.Models;
|
|
|
|
@model VideoSummaryViewModel
|
|
@{
|
|
ViewData["Title"] = "Resumo do Vídeo";
|
|
}
|
|
|
|
@section Styles {
|
|
<style type="text/css">
|
|
.timestamp-link {
|
|
color: var(--suma-red);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.timestamp-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.summary-section {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tag-pill {
|
|
background-color: var(--suma-beige);
|
|
border-radius: 20px;
|
|
padding: 5px 15px;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
display: inline-block;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.summary-tab-content {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.video-frame {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.transcription-text {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
background-color: var(--suma-light-gray);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
line-height: 1.7;
|
|
}
|
|
</style>
|
|
}
|
|
|
|
<div class="container mt-4">
|
|
<div class="row">
|
|
<!-- Coluna do vídeo -->
|
|
<div class="col-lg-8">
|
|
<div class="video-frame mb-4">
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/@Model.VideoId" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary-section">
|
|
<h1>@Model.VideoTitle</h1>
|
|
<div class="d-flex align-items-center mb-3">
|
|
<img src="@Model.ChannelThumbnail" alt="@Model.ChannelName" class="rounded-circle mr-2" style="width: 40px; height: 40px;">
|
|
<div>
|
|
<h6 class="mb-0">@Model.ChannelName</h6>
|
|
<small class="text-muted">@Model.PublishedDate • @Model.ViewCount visualizações</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mt-3 mb-3">
|
|
<div>
|
|
<span class="mr-3">
|
|
<i class="bi bi-hand-thumbs-up"></i> @Model.LikeCount
|
|
</span>
|
|
<span>
|
|
<i class="bi bi-chat-left-text"></i> @Model.CommentCount
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-dark mr-2">
|
|
<i class="bi bi-share"></i> Compartilhar
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-dark">
|
|
<i class="bi bi-bookmark"></i> Salvar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs de navegação -->
|
|
<ul class="nav nav-tabs" id="summaryTabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="summary-tab" data-toggle="tab" href="#summary" role="tab" aria-controls="summary" aria-selected="true">
|
|
<i class="bi bi-journal-text"></i> Resumo
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="transcription-tab" data-toggle="tab" href="#transcription" role="tab" aria-controls="transcription" aria-selected="false">
|
|
<i class="bi bi-body-text"></i> Transcrição
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="keywords-tab" data-toggle="tab" href="#keywords" role="tab" aria-controls="keywords" aria-selected="false">
|
|
<i class="bi bi-tags"></i> Palavras-chave
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Conteúdo das tabs -->
|
|
<div class="tab-content summary-tab-content p-3 bg-white border border-top-0 rounded-bottom mb-4" id="summaryTabsContent">
|
|
<!-- Tab Resumo -->
|
|
<div class="tab-pane fade show active" id="summary" role="tabpanel" aria-labelledby="summary-tab">
|
|
<h4 class="mb-3">Principais pontos</h4>
|
|
|
|
@foreach (var point in Model.KeyPoints)
|
|
{
|
|
<div class="mb-3">
|
|
<p>
|
|
@* <a class="timestamp-link" data-time="@point.TimestampSeconds">@point.TimestampFormatted</a>
|
|
<strong>@point.Title</strong>
|
|
</p>
|
|
<p>@point.Description</p>
|
|
|
|
*@
|
|
<a class="timestamp-link" data-time="30">30s</a>
|
|
<strong>Titulo</strong>
|
|
</p>
|
|
<p>Description</p>
|
|
</div>
|
|
}
|
|
|
|
<h4 class="mt-4 mb-3">Resumo geral</h4>
|
|
<p>@Model.SummaryText</p>
|
|
</div>
|
|
|
|
<!-- Tab Transcrição -->
|
|
<div class="tab-pane fade" id="transcription" role="tabpanel" aria-labelledby="transcription-tab">
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h4 class="mb-3">Transcrição completa</h4>
|
|
<button class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-download"></i> Baixar
|
|
</button>
|
|
</div>
|
|
<div class="transcription-text">
|
|
@foreach (var caption in Model.Captions)
|
|
{
|
|
<p>
|
|
@*
|
|
<a class="timestamp-link" data-time="@caption.TimestampSeconds">
|
|
@caption.TimestampFormatted
|
|
</a>
|
|
@caption.Text
|
|
|
|
*@
|
|
<a class="timestamp-link" data-time="30s">
|
|
30s
|
|
</a>
|
|
caption.Text
|
|
|
|
</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Palavras-chave -->
|
|
<div class="tab-pane fade" id="keywords" role="tabpanel" aria-labelledby="keywords-tab">
|
|
<h4 class="mb-3">Tópicos principais</h4>
|
|
<div class="mb-4">
|
|
@foreach (var keyword in Model.Keywords)
|
|
{
|
|
<span class="tag-pill">@keyword</span>
|
|
}
|
|
</div>
|
|
|
|
<h4 class="mb-3">Temas relacionados</h4>
|
|
<div>
|
|
@foreach (var topic in Model.RelatedTopics)
|
|
{
|
|
<span class="tag-pill">@topic</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coluna lateral -->
|
|
<div class="col-lg-4">
|
|
<!-- Vídeos recomendados -->
|
|
<div class="summary-section">
|
|
<h5 class="mb-3">Vídeos relacionados</h5>
|
|
|
|
@foreach (var video in Model.RelatedVideos)
|
|
{
|
|
<div class="media mb-3">
|
|
@*
|
|
<img src="@video.ThumbnailUrl" class="mr-3" alt="@video.Title" style="width: 120px; border-radius: 4px;">
|
|
<div class="media-body">
|
|
<h6 class="mt-0">@video.Title</h6>
|
|
<small class="text-muted">@video.ChannelName</small><br>
|
|
<small class="text-muted">@video.ViewCount visualizações</small>
|
|
</div>
|
|
*@
|
|
<img src="#ThumbnailUrl" class="mr-3" alt="#Title" style="width: 120px; border-radius: 4px;">
|
|
<div class="media-body">
|
|
<h6 class="mt-0">Title</h6>
|
|
<small class="text-muted">video.ChannelName</small><br>
|
|
<small class="text-muted">x visualizações</small>
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Call to action para planos premium -->
|
|
<div class="summary-section text-center" style="background-color: var(--suma-beige);">
|
|
<i class="bi bi-star-fill mb-3" style="font-size: 2rem; color: var(--suma-red);"></i>
|
|
<h5>Obtenha mais recursos com o plano Premium</h5>
|
|
<p class="small mb-3">Acesso ilimitado a resumos, download de textos e muito mais.</p>
|
|
<a href="#" class="btn btn-primary btn-block">Ver planos</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// Função para clicar nos timestamps e pular para o momento do vídeo
|
|
$('.timestamp-link').click(function() {
|
|
var time = $(this).data('time');
|
|
var videoFrame = $('iframe')[0];
|
|
var videoUrl = videoFrame.src;
|
|
|
|
// Garantir que a URL tem os parâmetros necessários
|
|
if (videoUrl.indexOf('?') === -1) {
|
|
videoUrl += '?';
|
|
} else {
|
|
videoUrl += '&';
|
|
}
|
|
|
|
// Adicionar comando para pular para o tempo específico
|
|
videoUrl += 'start=' + time;
|
|
|
|
// Atualizar o iframe
|
|
videoFrame.src = videoUrl;
|
|
});
|
|
});
|
|
</script>
|
|
} |