Solution Review: Demo App — Part 3

Exercise solution of making API calls using the playlists resource.

We'll cover the following

Solution: Integrate playlist resources

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <title>Video Search Bar using YouTube Data API</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container" style="margin-top: 25px; margin-bottom: 25px;">
      <div class="row">
        <a class="col-1" href="/searchResults/">Back</a>
        <h1 class="display-6 text-center col-9">YouTube Mini - Channels Stats</h1>
        <a href="#platlistsTag" class="btn btn-danger col-2" style="height: 40px;">Playlists</a>
      </div>
      <br>
      {% for resource in data.channelData.items %}
        <figure class="text-center">
          <blockquote class="blockquote">
            <h4 style="color: red;" class="text-center">
              Channel Name:
              <small class="text-muted">{{resource.snippet.title}}</small>
            </h4>
          </blockquote>
          <figcaption class="blockquote-footer">
            Channel Id: <cite title="Source Title"><a target="_blank" style="text-decoration: underline; color: black;" href="https://youtube.com/channel/{{resource.id}}">{{resource.id}}</a></cite>
          </figcaption>
        </figure>
        <br>
        <h3 class="text-center"><u>Channel Statistics</u></h3>
        <br>
        <div class="row g-3">
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total views: </span>
              {{resource.statistics.viewCount}}
            </p>
          </div>
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total subscribers: </span>
              {{resource.statistics.subscriberCount}}
            </p>
          </div>
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total videos: </span>
              {{resource.statistics.videoCount}}
            </p>
          </div>
        </div>
        <br>
        <h3 class="text-center"><u>More Videos</u></h3>
        <br>
        <div class="container">
          <div class="row">
            {% for video in data.videosData.items %}
              <div class="col center-block text-center" style="margin-bottom: 15px;">
                <iframe class="video_display" width="400" height="300" src="https://www.youtube.com/embed/{{video.id.videoId}}" frameborder="5" allowfullscreen></iframe>
                <br>
                <span class="videoTitle">{{video.videoData.title}}</span>
                <br>
                <br>
                <div id="main">
                  <form id="stats2" action="{% url 'videoStats' %}" method="POST">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger" name=videoStatsButton value={{video.id.videoId}}>Video Stats</button>
                  </form>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
        <br>
        <br>
        <h3 class="text-center" id="platlistsTag"><u>More Playlists</u></h3>
        <br>
        <div class="container">
          <div class="row">
            {% for playlist in data.playListsData.items %}
              <div class="col center-block text-center" style="margin-bottom: 15px;">
                <img src={{playlist.snippet.thumbnails.high.url}} alt="Playlist Thumbnail" width="350" height="250">
                <br>
                <span class="videoTitle">{{playlist.snippet.title}}</span>
                <br>
                <br>
                <div id="main">
                  <form id="stats2" action="{% url 'playListStats' %}" method="POST">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger" name=playListButton value={{playlist.id}}>Playlist Stats</button>
                  </form>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
    </div>
  </body>
</html>
Solution Review: Demo App — Part 3

Explanation

In the get_playlist_stats() function, the playlist items can be retrieved by using the playlistItems().list method. We use the part parameter to retrieve the snippet and contentDetails parts. The maxResults parameter is set to 25 to retrieve only 25 results. The playlistId is set to the parameter that was passed into the function. Finally, we execute our request to get a response for playlist items associated with the given playlist.

In the get_playlists() function to retrieve the playlists, we use the playlists().list method. Again, the part parameter retrieves the snippet and contentDetails parts. The maxResults parameter is set to 10 to retrieve only 10 playlists. The channelId is set to the parameter that was passed into the function. Finally, we define the fields that we want to get in our API response. Now that our request is ready, we execute it to respond with the playlists associated with the given channel.