CODEWITHSUNDEEP
javascripthtmldomvideoknockout.js
curious_debugger
curious_debugger

Reputation: 329

Html not displaying values through knockout observable.

I am working on a video player app, I have set up various video player app functions like play,pause,forward and rewind.

I am facing issue with the fast forward button, when I hit fast forward The Html DOM does not display the first fast forward i.e 1.5x and when I hit again for 2x, it displays that.. I need help figuring out, why it would not 1.5x ?

Here is my html 

<!-- playback controls -->
        <div class="clearfix playback-set1">
            <div class="pull-left">
                <div class="edit-btn-list-container">
                    <ul class="unstyled-list edit-btn-list clearfix">
                        <li style="margin-top: 8px; width: 45px; margin-left: 0;">
                            <a data-bind="click:play, event:{ended:playerOnEnded}" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Play" style="font-size: 25px;"><span data-bind="if: !playerPlaying()"><i class="fa fa-play"></i></span><span data-bind="if: playerPlaying"><i class="fa fa-pause"></i></span></a>
                        </li>
                        <li><a data-bind="click:rewindClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Rewind"><i class="fa fa-fast-backward fa-fw"></i><!-- ko if:intervalRewind() != null --><span data-bind="text:playbackRateIndicator"></span><!-- /ko --></a></li>
                        <li><a data-bind="event:{mousedown:function(){startstep('backward');}}" data-placement="bottom" class="btn btn-alt btn-default" data-toggle="tooltip" data-original-title="Step Backward"><i class="fa fa-step-backward fa-fw"></i></a></li>
                        <li><a data-bind="event:{mousedown:function(){startstep('forward');}}" data-placement="bottom" class="btn btn-alt btn-default" data-toggle="tooltip" data-original-title="Step Forward"><i class="fa fa fa-step-forward fa-fw"></i></a></li>
                        <li><a data-bind="click:fastForwardClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Fast Forward"><!-- ko if:intervalRewind() == null --><span data-bind="text:playbackRateIndicator"></span><!-- /ko --><i class="fa fa-fast-forward fa-fw"></i></a></li>
                    </ul>
                </div>
            </div>

Here is the corresponding javascript code !! 

self.playbackRateIndicator = ko.observable();
    self.playbackRate0 = 1.5;
    self.playbackRate2 = 2.0;
    self.playbackRate1 = 1.0;
    self.playbackRate4 = 4.0;
    self.playbackRate8 = 8.0;

    self.fastForwardClick = function () { self.fastForward(null); }

    self.fastForward = function (playbackRate) {
        if (videoSelector().paused) {
            videoSelector().play();
        }

        if (self.intervalRewind() != null) {
            clearInterval(self.intervalRewind());
            self.intervalRewind(null);
        }
        var newPlaybackRate = self.playbackRate1;
        switch (videoSelector().playbackRate) {

              case self.playbackRate1:
                newPlaybackRate = self.playbackRate0;
                break;

            case self.playbackRate0:
                newPlaybackRate = self.playbackRate2;
                break;
            case self.playbackRate2:
                newPlaybackRate = self.playbackRate4;
                break;
            case self.playbackRate4:
                newPlaybackRate = self.playbackRate8;
                break;
            case self.playbackRate8:
                newPlaybackRate = self.playbackRate1;
                break;
            default:
                newPlaybackRate = self.playbackRate1;
                break;
        }

Help is appreciated. Thank you!!

Upvotes: 0

Views: 285

Answers (1)

Roy J
Roy J

Reputation: 43881

In the code you posted, you never set a value for playbackRateIndicator. In your switch, you set a local variable. At the end of the switch, you should transfer that value into your observable:

playbackRateIndicator(newPlaybackRate);

I cannot explain why you get 2x and don't get 1.5x because I cannot explain why you would ever see any change, since you never set the associated observable.

It is always a good idea to try to create a Minimal Complete Verifiable Example of problem code - the simplest Fiddle you can write that demonstrates the problem. In the first place, you will often figure out for yourself what is going on, but if not, it gives us something to work with where we can be sure to find the problem.

Here is how I would do it: 

vm = {
  rates: [1,1.5,2,4,8],
  playbackRateIndicator: ko.observable(),
  intervalRewind: ko.observable(null),
  fastForwardClick: function () {
    console.log("Forward!");
    let currentRateIndex = vm.rates.indexOf(vm.playbackRateIndicator()) + 1;
    
    if (currentRateIndex > vm.rates.length - 1) {
      currentRateIndex = vm.rates.length - 1;
    }
    vm.playbackRateIndicator(vm.rates[currentRateIndex]);
  }
};

ko.applyBindings(vm);
.unstyled-list {
  list-style: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="edit-btn-list-container">
  <ul class="unstyled-list edit-btn-list clearfix">
    <li>
      <a data-bind="click:fastForwardClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Fast Forward">
        <!-- ko if:intervalRewind() == null --><span data-bind="text:playbackRateIndicator"></span>
        <!-- /ko --><i class="fa fa-fast-forward fa-fw"></i></a>
    </li>
  </ul>
</div>

Upvotes: 0

Related Questions