add mais funcoes na criacao de video
This commit is contained in:
LeoMortari
@@ -8,6 +8,11 @@ import Videos from "@/routes/videos";
|
||||
import NewVideo from "@/routes/videos/new";
|
||||
import Login from "@/routes/auth/Login";
|
||||
|
||||
export const MENUS = {
|
||||
VIDEOS: "VIDEOS",
|
||||
USUARIOS: "USUARIOS",
|
||||
};
|
||||
|
||||
const getUserRoles = () => {
|
||||
const rolesFromCookie = Cookies.get("user_roles"); // TODO: Tirar as permissões do usuário
|
||||
|
||||
@@ -33,6 +38,7 @@ export const routes = [
|
||||
title: "Vídeos",
|
||||
permissions: [roles.VIDEOS_LIST],
|
||||
showinModal: true,
|
||||
menu: MENUS.VIDEOS,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -44,6 +50,7 @@ export const routes = [
|
||||
title: "Novo Vídeo",
|
||||
permissions: [roles.VIDEOS_LIST],
|
||||
showinModal: false,
|
||||
menu: MENUS.VIDEOS,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -50,18 +50,109 @@
|
||||
</div>
|
||||
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-3">
|
||||
<div class="col-12">
|
||||
<DisplayValue label="Descrição" :value="video.description" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-4">
|
||||
<DisplayValue label="Video ID" :value="video.id" />
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="col-4">
|
||||
<DisplayValue label="Duração" :value="getDuration()" />
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="col-4">
|
||||
<DisplayValue label="Data de Postagem" :value="getDateVideo()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-4">
|
||||
<DisplayValue
|
||||
label="Visualizações"
|
||||
:value="convertoToNumberFormat(video.view_count)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<DisplayValue
|
||||
label="Likes"
|
||||
:value="convertoToNumberFormat(video.like_count)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<DisplayValue
|
||||
label="Comentários"
|
||||
:value="convertoToNumberFormat(video.comment_count)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-6">
|
||||
<DisplayValue
|
||||
label="Categorias"
|
||||
:value="video.categories.join(', ')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-mt-md">
|
||||
<div style="color: #999; font-weight: bold">Tags</div>
|
||||
|
||||
<div class="row q-mt-sm">
|
||||
<div v-for="tag in video.tags" :key="tag">
|
||||
<q-chip color="primary">{{ tag }}</q-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="q-mt-md" />
|
||||
|
||||
<div class="row q-mt-md q-pa-sm">
|
||||
<span class="text-center text-h6">Canal</span>
|
||||
</div>
|
||||
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-4">
|
||||
<q-tooltip :offset="[-200, 0]">
|
||||
Clique para abrir no youtube
|
||||
</q-tooltip>
|
||||
<a :href="video.channel_url" target="_blank">
|
||||
<DisplayValue label="Canal" :value="video.channel" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<DisplayValue
|
||||
label="Inscritos"
|
||||
:value="convertoToNumberFormat(video.channel_follower_count)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<DisplayValue label="Identificador" :value="video.channel_id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator v-if="video.thumbnail" class="q-mt-md" />
|
||||
|
||||
<div v-if="video.thumbnail" class="row q-mt-md q-pa-sm">
|
||||
<span class="text-center text-h6">Thumbnail</span>
|
||||
</div>
|
||||
|
||||
<div v-if="video.thumbnail" class="row q-pa-sm">
|
||||
<img
|
||||
:src="video.thumbnail"
|
||||
alt="Thumbnail"
|
||||
height="300"
|
||||
width="500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="user-list q-pa-md">
|
||||
@@ -70,6 +161,23 @@
|
||||
</p>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card flat bordered>
|
||||
<div class="row justify-between q-pa-sm">
|
||||
<div>
|
||||
<Button label="Voltar" color="negative" @click="handleCancel" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
label="Cadastrar"
|
||||
@click="handleSave"
|
||||
:loading="saveLoading"
|
||||
:disabled="!video.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -86,39 +194,39 @@ import { getErrorMessage } from "@utils/axios";
|
||||
|
||||
dayjs.extend(duration);
|
||||
|
||||
const mock = {
|
||||
id: "x9-YRAYhesI",
|
||||
title:
|
||||
"PROVEI A COMIDA DO EXÉRCITO CHINÊS - TROPA DE ELITE DA CHINA, PACOTE RARO",
|
||||
thumbnail: "https://i.ytimg.com/vi_webp/x9-YRAYhesI/maxresdefault.webp",
|
||||
description:
|
||||
"Hoje iremos experimentar o mais novo pacote de ração militar das forças de elite da China, um dos pacotes de MRE mais difíceis e raros! Vamos comparar para ver se esse pacote é superior ao do exército do Brasil!?",
|
||||
channel_id: "UCcFgREmujdPHvA7I_VOmgIA",
|
||||
channel_url: "https://www.youtube.com/channel/UCcFgREmujdPHvA7I_VOmgIA",
|
||||
duration: 1534,
|
||||
view_count: 352973,
|
||||
webpage_url: "https://www.youtube.com/watch?v=x9-YRAYhesI",
|
||||
categories: ["People & Blogs"],
|
||||
tags: [
|
||||
"area secreta",
|
||||
"mre",
|
||||
"camping",
|
||||
"balian",
|
||||
"acampamento",
|
||||
"comida do exército",
|
||||
"ração militar",
|
||||
"sobrevivi",
|
||||
"24 horas",
|
||||
"acampando",
|
||||
"comida chinesa",
|
||||
],
|
||||
comment_count: 785,
|
||||
like_count: 26175,
|
||||
channel: "Área Secreta",
|
||||
channel_follower_count: 10700000,
|
||||
uploader: "Área Secreta",
|
||||
timestamp: 1740956718,
|
||||
};
|
||||
// const mock = {
|
||||
// id: "x9-YRAYhesI",
|
||||
// title:
|
||||
// "PROVEI A COMIDA DO EXÉRCITO CHINÊS - TROPA DE ELITE DA CHINA, PACOTE RARO",
|
||||
// thumbnail: "https://i.ytimg.com/vi_webp/x9-YRAYhesI/maxresdefault.webp",
|
||||
// description:
|
||||
// "Hoje iremos experimentar o mais novo pacote de ração militar das forças de elite da China, um dos pacotes de MRE mais difíceis e raros! Vamos comparar para ver se esse pacote é superior ao do exército do Brasil!?",
|
||||
// channel_id: "UCcFgREmujdPHvA7I_VOmgIA",
|
||||
// channel_url: "https://www.youtube.com/channel/UCcFgREmujdPHvA7I_VOmgIA",
|
||||
// duration: 1534,
|
||||
// view_count: 352973,
|
||||
// webpage_url: "https://www.youtube.com/watch?v=x9-YRAYhesI",
|
||||
// categories: ["People & Blogs"],
|
||||
// tags: [
|
||||
// "area secreta",
|
||||
// "mre",
|
||||
// "camping",
|
||||
// "balian",
|
||||
// "acampamento",
|
||||
// "comida do exército",
|
||||
// "ração militar",
|
||||
// "sobrevivi",
|
||||
// "24 horas",
|
||||
// "acampando",
|
||||
// "comida chinesa",
|
||||
// ],
|
||||
// comment_count: 785,
|
||||
// like_count: 26175,
|
||||
// channel: "Área Secreta",
|
||||
// channel_follower_count: 10700000,
|
||||
// uploader: "Área Secreta",
|
||||
// timestamp: 1740956718,
|
||||
// };
|
||||
|
||||
export default {
|
||||
name: "NewVideo",
|
||||
@@ -131,7 +239,7 @@ export default {
|
||||
return {
|
||||
url: "",
|
||||
loading: false,
|
||||
video: mock,
|
||||
video: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -167,6 +275,13 @@ export default {
|
||||
|
||||
return duration.format("HH:mm:ss");
|
||||
},
|
||||
convertoToNumberFormat(number) {
|
||||
const formatter = new Intl.NumberFormat("pt-BR", {
|
||||
maximumSignificantDigits: 3,
|
||||
});
|
||||
|
||||
return formatter.format(number);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -175,4 +290,9 @@ export default {
|
||||
.user-list {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user