display multiple captions issue

[Freelancingonupwork]

Dear @sampotts,

I'm currently facing multiple caption-related issues within my AngularJS project, specifically with a custom video player directive that utilizes the Plyr library for embedding and controlling Vimeo videos. The main problems revolve around incorrect captioning behavior.

Project Configuration:

Code Language: AngularJS
Video Type: Vimeo

Here is my code:

1. Custom Directive Creation:
   `(function (base) {
   'use strict';

   base.directive('plyrPlayer', ['logService', '$timeout', function (logService, $timeout) {
   return {
   link: function ($scope, $element, $attr) {
   var player;
   var element = $element[0];
   var secondsWatched = $attr.secondsWatched;
   var showMaximized = $attr.showMaximized === "on";
   var provider = $attr.plyrProvider;

            function createPlayer(vimeoId, videotype) {
                debugger;
                element.setAttribute('data-plyr-provider', videotype);
                element.setAttribute('data-plyr-embed-id', vimeoId);
                player = new Plyr(element, { "id": "player", "autoplay": false, "hideControls": false, "clickToPlay": false });
   
                player.on("play", function (data) {
   
                    var loadingId = $element.data("loadingId");
                    if (angular.isNumber(loadingId)) {
                        logService.debug("evimeoPlayer: video loading failed assuming vimeoId: %o", loadingId);
                        $element.removeData("loadingId");
                        $element.data("vimeoId", loadingId);
                    } else
                        logService.debug("evimeoPlayer: play video vimeoId: %o", $element.data("vimeoId"));
   
                    function maximizePlayer(el) {
                        var style = el.style;
                        style.position = "fixed";
                        style.zIndex = "100";
                        style.top = "0";
                        style.bottom = "0";
                        style.left = "0";
                        style.right = "0";
   
                        var iframe = element.firstChild;
                        style = iframe.style;
                        // size to 100% of the viewport
                        style.width = "100vw";
                        style.height = "100vh";
                    }
                    if (angular.isFunction($scope.$parent.onPlayStart))
                        $scope.$parent.onPlayStart();
   
                    if (showMaximized)
                        maximizePlayer(element);
                });
   
   
                player.on("pause", function (data) {
   
                    const instance = data.detail.plyr;
                    var mydata = {
                        duration: instance.media.duration,
                        percent: Math.floor(instance.media.currentTime / instance.media.duration * 100),
                        seconds: instance.media.currentTime,
                        vimeoId: $element.data("vimeoId")
                    };
   
                    $scope.$parent[secondsWatched] = mydata;
   
                    if (angular.isFunction($scope.$parent.onPlayStop)) {
                        // $scope.$parent.onPlayStop(data.duration === data.seconds);
                        $scope.$parent.onPlayStop(false);
                    }
   
                });
   
                player.on("timeupdate", function (data) {
   
                    $timeout(function () {
                        const instance = data.detail.plyr;
                        var mydata = {
                            duration: instance.media.duration,
                            percent: Math.floor(instance.media.currentTime / instance.media.duration * 100),
                            seconds: instance.media.currentTime,
                            vimeoId: $element.data("vimeoId")
                        };
   
                        $scope.$parent[secondsWatched] = mydata;
                        $scope.$parent.$digest();
                        $scope[secondsWatched] = mydata;
   
                        if (angular.isFunction($scope.$parent.updateSecondsWatched))
                            $scope.$parent.updateSecondsWatched(mydata);
   
                    }, 10);
   
                });
   
   
                player.on("ended", function (data) {
   
                    function minimizePlayer(el) {
                        var style = el.style;
                        // return the player to the original size
                        style.position = "";
                        style.zIndex = "";
                        style.top = "";
                        style.bottom = "";
                        style.left = "";
                        style.right = "";
                        var iframe = el.firstChild;
   
                        style = iframe.style;
                        style.width = "";
                        style.height = "";
                    }
   
                    logService.debug("evimeoPlayer: video ended vimeoId: %o", $element.data("vimeoId"));
   
                    $scope.$parent.onPlayStop(true);
   
                    if (showMaximized)
                        minimizePlayer(element);
   
                });
   
                player.on("loadstart", function (data) {
                    $element.removeData("loadingId");
                    $element.data("vimeoId", data.id);
                    logService.debug("evimeoPlayer: video loaded vimeoId: %o", data.id);
   
                });
   
                player.on("ready", function (data) {
                    const instance = data.detail.plyr;
   
   
                    var progress = 0;
                    if (angular.isFunction($scope.$parent.getCurrentProgress))
                        progress = $scope.$parent.getCurrentProgress();
   
                    if (progress <= 0) {
                        return;
                    }
   
                    data.detail.plyr.loop = false;
                    //player.embed.setCurrentTime(progress);
                    player.pause();
                });
                return player;
            }
            ;
   
   
            $scope.$watchGroup([$attr.plyrEmbedId, $attr.plyrProvider], function (value1, value2, scope) {
   
                var videotype = scope.$$watchers[0].last;
                if (videotype == "vimeo") {
                    var vimeoId = parseInt(scope.$$watchers[1].last);
                    if (!angular.isNumber(vimeoId)) {
                        logService.debug("evimeoPlayer: vimeoId is not available")
                        return;
                    }
                } else {
                    var vimeoId = scope.$$watchers[1].last;
                }
                if (!player) {
                    debugger;
                    player = createPlayer(vimeoId, videotype);
                    logService.debug("evimeoPlayer: created player vimeoId: %o", vimeoId);
                    $element.data("vimeoId", vimeoId);
                } else {
   
                    player.pause();
                    //.then(function () {
                    // loading the video often doesn't complete to the point that the loaded event is fired
                    // but the video is loaded.  Loading the thumbnail image fails.  Capture the loadingId and
                    // apply that in playing if it exists.
   
                    $element.data("loadingId", vimeoId);
                    logService.debug("evimeoPlayer: video loading vimeoId: %o", vimeoId);
   
                    player.source = {
                        type: 'video',
                        sources: [
                            {
                                src: vimeoId,
                                provider: videotype,
                            },
                        ],
                    };
                    console.log(player);
                    $element.data("vimeoId", vimeoId);
   
                }
            }, true);
        },
        restrict: 'EA',
        scope: false
    }
   

   }
   ]
   );

}(lmsApp));

`
2. HTML Code Usage:

<div data-plyr-provider="vimeo" data-plyr-embed-id="849110707" plyr-player id="player" class="viewer-content" seconds-watched="secondsWatched"></div>

3. Loading the Directive in HTML:
   "~/scripts/lms/vendor/plyr.js",

I would greatly appreciate your help and guidance in resolving these caption-related issues.

Warm regards,

[FearMyInnerSelf]

Got the same issue. And while looking for a misconfiguration on my part, I stumbled upon the example code here, where it also has the same issue.
https://codepen.io/pen?template=bKeXNq

The captions of the embedded vimeo video are getting displayed and if CC is active or getting activated they will be displayed additionally. It seems that captions are enabled by default before the video is implemented for the plyr player itself.

If there is a configuration which I missed, please let me know. Any help would be appreciated.

Kind regards

EDIT:
I just played a bit around. When I switch to a language that is not available for captions, they won't show. If I then click on CC both captions (small and large) appear. If I click on CC again, only the large captions disappear.

const player = new Plyr($(this), { controls : [ 'play-large', 'play', 'progress', 'current-time', 'fullscreen', 'captions', 'mute' ], vimeo: { dnt: true }, captions: { active: false, language: 'en', update: false }, });