Add Vimeo video resource #5

i added in the DB, profile page and upload page, a select combo for video type. Add Vimeo video resource. now we have the two more commons video platforms.
adriantintpilver · Nov 2, 2022 · 2aa101d · 2aa101d
1 parent 977533b
commit 2aa101d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 25 deletions.
diff --git a/src/models/Image.js b/src/models/Image.js
@@ -8,7 +8,8 @@ const imageSchema = new Schema({
     originalname: {type: String},
     copyright_name: {type: String},
     copyright_link: {type: String},
-    youtubeid: {type: String},
+    video_type: {type: Number},
+    video_id: {type: String},
     mimetype: {type: String},
     size: { type: Number},
     created_at: {type: Date, default: Date.now()}

diff --git a/src/routes/index.js b/src/routes/index.js
@@ -47,7 +47,8 @@ router.post('/upload', async (req, res) => {
     image.description = req.body.description;
     image.copyright_link = req.body.copyright_link;
     image.copyright_name = req.body.copyright_name;
-    image.youtubeid = req.body.youtubeid;
+    image.video_type = req.body.video_type;
+    image.video_id = req.body.video_id;
     image.filename = req.file.filename;
     image.path = '/img/uploads/' + req.file.filename;
     image.originalname = req.file.originalname;

diff --git a/src/views/partials/videoscripts.ejs b/src/views/partials/videoscripts.ejs
@@ -1,19 +1,23 @@
-<script>
-    // 2. This code loads the IFrame Player API code asynchronously.
-    var tag = document.createElement('script');
-    tag.src = "https://www.youtube.com/iframe_api";
-    var firstScriptTag = document.getElementsByTagName('script')[0];
-    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-    // 3. This function creates an <iframe> (and YouTube player)
-    //    after the API code downloads.
-    var player;
-    function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360',  width: '640', videoId: '<%= image.youtubeid %>', events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange }}); }
-    // 4. The API will call this function when the video player is ready.
-    function onPlayerReady(event) { event.target.playVideo(); }
-    // 5. The API calls this function when the player's state changes.
-    //    The function indicates that when playing a video (state=1),
-    //    the player should play for six seconds and then stop.
-    var done = false;
-    function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; }}
-    function stopVideo() { player.stopVideo(); }
-  </script>
+<% if (typeof image.video_id === 'string' && image.video_id.length !== 0 && typeof image.video_type === 'number' && image.video_type.length !== 0) {%>
+    <% if (image.video_type === 1) {%> <!-- Youtube --> 
+    <script>
+      // 2. This code loads the IFrame Player API code asynchronously.
+      var tag = document.createElement('script');
+      tag.src = "https://www.youtube.com/iframe_api";
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+      // 3. This function creates an <iframe> (and YouTube player)
+      //    after the API code downloads.
+      var player;
+      function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360',  width: '640', videoId: '<%= image.video_id %>', events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange }}); }
+      // 4. The API will call this function when the video player is ready.
+      function onPlayerReady(event) { event.target.playVideo(); }
+      // 5. The API calls this function when the player's state changes.
+      //    The function indicates that when playing a video (state=1),
+      //    the player should play for six seconds and then stop.
+      var done = false;
+      function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; }}
+      function stopVideo() { player.stopVideo(); }
+    </script>
+  <% } %>
+<% } %>
diff --git a/src/views/profile.ejs b/src/views/profile.ejs
@@ -10,7 +10,7 @@
 </head>
 
 <body>
-    <% if (typeof image.youtubeid === 'string' && image.youtubeid.length !== 0) {%><%- include("partials/videoscripts") -%><% }  %>
+    <% if (typeof image.video_id === 'string' && image.video_id.length !== 0) {%><%- include("partials/videoscripts") -%><% }  %>
     <%- include("partials/navigation") %>
     <div class="container p-4">
         <div class="row">
@@ -20,8 +20,13 @@
                     <div class="mt-2">
                         <p class="image-title mb-0"><%= image.title %></p>
                         <p class="card-text"><%= image.description %></p>
-                        <% if (typeof image.youtubeid === 'string' && image.youtubeid.length !== 0) {%>
-                        <div id="player"class="card-img-top border-25 soft-shadow"></div>
+                        <% if (typeof image.video_id === 'string' && image.video_id.length !== 0) {%>
+                            <% if (image.video_type === 1) {%> <!-- Youtube --> 
+                                <div id="player"class="card-img-top border-25 soft-shadow"></div>
+                            <% } %>
+                            <% if (image.video_type === 2) {%> <!-- Vimeo --> 
+                                <iframe src="https://player.vimeo.com/video/<%= image.video_id %>?h=87f80eda9b&color=000000&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen class="card-img-top border-25 soft-shadow" style="background: #000000;"></iframe>
+                            <% } %>
                         <% }  %>
                         <a class="image-copyright" href="<%= image.copyright_link %>" target="_blank"><%= image.copyright_name %></a>
                         <hr class="hr" />

diff --git a/src/views/upload.ejs b/src/views/upload.ejs
@@ -41,7 +41,13 @@
                                 <input type="text" name="copyright_link" placeholder="Copyright Link" class="form-control">
                             </div>
                             <div class="form-group">
-                                <input type="text" name="youtubeid" placeholder="youtube ID" class="form-control">
+                                <select name="video_type" class="form-control">
+                                    <option value="1">YouTube</option>
+                                    <option value="2">Vimeo</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <input type="text" name="video_id" placeholder="video ID" class="form-control">
                             </div>
                             <div class="form-group">
                                 <button class="btn light-green btn-block">