invidious-mod-JP/src/invidious/views/components/player.ecr

<video style="outline:none;width:100%;background-color:#000" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
    id="player" class="video-js"
    onmouseenter='this["data-title"]=this["title"];this["title"]=""'
    onmouseleave='this["title"]=this["data-title"];this["data-title"]=""'
    oncontextmenu='this["title"]=this["data-title"]'
    <% if params.autoplay %>autoplay<% end %>
    <% if params.video_loop %>loop<% end %>
    <% if params.controls %>controls<% end %>>
    <% if hlsvp %>
        <source src="<%= hlsvp %>?local=true" type="application/x-mpegURL" label="livestream">
    <% else %>
        <% if params.listen %>
            <% audio_streams.each_with_index do |fmt, i| %>
                <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params.local %>&local=true<% end %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
            <% end %>
          <% else %>
            <% if params.quality == "dash" %>
                <source src="/api/manifest/dash/id/<%= video.id %>?local=true" type='application/dash+xml' label="dash">
            <% end %>

            <% fmt_stream.each_with_index do |fmt, i| %>
                <% if params.quality %>
                    <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params.local %>&local=true<% end %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= params.quality == fmt["label"].split(" - ")[0] %>">
                <% else %>
                    <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params.local %>&local=true<% end %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
                <% end %>
            <% end %>
        <% end %>

        <% preferred_captions.each_with_index do |caption, i| %>
            <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>&hl=<%= env.get("preferences").as(Preferences).locale %>"
                label="<%= caption.name.simpleText %>" <% if i == 0 %>default<% end %>>
        <% end %>

        <% captions.each do |caption| %>
            <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>&hl=<%= env.get("preferences").as(Preferences).locale %>"
                label="<%= caption.name.simpleText %>">
        <% end %>
    <% end %>
</video>

<script>
var options = {
    <% if aspect_ratio %>
    aspectRatio: "<%= aspect_ratio %>",
    <% end %>
    preload: "auto",
    playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
    controlBar: {
        children: [
            "playToggle",
            "volumePanel",
            "currentTimeDisplay",
            "timeDivider",
            "durationDisplay",
            "progressControl",
            "remainingTimeDisplay",
            "captionsButton",
            "qualitySelector",
            "playbackRateMenuButton",
            "fullscreenToggle"
        ]
    }
}

var shareOptions = {
    socials: ["fbFeed", "tw", "reddit", "email"],

    url: window.location.href,
    title: "<%= video.title.dump_unquoted %>",
    description: "<%= description %>",
    image: "<%= thumbnail %>",
    embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' \
        src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>"
}

var player = videojs("player", options, function() {
    this.hotkeys({
        volumeStep: 0.1,
        seekStep: 5,
        enableModifiersForNumbers: false,
        enableHoverScroll: true,
        customKeys: {
            // Toggle play with K Key
            play: {
                key: function(e) {
                    return e.which === 75;
                },
                handler: function(player, options, e) {
                    if (player.paused()) {
                        player.play();
                    } else {
                        player.pause();
                    }
                }
            },
            // Go backward 10 seconds
            backward: {
                key: function(e) {
                    return e.which === 74;
                },
                handler: function(player, options, e) {
                    player.currentTime(player.currentTime() - 10);
                }
            },
            // Go forward 10 seconds
            forward: {
                key: function(e) {
                    return e.which === 76;
                },
                handler: function(player, options, e) {
                    player.currentTime(player.currentTime() + 10);
                }
            },
            // Increase speed
            increase_speed: {
                key: function(e) {
                    return (e.which === 190 && e.shiftKey);
                },
                handler: function(player, _, e) {
                    size = options.playbackRates.length;
                    index = options.playbackRates.indexOf(player.playbackRate());
                    player.playbackRate(options.playbackRates[(index + 1) % size]);
                }
            },
            // Decrease speed
            decrease_speed: {
                key: function(e) {
                    return (e.which === 188 && e.shiftKey);
                },
                handler: function(player, _, e) {
                    size = options.playbackRates.length;
                    index = options.playbackRates.indexOf(player.playbackRate());
                    player.playbackRate(options.playbackRates[(size + index - 1) % size]);
                }
            }
        }
    });
});

player.on('error', function(event) {
    if (player.error().code === 2 || player.error().code === 4) {
        setInterval(setTimeout(function (event) {
            console.log('An error occured in the player, reloading...');

            var currentTime = player.currentTime();
            var playbackRate = player.playbackRate();
            var paused = player.paused();

            player.load();

            if (currentTime > 0.5) {
                currentTime -= 0.5;
            }

            player.currentTime(currentTime);
            player.playbackRate(playbackRate);

            if (!paused) {
                player.play();
            }
        }, 5000), 5000);
    }
});

<% if params.video_start > 0 || params.video_end > 0 %>
player.markers({
    onMarkerReached: function(marker) {
        if (marker.text === 'End') {
            if (player.loop()) {
                player.markers.prev('Start');
            } else {
                player.pause();
            }
        }
    },
    markers: [
        { time: <%= params.video_start %>, text: 'Start' },
        <% if params.video_end < 0 %>
            { time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: 'End' }
        <% else %>
            { time: <%= params.video_end %>, text: 'End' }
        <% end %>
    ]
});

player.currentTime(<%= params.video_start %>);
<% end %>

player.volume(<%= params.volume.to_f / 100 %>);
player.playbackRate(<%= params.speed %>);

<% if params.autoplay %>
var bpb = player.getChild('bigPlayButton');

if (bpb) {
    bpb.hide();

    player.ready(function() {
        new Promise(function(resolve, reject) {
            setTimeout(() => resolve(1), 1);
        }).then(function(result) {
        var promise = player.play();

        if (promise !== undefined) {
            promise.then(_ => {
            }).catch(error => {
                bpb.show();
            });
        }
    });
  });
}
<% end %>

<% if !params.listen && params.quality == "dash" %>
player.httpSourceSelector();
<% end %>

player.vttThumbnails({
    src: location.origin + '/api/v1/storyboards/<%= video.id %>?height=90'
});

<% if !params.listen && params.annotations %>
var video_container = document.getElementById('player');
let xhr = new XMLHttpRequest();
xhr.responseType = 'text';
xhr.timeout = 60000;
xhr.open('GET', '/api/v1/annotations/<%= video.id %>', true);
xhr.send();

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
            if (!player.paused()) {
                player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
            } else {
                player.one('play', function(event) {
                    player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
                });
            }
        }
    }
}

window.addEventListener('__ar_annotation_click', e => {
    const { url, target, seconds } = e.detail;
    var path = new URL(url);

    if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
        path.search += '&t=' + seconds;
    }

    path  = path.pathname + path.search;

    if (target === 'current') {
        window.location.href = path;
    } else if (target === 'new') {
        window.open(path, '_blank');
    }
});
<% end %>

// Since videojs-share can sometimes be blocked, we try to load it last
player.share(shareOptions);
</script>