fast_playlist/index.html at master · solid-live/fast_playlist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <!-- <link type="text/css" rel="stylesheet" href="css/materialize.css"/>-->
        <link rel="stylesheet" type="text/css" href="css/main.css"/>


        <script type="text/javascript" src="js/youtube.js"></script>
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>

        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="icon" type="png" href="./favicon.png">
    </head>

    <body class="cyan lighten-5">
        <div class="navbar-fixed">
            <nav>
                <div class="nav-wrapper red">
                    <a class="brand-logo center" href="./">Youtube Fast Playlist</a>
                </div>
            </nav>
        </div>
        <div class="container">
            <div class="row">
                <div class="col s6">
                    <div class="row">
                        <div class="col s12 center"><div id="player"></div></div>
                    </div>
                    <div class="row">
                        <div class="col s10 offset-s1 card white">
                            <div class="input-field">
                                <i onclick="searchVid($('#search').val())" class="material-icons prefix" style="cursor: pointer">search</i>
                                <input id="search" type="search" style="padding-left: 2rem; width: calc(90% - 2.5rem)"></input>
                                <label for="search">Search Youtube</label>
                            </div>
                        </div>
                    </div>
                    <ul class="collection" id="search_res">
                    </ul>
                </div>

                <div class="col s5">
                    <ul class="collection" id="suggestions">
                    </ul>
                    <div class="row card white">
                        <div class="col s3 center waves-effect btn-play-control" onclick="playPrev()">
                            <i class="material-icons small" title="Previous">skip_previous</i>
                        </div>
                        <div class="col s3 center waves-effect btn-play-control" onclick="playNext()">
                            <i class="material-icons small" title="Next">skip_next</i>
                        </div>
                        <div class="col s3 center dropdown-button btn-flat" data-activates="play_mode">
                            <i id="play_selected" class="material-icons small" title="Dropdown to choose">trending_flat</i>
                            <ul id="play_mode" class="dropdown-content">
                                <li onclick="toggleRepeatMode('none')"><i class="material-icons small" title="Play all once">trending_flat</i></li>
                                <li onclick="toggleRepeatMode('all')"><i class="material-icons small" title="Repeat All Songs">repeat</i></li>
                                <li onclick="toggleRepeatMode('one')"><i class="material-icons small" title="Repeat One Song">repeat_one</i></li>
                                <li onclick="toggleRepeatMode('shuffle')"><i class="material-icons small" title="Shuffle">shuffle</i></li>
                            </ul>
                        </div>
                        <div id="share" class="col s3 center waves-effect btn-play-control" onclick="toggleShareLink()">
                            <i class="material-icons small" title="View Share Link">share</i>
                        </div>
                    </div>
                    <div class="row card white" id="share_link_box" style="opacity:0;">
                        <div class="input-field col s12" style='height:0px'>
                            <input value="dummy" id="share_link" type="text" readonly onclick="this.select()">
                            <label class="active" for="share_link">Share Link</label>
                        </div>
                    </div>
                    <ul class="collection" id="playlist">
                    </ul>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script>
            // 2. This code loads the IFrame Player API code asynchronously.
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            $("#search").keypress(function(e){
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if(keycode == '13'){
                    searchVid($(this).val());
                }

            })
        </script>
        <script src="https://apis.google.com/js/client.js?onload=onGoogleApiClientLoad"></script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-76325610-1', 'auto');
            ga('send', 'pageview');

        </script>
    </body>
</html>