platypush/platypush/backend/http/templates/plugins/media.html

<script type="text/javascript" src="{{ url_for('static', filename='js/media.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/media.css') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='flag-icons/css/flag-icon.min.css') }}"></script>

<script type="text/javascript">
    window.config = window.config || {};
    window.config.media = window.config.media || {};
    window.config.media.subtitles = JSON.parse('{{ utils.to_json(utils.get_config("media.subtitles")) | safe }}');
</script>

<div class="row" id="video-container">
    <form action="#" id="video-search">
        <div class="row">
            <label for="video-search-text">
                Supported formats: <tt>file://[path]</tt>, <tt>https://www.youtube.com/?v=[video_id]</tt>, or free text search
            </label>
        </div>

        <div class="row">
            <div class="nine columns" id="media-search-bar-container">
                <input type="text" name="video-search-text" placeholder="Search query or video URL">
            </div>
            <div class="three columns" id="media-btns-container">
                <button type="submit">
                    <i class="fa fa-search"></i>
                </button>
                <button data-panel="#media-devices-panel">
                    <i id="media-devices-panel-icon" class="fa fa-desktop"></i>
                </button>
            </div>
        </div>

        <div class="row panel" id="media-devices-panel">
            <div class="refresh-devices-container">
                <div class="row refresh-devices disabled">
                    <i class="fa fa-retweet"></i>
                </div>
            </div>

            <div class="devices-list">
                <div class="row cast-device cast-device-local selected" data-local="local" data-name="_server">
                    <div class="two columns">
                        <i class="fa fa-desktop cast-device-icon"></i>
                    </div>
                    <div class="ten columns">
                        <span class="cast-device-name">{{ utils.get_config('device_id') }}</span>
                    </div>
                </div>

                <div class="row cast-device cast-device-local" data-browser="browser" data-name="_local">
                    <div class="two columns">
                        <i class="fa fa-laptop cast-device-icon"></i>
                    </div>
                    <div class="ten columns">
                        <span class="cast-device-name">Browser</span>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <form action="#" id="video-ctrl">
        <!-- <div class="row"> -->
        <!--     <div class="eight columns offset-by-two slider-container" id="video-seeker-container"> -->
        <!--         <span class="seek-time" id="video-elapsed">-:--</span>&nbsp; -->
        <!--         <input type="range" min="0" id="video-seeker" disabled="disabled" class="slider" style="width:75%"> -->
        <!--         &nbsp;<span class="seek-time" id="video-length">-:--</span> -->
        <!--     </div> -->
        <!-- </div> -->

        <div class="row">
            <div class="ten columns offset-by-one">
                <button data-action="previous">
                    <i class="fa fa-step-backward"></i>
                </button>

                <button data-action="back">
                    <i class="fa fa-backward"></i>
                </button>

                <button data-action="pause">
                    <i class="fa fa-pause"></i>
                </button>

                <button data-action="stop">
                    <i class="fa fa-stop"></i>
                </button>

                <button data-action="forward">
                    <i class="fa fa-forward"></i>
                </button>

                <button data-action="next">
                    <i class="fa fa-step-forward"></i>
                </button>

                <button data-action="subtitles" data-modal="#media-subtitles-modal">
                    <i class="fa fa-comment"></i>
                </button>
            </div>
        </div>

        <div class="row">
            <div class="eight columns offset-by-two slider-container" id="video-volume-ctrl-container">
                <i class="fa fa-volume-down"></i> &nbsp;
                <input type="range" min="0" max="100" value="100" id="video-volume-ctrl" class="slider" style="width:80%">
                &nbsp; <i class="fa fa-volume-up"></i>
            </div>
        </div>
    </form>

    <div class="row panel" id="media-item-panel">
        <div class="row media-item-action" data-action="play">
            <div class="two columns media-item-icon">
                <i class="fa fa-play"></i>
            </div>
            <div class="ten columns">Play</div>
        </div>

        <div class="row media-item-action" data-action="download">
            <div class="two columns">
                <i class="fa fa-download"></i>
            </div>
            <div class="ten columns">Download</div>
        </div>
    </div>

    <div id="media-subtitles-modal" class="modal">
        <div class="modal-container">
            <div class="modal-header">
                Subtitles results
            </div>

            <div class="modal-body">
                <div class="row media-subtitles-results-container">
                    <div class="row media-subtitles-results-header">
                        <div class="one column">Lang</div>
                        <div class="five columns">Movie</div>
                        <div class="six columns">Subtitles</div>
                    </div>

                    <div class="row media-subtitles-results">
                    </div>
                </div>
                <div class="row media-subtitles-message">No media selected or playing</div>
            </div>
        </div>
    </div>

    <div class="row" id="video-results-container">
        <div id="video-results"></div>
    </div>
</div>