encoding.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bitmovin Encoding Info</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/outputs.css">
    <link rel="stylesheet" href="css/json-pretty-print.css">
    <link rel="stylesheet" href="css/file-viewer.css">
    <script src="node_modules/jquery/dist/jquery.min.js" type="application/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/renderjson@1.4.0/renderjson.min.js"></script>

    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" type="application/javascript"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/r-2.3.0/rg-1.2.0/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/r-2.3.0/rg-1.2.0/datatables.min.js"></script>

    <script src="node_modules/lodash/lodash.min.js" type="application/javascript"></script>
    <script src="node_modules/@bitmovin/api-sdk/dist/bitmovin-api-sdk.browser.js" type="application/javascript"></script>
    <script src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js" type="text/javascript" ></script>
    <script src="node_modules/moment/moment.js" type="application/javascript"></script>
    <script src="node_modules/tinycolor2/tinycolor.js" type="application/javascript"></script>

    <script src="node_modules/d3/dist/d3.min.js" type="application/javascript"></script>
    <script src="node_modules/d3-graphviz/build/d3-graphviz.min.js" type="application/javascript"></script>
    <script src="node_modules/@hpcc-js/wasm/dist/index.js"></script>

    <script src="js/dragmove.js" type="application/javascript"></script>

    <script src="js/bitmovin-helper-class.js" type="application/javascript"></script>
    <script src="js/file-viewer.js" type="application/javascript"></script>
    <script src="js/utils.js" type="application/javascript"></script>
    <script src="js/encoding-graph.js" type="application/javascript"></script>
    <script src="js/encoding-info.js" type="application/javascript"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-7LYVXSCWFR"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-7LYVXSCWFR');
    </script>
</head>
<body>

    <nav class="navbar navbar-light bg-light navbar-expand-lg fixed-top">
        <a class="navbar-brand" href="#">
            <img src="img/bitmovin-standard-square.png" width="30" height="30" class="d-inline-block align-top" alt="">
            &nbsp;Encoding Info
        </a>
        <div class="collapse navbar-collapse">
            <div class="navbar-nav">
                <a class="nav-item nav-link topic-graph" href="#graph-anchor" >Graph</a>
                <a class="nav-item nav-link topic-manifests" href="#manifests-anchor">Manifests</a>
                <a class="nav-item nav-link topic-muxings" href="#muxings-anchor">Muxings</a>
                <a class="nav-item nav-link topic-streams" href="#streams-anchor">Streams</a>
                <a class="nav-item nav-link topic-inputs" href="#inputs-anchor">Inputs</a>
            </div>
        </div>
        <div>
            <span class="help">Shift Key + Mouse Click in a cell to copy its value</span>
            <!--        <div class="loader mr-sm-4">-->
            <!--            <img src="img/loading_animation_dark.gif" height="30">-->
            <!--        </div>-->
            <button type="button" class="btn btn-secondary" id="go-compare">Compare</button>
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#viewer-modal">Viewer</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#player-modal">Player</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#helpModal">Help</button>

        </div>
    </nav>

    <main role="main" class="container-fluid">

        <div class="row">
            <div class="col">
                <form id="inputEncodings">
                    <div class="form-group row">
                        <label for="inputEncodingId" class="col-sm-1 col-form-label">Encoding ID</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control form-control-sm" id="inputEncodingId" placeholder="your-id">
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm mb-2 col-sm-1" id="fetchEncoding">fetch</button>
                    </div>
                </form>
            </div>
        </div>

        <div>
            <div class="col" id="errors" class="error-msg"></div>
        </div>


        <div class="row section topic-encodings">
            <div class="col-1 header">
                <h2>Encoding</h2>
            </div>

            <div class="col-12">
                <table class="table table-lg" id="encodings" style="width: 100%">
                    <thead class="thead-light">

                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

        <a id="graph-anchor" class="anchor"></a>
        <div class="row section topic-graph">
            <div class="col-1 header">
                <h2>Graph</h2>
            </div>
            <div class="col-12">
                <div>
                    <span id="graph_options_nodes">
                    </span>
                    <button class="btn btn-secondary btn-sm" type="button" id="drawGraph">
                        Draw graph
                    </button>
                </div>

                <div id="info-floaters"></div>
                <div id="graphviz"></div>

            </div>
        </div>

        <a id="manifests-anchor" class="anchor"></a>
        <div class="row section topic-manifests">
            <div class="col-1 header">
                <h2>Manifests</h2>
            </div>
            <div class="col-12">
                <table class="table table-lg stripe table-responsive" id="manifests">
                    <thead class="thead-light">
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

        <a id="muxings-anchor" class="anchor"></a>
        <div class="row section topic-muxings">
            <div class="col-1 header">
                <h2>Muxings</h2>
            </div>
            <div class="col-12">
                <table class="table table-lg stripe" id="muxings" style="width: 100%">
                    <thead class="thead-light">
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

        <a id="streams-anchor" class="anchor"></a>
        <div class="row section topic-streams">
            <div class="col-1 header">
                <h2>Streams</h2>
            </div>
            <div class="col-12">
                <table class="table table-lg stripe" id="streams" style="width: 100%">
                    <thead class="thead-light">
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

        <a id="inputs-anchor" class="anchor"></a>
        <div class="row section topic-inputs">
            <div class="col-1 header">
                <h2>Inputs</h2>
            </div>
            <div class="col-12">
                <table class="table table-lg stripe" id="inputs" style="width: 100%">
                    <thead class="thead-light">
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

    </main>

    <div class="modal fade" id="player-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Player </h5>
                    <div class="loader mr-sm-4">
                        <img src="img/loading_animation_dark.gif" height="30">
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="test-player"></div>
                </div>
                <div class="modal-footer">
                    <div class="stream-info">
                        <div>
                            <span class="label">Stream: </span>
                            <span id="stream-type"></span><br/>
                            <span id="stream-url" class="copy-me"></span>
                        </div>
                        <div>
                            <span class="label">DRM: </span>
                            <span id="drm-types">(none)</span>
                        </div>
                    </div>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="viewer-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">File Viewer</h5>
                    <div class="loader mr-sm-4">
                        <img src="img/loading_animation_dark.gif" height="30">
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="inputContainer">
                        <input type="text" id="file-url" onkeypress="viewerKeyPress(event)">
                        <a href="#" id="previous-url" class="openurl">back</a>
                    </div>

                    <div id="content-viewer" class="container"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Help</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h3>What for?</h3>
                    <p>What do you want help for?  This is quite a straightforward tool...
                    </p>

                    <h3>Missing info?</h3>
                    <p>Are you expecting to see some information in here that you cannot see?  Missing streams?  Missing muxings?</p>
                    <p>This tool may simply not be up to date and not use the latest version of the Bitmovin SDK. Or maybe what you're searching for simply has not been implemented (yet)</p>
                    <p>Feel free to reach out to <a href="mailto:fabre.lambeau@bitmovin.com">fabre.lambeau@bitmovin.com</a> if you would like a new feature. Or why not contribute yourself to the code?
                        The <a href="https://github.com/wabiloo/bitmovin-encoding-info" target="_blank">Github</a> repo would love to receive your PRs!</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>