https://www.diariodoaco.com.br/assets/js/components/videosHome.js

1import {onMounted, ref} from "vue";
2import func from "../funcoes.js";
3
4export default {
5	props: {
6		qtd: {
7			type: Number,
8			default: 5,
9		},
10	},
11	setup(props) {
12		const videos = ref([]);
13
14		const getVideoId = url => {
15			const regex =
16				/(?:https?:\/\/)?(?:www\.)?youtu\.be\/([a-zA-Z0-9_-]+)|(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/;
17			const match = url.match(regex);
18			return match ? match[1] || match[2] : null;
19		};
20
21		onMounted(async () => {
22			const acao = `/api/v1/site/ultimos-videos?qtd=${props.qtd}`;
23			const res = await func.requestAPI("GET", acao, {});
24
25			if (!res.error) {
26				videos.value = res.result.map(video => {
27					return {
28						...video,
29						videoId: getVideoId(video.Externo) || "",
30					};
31				});
32			}
33		});
34
35		return {
36			func,
37			videos,
38		};
39	},
40	template: `
41		<div style="position: relative;">
42      <v-slide-group v-model="model"
43        class="carousel-video"
44        mobile
45        show-arrows>
46        <v-slide-group-item v-for="(video, index) in videos"
47          :key="index"
48          class="ml-2"
49          v-slot="{ isSelected, toggle, selectedClass }">
50
51          <div class="px-1">
52            <iframe width="400"
53              height="300"
54              :class="selectedClass"
55              :src="'https://www.youtube.com/embed/' + video.videoId + '?autoplay=' + (isSelected ? '1' : '0')"
56              title="YouTube video player"
57              frameborder="0"
58              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
59              allowfullscreen>
60						</iframe>
61          </div>
62
63        </v-slide-group-item>
64      </v-slide-group>
65    </div>		
66  `,
67};