0

UPDATE

Guys ive made some changes on the code and realize that i can use ng-if to show what i need. This has been answered here.

I need a directive that shows data from a live if is available, else show data from a last video, by changing the directive scope based on the condition response.

I tried something like this:

directive.js

var directive = {
    link: link,
    restrict: 'EA',
    templateUrl: 'path',
    scope: {
        video: '='
    }
};
return directive;

function link(scope, element, attrs) {

    if(scope.video == 'undefined') {
        scope.video = NEW_SCOPE; //e.g 'vm.live.items'
    }

}

directive.html

<div class="container">
    <div class="video-description">
        <h4>{{video.snippet.title}}</h4>
    </div>
</div>

scope reference

<live-iframe video="vm.activity.items"></live-iframe>

I'm using the Youtube data API (v3).

To get the last video, i use the activities.list method, that returns the id from the last videos uploaded. After that i use the videos.list method, with the id's returned by the activities.list method, and use this as parameter to get the last videos. (im using these two methods, cuz the first one doesnt return video statistics as views, likes etc)

To get the live, i'd like to use the search.list method, that returns content (including ID)of the live, but i cant use it because of this.

So as audiomason said on his answer,to get the live, im using a url on the src attribute of the iframe, which returns a live of the channel (if its not live on the moment,it returns some default screen like 'the live ended'). But it returns only the live, and i wanted the title also. So to get the live, im using https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID, and to get the live title, im using the search.list method of youtube api.

RETURN LAST VIDEOS

  1. GET last video Ids - activities.method
  2. USE Ids as parameter to GET last videos content including statistics (views, likes, etc) - videos.method

RETURN LIVE

  1. GET live content (title) - search.method
  2. USE the channel live url - https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID

I made two functions, the first one changes the embed url

function checkIfLive() {
    var liveIframe = '<iframe class="liveIframe" width="480" height="270" src="https://www.youtube.com/embed/live_stream?channel=UC8racR0Ko9HzKpIBAPvifKw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    if (vm.live.items[0] == undefined) {
        $(".video").append(  vm.activity.items[0].player.embedHtml );
    } else {
        $(".video").append( liveIframe );
    }
}

The second one changes the scope, where leaves my problem.

function link(scope, element, attrs) {

    if(scope.video == 'undefined') {
        scope.video = NEW_SCOPE; //e.g 'vm.live.items'
    }

}
shoxton
  • 66
  • 10
  • How do you check if the live video is available? Do you just check if the variable for it is `undefined`? – Litty Mar 01 '18 at 21:11
  • 1
    what's the question? what's wrong with your current approach? – Bryan Chen Mar 01 '18 at 21:12
  • update `$scope.video` only when new data is available. Else it will always remain current available data. Assuming your directive is getting `video` from some template or controller's $scope. And you dont even need `link()` in that case. – Rikin Mar 01 '18 at 21:26
  • the scope is not changing as i'd like. it still the same scope after the condition executes. – shoxton Mar 01 '18 at 22:45
  • ive made some changes on the explanation of the problem, pls check it out – shoxton Mar 01 '18 at 23:35

0 Answers0