<!DOCTYPE html>
<html lang="<%= env.get("preferences").as(Preferences).locale %>">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="thumbnail" content="<%= thumbnail %>">
    <%= rendered "components/player_sources" %>
    <link rel="stylesheet" href="/css/videojs-overlay.css?v=<%= ASSET_COMMIT %>">
    <script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script>
    <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>">
    <title><%= HTML.escape(video.title) %> - Invidious</title>
    <style>
    #player {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
    }
    </style>
</head>

<body>
<script>
var video_data = {
    id: '<%= video.id %>',
    index: '<%= continuation %>',
    plid: '<%= plid %>',
    length_seconds: '<%= video.length_seconds.to_f %>',
    video_series: <%= video_series.to_json %>,
    params: <%= params.to_json %>,
    preferences: <%= preferences.to_json %>,
    premiere_timestamp: <%= video.premiere_timestamp.try &.to_unix || "null" %>
}
</script>

<%= rendered "components/player" %>
<script src="/js/embed.js?v=<%= ASSET_COMMIT %>"></script>
</body>
</html>
