encapsulate index.html in components #83

orizens · 2015-12-12T15:07:19Z

index.html should be:

<!doctype html>
<html class="wood" ng-app="echoes">
<head>
    <meta charset="utf-8">
    <!-- Facebook Insights -->
    <!-- <meta property="fb:admins" content="754318072"> -->
    <!-- <meta property="fb:app_id" content="277907182339554"> -->

    <!-- Google + Sign-In -->
    <!-- <meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login"> -->
    <!-- <meta name="google-signin-requestvisibleactions" content="http://schemas.google.com/AddActivity"> -->
    <!-- <meta name="google-signin-cookiepolicy" content="single_host_origin"> -->

    <title>Echoes Player ~=~ EMC</title>
    <meta name="description" content="Alternative to youtube, Media Player which with a great ux for playing youtube videos">
    <meta name="author" content="Oren Farhi">
    <link type="image/x-icon" rel="shortcut icon" href="img/noun_project_220.ico">

    <meta name="MobileOptimized" content="320">
    <meta http-equiv="cleartype" content="on">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0" user-scalable="no">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link href='http://fonts.googleapis.com/css?family=Asap|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css?rev=@@hash">
    <style type="text/css">[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}</style>
</head>
<body ng-cloak>
        <!-- TOP NAVIGATION BAR -->
        <nav class="navbar navbar-default navbar-fixed-top" player-resizer="fullscreen">
            <div class="container-fluid">
                <sidebar-toggle></sidebar-toggle>
                <!-- <div class="navbar-brand" drawer-toggle="drawer-opened">
                    <span class="btn btn-navbar" id="sidebar-menu-toggler">
                        <i class="fa fa-bars"></i>
                    </span>
                    Ech<i class="fa fa-headphones"></i>es
                </div> -->

                <div class="navbar-header" ng-controller="SearchCtrl as vm">

                    <search-panel></search-panel>
                    <!-- <!- SEARCH FORM ->
                    <form class="navbar-form form-search navbar-left" id="media-explorer" ng-submit="vm.search()">
                        <div class="form-group">
                            <input placeholder="Explore Media" id="media-search" type="search" class="form-control" autocomplete="off"
                                ng-model="vm.params.q"
                                ng-change="vm.resetPageToken()"
                                typeahead="q for q in vm.complete($viewValue)"
                                typeahead-on-select="vm.updateSearch($item, $model, $label)"
                                >
                            <button class="btn btn-transparent btn-submit" type="submit" title="search with echoes">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </form>

                    <button type="button" class="navbar-toggle btn btn-primary" data-toggle="collapse" data-target="#header-menu">
                        <i class="fa fa-filter"></i>
                    </button> -->
                </div>

                <div id="header-menu" class="collapse navbar-collapse">

                    <div class="nav-collapse">
                        <search-filters></search-filters>
                        <!-- <ul id="feed-filter" class="nav navbar-nav"
                            ng-controller="FeedCtrl as vm">
                            <li class="feed-item" 
                                ng-repeat="feed in vm.data.items"
                                ng-class="{'active': feed === vm.active}"
                                ng-click="vm.setFeed(feed)">
                                <a title="Explore {{:: feed.label}}" href="#explore"
                                    >
                                    <i class="fa fa-{{:: feed.icon}}"></i> 
                                    {{:: feed.label}}
                                </a>
                            </li>

                        </ul>

                        <ul class="navbar-nav nav" id="search-presets"
                            ng-controller="PresetCtrl as vm">
                            <e-dropdown label="Presets" 
                                items="vm.presets" 
                                on-select="vm.updatePreset(item)"
                                icon="tag"
                                selected="{{ vm.selected }}"
                            ></e-dropdown>
                        </ul>

                        <ul class="navbar-nav nav" id="duration-picker"
                            ng-controller="DurationCtrl as vm">
                            <e-dropdown label="Duration" 
                                items="vm.durations" 
                                on-select="vm.onDurationChange(item, index)"
                                icon="time"
                            ></e-dropdown>
                        </ul> -->

                        <user-profile></user-profile>
                    </div>
                </div>
            </div>
        </nav>

        <!-- YOUTUBE PLAYER -->
        <div id="youtube-player-container" class="navbar navbar-default navbar-fixed-bottom">
            <!-- youtube-player
            player-id="player" auto-next -->
            <youtube-player player-id="player" auto-next></youtube-player>
        </div>

        <!-- SIDEBAR -->
        <div id="sidebar" class="sidebar sidebar-left-fixed well ux-maker"
            drawer-closed="closed"
            >
            <sidebar-nav></sidebar-nav>
            <!-- <ul id="library-nav" class="nav nav-list nicer-ux" navigator>
                <li class="nav-header">Library</li>
                <li class="active"><a href="#explore"><i class="fa fa-music"></i>Explore</a></li>
                <li><a href="#history"><i class="fa fa-calendar-o"></i>History</a></li>
                <li><a href="#myPlaylists"><i class="fa fa-heart"></i>My Playlists</a></li>
            </ul> -->

            <div class="sidebar-pane" ng-controller="UserPlaylistsCtrl as vm">
                <h3 class="nav-header nav-header-fluid user-playlists-filter">
                    Now Playing 
                    <now-playing-actions></now-playing-actions>
                    <!-- <button class="btn btn-link btn-xs btn-clear" title="Clear All Tracks In Now Playlist"
                        ng-disabled="!vm.playlists.length"
                        ng-click="vm.clearPlaylist()">
                        <span class="fa fa-trash-o"></span>
                    </button>
                    <button class="btn btn-link btn-xs btn-save" title="Save All These Tracks To A New Playlist"
                        ng-disabled="!vm.playlists.length"
                        ng-click="vm.togglePlaylistSaver()">
                        <span class="fa fa-cloud-upload"></span>
                    </button>
                    <div class="playlist-filter pull-right">
                        <i class="fa fa-search" ng-show="vm.playlistSearch.length === 0"></i>
                        <i class="fa fa-remove text-danger" ng-show="vm.playlistSearch.length" ng-click="vm.playlistSearch = ''"></i>
                        <input type="search" ng-model="vm.playlistSearch">
                    </div> -->
                </h3>
                <section class="row playlist-saver-container" ng-if="vm.showPlaylistSaver && vm.playlists.length > 0">
                    <playlist-saver class="col-md-12" tracks="vm.playlists"
                        on-cancel="vm.togglePlaylistSaver()"
                        on-save="vm.onPlaylistSave()"
                        ></playlist-saver>
                </section>
                <now-playing-playlist></now-playing-playlist>
                <!-- <ul id="user-playlists" class="nav nav-list xux-maker xnicer-ux user-playlists"
                    ng-class="{ 
                        'transition-in': vm.playlists.length,
                        'slide-down': vm.showPlaylistSaver 
                    }"
                    sv-root sv-part="vm.playlists"
                    sv-on-sort="vm.updateIndex($item, $indexTo)"
                    >
                    <li class="user-playlist"
                        ng-class="{ 'active': vm.nowPlaying.index === $index}"
                        ng-repeat="video in vm.playlists | filter:vm.playlistSearch"
                        sv-element>
                        <a class="" title="{{:: video.snippet.title }}"
                            ng-click="vm.playVideo(video, $index)">
                            {{ $index + 1 }})
                            <img class="video-thumb" draggable="false" ng-src="{{:: video.snippet.thumbnails.default.url }}" sv-handle title="Drag to sort">
                            <span class="video-title">{{:: video.snippet.title }}</span>
                            <span class="badge badge-info">{{:: video.time }}</span>
                            <span class="label label-danger ux-maker" title="Remove From Playlist"
                                ng-click="vm.remove($event, video, $index)"><i class="fa fa-remove"></i></span>
                        </a>
                    </li>
                </ul> -->
            </div>

        </div>
        <!-- <div class="modal-backdrop sidebar-backdrop" drawer-toggle></div> -->

        <app-loader></app-loader>
        <!-- <div ng-controller="AppCtrl as vm">
            <div id="loader" ng-show="vm.searching()">
                <i class="fa fa-refresh fa-spin fa-3x"></i>
            </div>
        </div> -->

        <!-- MAIN CONTENT -->
        <div class="container-fluid container-main" drawer-opened=""
            >
            <!-- ng-class="{ 'drawer-opened': vm.drawerIsOpened()}"
            ng-controller="AppCtrl as vm" -->
            <div class="row-fluid" >
                <!-- SEARCH RESULTS AREA -->
                <div id="search-results" class="ux-maker search-results clearfix main-view" 
                    ng-view

                    xng-class="{ 'transition-in': !vm.searching(), 'transition-out': vm.searching()}"></div>
            </div>

            <!-- <footer class="navbar-inverse">
                <p>&copy; <a href="http://orizens.com" target="_blank">Oren Farhi</a>, 2013</p>
            </footer> -->

        </div>

    <playlist-editor></playlist-editor>

    <!-- build:js vendors.js -->
    <!-- [if hack to keep these comments]> 
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="../node_modules/angular2to1/index.js"></script>

    <script type="text/javascript" src="../bower_components/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" src="../bower_components/angular-animate/angular-animate.min.js"></script>
    <script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="../bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
    <script type="text/javascript" src="../bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js"></script>
    <script type="text/javascript" src="../bower_components/angular-sortable-view/src/angular-sortable-view.min.js"></script>
    <script type="text/javascript" src="../bower_components/angular-socialshare/dist/angular-socialshare.min.js"></script>
    <![endif]-->
    <!-- endbuild -->
    <script src="vendors.js?rev=@@hash"></script>
    <script src="bundle.js?rev=@@hash"></script>
    <script src="templates.mdl.js?rev=@@hash"></script>
    <script type="text/javascript">

        (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','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-35188202-2', 'echotu.be');
        ga('require', 'linkid', 'linkid.js');
        ga('send', 'pageview');

    </script>
    <!-- Place this tag in your head or just before your close body tag. -->
    <script src="https://apis.google.com/js/platform.js" async defer></script>

</body>
</html>

orizens added the enhancement label Dec 12, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

encapsulate index.html in components #83

encapsulate index.html in components #83

orizens commented Dec 12, 2015

encapsulate index.html in components #83

encapsulate index.html in components #83

Comments

orizens commented Dec 12, 2015