├── thumbnail.png
├── public
    ├── favicon.ico
    └── vercel.svg
├── pages
    ├── api
    │   ├── hello.js
    │   └── getAllVideos.js
    ├── _app.js
    └── index.js
├── styles
    ├── globals.css
    └── Home.module.css
└── .gitignore


/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jfloresy/next-video-gallery/HEAD/thumbnail.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jfloresy/next-video-gallery/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default (req, res) => {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import { ChakraProvider } from "@chakra-ui/react";
 2 | 
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <ChakraProvider>
 7 |       <Component {...pageProps} />
 8 |     </ChakraProvider>
 9 |   );
10 | }
11 | 
12 | export default MyApp;
13 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 | }
 8 | 
 9 | a {
10 |   color: inherit;
11 |   text-decoration: none;
12 | }
13 | 
14 | * {
15 |   box-sizing: border-box;
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 


--------------------------------------------------------------------------------
/pages/api/getAllVideos.js:
--------------------------------------------------------------------------------
 1 | // pages/api/getAllVideos.js
 2 | var cloudinary = require("cloudinary").v2;
 3 | 
 4 | cloudinary.config({
 5 |   cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD,
 6 |   api_key: process.env.CLOUDINARY_API_KEY,
 7 |   api_secret: process.env.CLOUDINARY_API_SECRET,
 8 | });
 9 | 
10 | export default async (req, res) => {
11 |     
12 |   await cloudinary.api
13 |     .resources({ resource_type: "video" }, function (error, result) {
14 |       if (result) {
15 |         res.status(200).json(result);
16 |       }
17 |       if (error) {
18 |         console.error(error);
19 |         res.status(404).json(error);
20 |       }
21 |     })
22 |     .catch((e) => {
23 |       console.error(e);
24 |     });
25 | };
26 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="283" height="64" fill="none" viewBox="0 0 283 64"><path fill="#000" d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"/></svg>


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   min-height: 100vh;
  3 |   padding: 0 0.5rem;
  4 |   display: flex;
  5 |   flex-direction: column;
  6 |   justify-content: center;
  7 |   align-items: center;
  8 | }
  9 | 
 10 | .main {
 11 |   padding: 5rem 0;
 12 |   flex: 1;
 13 |   display: flex;
 14 |   flex-direction: column;
 15 |   justify-content: center;
 16 |   align-items: center;
 17 | }
 18 | 
 19 | .footer {
 20 |   width: 100%;
 21 |   height: 100px;
 22 |   border-top: 1px solid #eaeaea;
 23 |   display: flex;
 24 |   justify-content: center;
 25 |   align-items: center;
 26 | }
 27 | 
 28 | .footer img {
 29 |   margin-left: 0.5rem;
 30 | }
 31 | 
 32 | .footer a {
 33 |   display: flex;
 34 |   justify-content: center;
 35 |   align-items: center;
 36 | }
 37 | 
 38 | .title a {
 39 |   color: #0070f3;
 40 |   text-decoration: none;
 41 | }
 42 | 
 43 | .title a:hover,
 44 | .title a:focus,
 45 | .title a:active {
 46 |   text-decoration: underline;
 47 | }
 48 | 
 49 | .title {
 50 |   margin: 0;
 51 |   line-height: 1.15;
 52 |   font-size: 4rem;
 53 | }
 54 | 
 55 | .title,
 56 | .description {
 57 |   text-align: center;
 58 | }
 59 | 
 60 | .description {
 61 |   line-height: 1.5;
 62 |   font-size: 1.5rem;
 63 | }
 64 | 
 65 | .code {
 66 |   background: #fafafa;
 67 |   border-radius: 5px;
 68 |   padding: 0.75rem;
 69 |   font-size: 1.1rem;
 70 |   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 71 |     Bitstream Vera Sans Mono, Courier New, monospace;
 72 | }
 73 | 
 74 | .grid {
 75 |   display: flex;
 76 |   align-items: center;
 77 |   justify-content: center;
 78 |   flex-wrap: wrap;
 79 |   max-width: 800px;
 80 |   margin-top: 3rem;
 81 | }
 82 | 
 83 | .card {
 84 |   margin: 1rem;
 85 |   flex-basis: 45%;
 86 |   padding: 1.5rem;
 87 |   text-align: left;
 88 |   color: inherit;
 89 |   text-decoration: none;
 90 |   border: 1px solid #eaeaea;
 91 |   border-radius: 10px;
 92 |   transition: color 0.15s ease, border-color 0.15s ease;
 93 | }
 94 | 
 95 | .card:hover,
 96 | .card:focus,
 97 | .card:active {
 98 |   color: #0070f3;
 99 |   border-color: #0070f3;
100 | }
101 | 
102 | .card h3 {
103 |   margin: 0 0 1rem 0;
104 |   font-size: 1.5rem;
105 | }
106 | 
107 | .card p {
108 |   margin: 0;
109 |   font-size: 1.25rem;
110 |   line-height: 1.5;
111 | }
112 | 
113 | .logo {
114 |   height: 1em;
115 | }
116 | 
117 | @media (max-width: 600px) {
118 |   .grid {
119 |     width: 100%;
120 |     flex-direction: column;
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | import useSWR from "swr";
 3 | import { Box, Container, Wrap, WrapItem, Text, Center } from "@chakra-ui/react";
 4 | import {
 5 |   Video,
 6 |   Transformation,
 7 |   CloudinaryContext,
 8 |   Placeholder,
 9 | } from "cloudinary-react";
10 | import AwesomeSlider from "react-awesome-slider";
11 | import "react-awesome-slider/dist/styles.css";
12 | 
13 | export default function Home() {
14 |   const { data, error } = useSWR("/api/getAllVideos");
15 | 
16 |   if (error) return <div>failed to load</div>;
17 |   if (!data) return <div>loading...</div>;
18 | 
19 |   return (
20 |     <Box overflow="hidden" pb="3rem" bg="gray.100" px="1rem" minH="100vh">
21 |       {" "}
22 |       <Head>
23 |         <title> Next.js Video Gallery </title>
24 |         <link rel="icon" href="/favicon.ico" />
25 |       </Head>{" "}
26 |       <Container>
27 |         {" "}
28 |         <Text
29 |           as="h1"
30 |           fontWeight="semibold"
31 |           mb="1rem"
32 |           textAlign="center"
33 |           fontSize="4xl"
34 |         >
35 |           Next.js Video Gallery
36 |         </Text>
37 |       </Container>
38 |       <Wrap spacing="1rem" justify="center">
39 |         {data !== undefined &&
40 |           data.resources.map((video) => (
41 |             <WrapItem
42 |               key={video.public_id}
43 |               boxShadow="base"
44 |               rounded="20px"
45 |               overflow="hidden"
46 |               _hover={{ boxShadow: "dark-lg" }}
47 |             >
48 |               <Video
49 |                 publicId={video.public_id}
50 |                 cloudName={process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD}
51 |                 secure="true"
52 |                 controls
53 |                 fallbackContent="Your browser does not support HTML5 video tags."
54 |                 format="webm"
55 |               >
56 |                 <Transformation width="640" crop="scale" />
57 |               </Video>
58 |             </WrapItem>
59 |           ))}
60 |       </Wrap>
61 |       <Container maxW="container.md" my="2rem">
62 |         <Text
63 |           fontWeight="semibold"
64 |           mb="1rem"
65 |           textAlign="center"
66 |           textDecoration="underline"
67 |           fontSize="3xl"
68 |         >
69 |           Video Gallery with Awesome Slider
70 |         </Text>
71 |         <Box>
72 |           <AwesomeSlider>
73 |             {data !== undefined &&
74 |               data.resources.map((video) => (
75 |                 <div key={video.public_id}>
76 |                   <Video
77 |                     publicId={video.public_id}
78 |                     cloudName={process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD}
79 |                     secure="true"
80 |                     controls
81 |                   ></Video>
82 |                 </div>
83 |               ))}
84 |           </AwesomeSlider>
85 |         </Box>
86 |       </Container>
87 |     </Box>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------