Youtube videos in the SUSI iOS Client
The iOS and android client already have the functionality to play videos based on the queries. In order to implement this feature of playing videos in the iOS client, we use the Youtube Data API v3. The task here was to create an UI/UX for the playing of videos within the app. An API call is made initially to fetch the youtube videos based on the query and they video ID of the first object is extracted and used to play the video.
The API endpoint for youtube data API looks like:
https://www.googleapis.com/youtube/v3/search?part=snippet&q={query}&key={your_api_key}
Using this we get the following result: ( I am adding only the first item which is required since the response is too long )
Path: $.items[0]
{
"kind": "youtube#searchResult",
"etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/oR-eA572vNoma1XIhrbsFTotfTY\"",
"id": {
"kind": "youtube#channel",
"channelId": "UCQprMsG-raCIMlBudm20iLQ"
},
"snippet": {
"publishedAt": "2015-01-01T11:06:00.000Z",
"channelId": "UCQprMsG-raCIMlBudm20iLQ",
"title": "FOSSASIA",
"description": "FOSSASIA is supporting the development of Free and Open Source technologies for social change in Asia. The annual FOSSASIA Summit brings together ...",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/-CP18cWbo34A/AAAAAAAAAAI/AAAAAAAAAAA/kEmIgO8OjCk/s88-c-k-no-mo-rj-c0xffffff/photo.jpg"
},
"medium": {
"url": "https://yt3.ggpht.com/-CP18cWbo34A/AAAAAAAAAAI/AAAAAAAAAAA/kEmIgO8OjCk/s240-c-k-no-mo-rj-c0xffffff/photo.jpg"
},
"high": {
"url": "https://yt3.ggpht.com/-CP18cWbo34A/AAAAAAAAAAI/AAAAAAAAAAA/kEmIgO8OjCk/s240-c-k-no-mo-rj-c0xffffff/photo.jpg"
}
},
"channelTitle": "FOSSASIA",
"liveBroadcastContent": "upcoming"
}
}
We parse the above object to grab the videoID, based on the query, we will use code below:
if let itemsObject = response[Client.YoutubeResponseKeys.Items] as? [[String : AnyObject]] {
if let items = itemsObject[0][Client.YoutubeResponseKeys.ID] as? [String : AnyObject] {
let videoID = items[Client.YoutubeResponseKeys.VideoID] as? String
completion(videoID, true, nil)
}
}
This videoID is returned to the Controller where this method was called.
Now, we begin with designing the UI for the same. First of all, we need a view on which the youtube video will be played and this view would help dismiss the video by clicking on it.
First, we add the blackView to the entire screen.
// declaration
let blackView = UIView()
// Add backgroundView
func addBackgroundView() {
If let window = UIApplication.shared.keyWindow {
self.view.addSubview(blackView)
// Cover the entire screen
blackView.frame = window.frame
blackView.backgroundColor = UIColor(white: 0, alpha: 0.5)
blackView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleDismiss)))
}
}
func handleDismiss() {
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.blackView.removeFromSuperview()
}, completion: nil)
}
Next, we add the YoutubePlayerView. For this we use the Pod `YoutubePlayer`. Since, it had a few warnings showing as well as some videos not being played I had to make fixes to the original pod and use my own customized version ( available here ).
// Youtube Player
lazy var youtubePlayer: YouTubePlayerView = {
let frame = CGRect(x: 0, y: 0, width: self.view.frame.width - 16, height: self.view.frame.height * 1 / 3)
let player = YouTubePlayerView(frame: frame)
return player
}()
// Shows Youtube Player
func addYotubePlayer(_ videoID: String) {
if let window = UIApplication.shared.keyWindow {
// Add YoutubePlayer view on top of blackView
self.blackView.addSubview(self.youtubePlayer)
// Calculate and set frame
let centerX = UIScreen.main.bounds.size.width / 2
let centerY = UIScreen.main.bounds.size.height / 3
self.youtubePlayer.center = CGPoint(x: centerX, y: centerY)
// Load Player using the Video ID
self.youtubePlayer.loadVideoID(videoID)
blackView.alpha = 0
youtubePlayer.alpha = 0
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.blackView.alpha = 1
self.youtubePlayer.alpha = 1
}, completion: nil)
}
}
We are set with the UI and the only thing we are left with is to actually call the API in the client and after getting the `videoID` from that we call the above method passing this `videoID`. Before calling we need to check whether our query contains the play action or not and if it does we make the API call and add the player.
if let text = inputTextField.text {
if text.contains("play") || text.contains("Play") {
let query = text.replacingOccurrences(of: "play", with: "").replacingOccurrences(of: "Play", with: "")
Client.sharedInstance.searchYotubeVideos(query) { (videoID, _, _) in
DispatchQueue.main.async {
if let videoID = videoID {
self.addYotubePlayer(videoID)
}
}
}
}
}
We are all set now!Below is the output for the Youtube Player:
You must be logged in to post a comment.