<commit_before><link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">

<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="../behaviors/utils-behavior.html">
<link rel="import" href="../behaviors/app-localize-behavior.html">
<link rel="import" href="video-dialog.html">

<dom-module id="featured-videos">

  <template>

    <style include="shared-styles">
      :host {
        display: block;
        background: var(--default-primary-color);
        color: var(--text-primary-color);
        --iron-icon-fill-color: var(--text-primary-color);
        --paper-card-background-color: #FFFFFF;
        overflow: hidden;
      }

      .videos-header {
        @apply(--layout-vertical);
        @apply(--layout-justified);
      }

      .controls {
        margin-bottom: 10px;
      }

      .videos {
        @apply(--layout-horizontal);
        transition: all 0.4s cubic-bezier(0, 0, 0.2, 1);
        will-change: transition;
      }

      .video-item {
        @apply(--layout);
        padding-right: 24px;
        width: 100%;
        min-width: 100%;
      }

      paper-card {
        width: 100%;
      }

      .header {
        height: 200px;
        position: relative;
      }

      .thumbnail {
        @apply(--layout-fit);
      }

      .play-video {
        @apply(--layout-fit);
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        margin: 0 auto;
        cursor: pointer;
        background: rgba(0,0,0,0.15);
      }

      .play-icon {
        --iron-icon-width: 48px;
        --iron-icon-height: 48px;
      }

      .title {
        @apply(--ellipsis);
        color: var(--primary-text-color);
      }

      .speakers {
        @apply(--ellipsis);
        color: var(--secondary-text-color);
        font-size: 14px;
      }

      .block-link {
        margin-top: 25px;
        display: block;
        color: inherit;
        font-size: .9em;
      }

      @media (min-width: 601px) {
        .videos-header {
          @apply(--layout-horizontal);
        }

        .video-item {
          width: 400px;
          min-width: 400px;
        }

        .video-item:hover paper-card {
          @apply(--shadow-elevation-2dp);
        }
      }
    </style>

    <div class="container">
      <div class="videos-header">
        <h4 class="heading">[[localize('featured-videos-title')]]</h4>
        <div class="controls">
          <paper-icon-button icon="icons:chevron-left" on-tap="shiftContentLeft"></paper-icon-button>
          <paper-icon-button icon="icons:chevron-right" on-tap="shiftContentRight"></paper-icon-button>
        </div>
      </div>
      <div id="videos" class="videos">
        <template is="dom-repeat" items="[[_videos]]" as="video">
          <div class="video-item">
            <paper-card class="card">
              <div class="header paper-card">
                <iron-image class="thumbnail" src="[[video.thumbnail]]" placeholder="[[video.preloadPlaceholder]]"
                            sizing="cover" preload fade></iron-image>
                <div class="play-video" on-tap="_playVideo">
                  <iron-icon class="play-icon" icon="icons:play"></iron-icon>
                </div>
              </div>
              <div class="paper-card-container">
                <div class="card-content list">
                  <div class="title">[[video.title]] [[video.preloadPlaceholder]]</div>
                  <div class="speakers">[[video.speakers]]</div>
                </div>
              </div>
            </paper-card>
          </div>
        </template>
      </div>
      <div>
        <a href="[[app.data.videosSessionsUrl]]" class="block-link" target="_blank">
          <paper-button>[[localize('featured-videos-view-all')]]</paper-button>
        </a>
      </div>
    </div>
    <video-dialog id="videoViewer" video-title="[[_selectedVideo.title]]" youtube-id="[[_selectedVideo.youtubeId]]"
                  entry-animation="scale-up-animation"
                  exit-animation="scale-down-animation" modal></video-dialog>

  </template>

  <script>
    (function () {
      'use strict';

      Polymer({

        is: 'featured-videos',

        behaviors: [
          HOVERBOARD.AppLocalizeBehavior,
          HOVERBOARD.UtilsBehavior
        ],

        properties: {
          _videos: Array,
          _selectedVideo: Object,
          _currentIndex: {
            type: Number,
            value: 0
          }
        },

        observers: [
          '_videosChanged(app.videos)'
        ],

        _videosChanged: function () {
          if (this.app.videos)
          this._videos = this._randomOrder(this.app.videos).slice(0, 6);
        },

        _playVideo: function (e) {
          var presenters = e.model.video.speakers ? (' by ' + e.model.video.speakers) : '';
          this._selectedVideo = {
            title: e.model.video.title + presenters,
            youtubeId: e.model.video.youtubeId
          };
          this.$.videoViewer.open();
          HOVERBOARD.Analytics.trackEvent('video', 'watch',  'dfua15' + this._selectedVideo.title);
        },

        shiftContentLeft: function () {
          var videos = Polymer.dom(this.root).querySelectorAll('.video-item');
          var cardRect = videos[videos.length - 1].getBoundingClientRect();
          var cardWidth = cardRect.width;
          var newX = -(this._currentIndex - 1) * cardWidth;
          if (this._currentIndex < videos.length && this._currentIndex > 0) {
            this.$.videos.style.transform = 'translate3d(' + newX + 'px, 0, 0)';
            this._currentIndex--;
          }
        },

        shiftContentRight: function () {
          var videos = Polymer.dom(this.root).querySelectorAll('.video-item');
          var cardRect = videos[videos.length - 1].getBoundingClientRect();
          var cardWidth = cardRect.width;
          var newX = -(this._currentIndex + 1) * cardWidth;
          if (this._currentIndex >= 0 && this._currentIndex < videos.length - 1) {
            this.$.videos.style.transform = 'translate3d(' + newX + 'px, 0, 0)';<commit_msg>added possibility to swipe featured videos (#78)<commit_after><link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">

<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="../behaviors/utils-behavior.html">
<link rel="import" href="../behaviors/app-localize-behavior.html">
<link rel="import" href="video-dialog.html">

<dom-module id="featured-videos">

  <template>

    <style include="shared-styles">
      :host {
        display: block;
        background: var(--default-primary-color);
        color: var(--text-primary-color);
        --iron-icon-fill-color: var(--text-primary-color);
        --paper-card-background-color: #FFFFFF;
        overflow: hidden;
      }

      .videos-header {
        @apply(--layout-vertical);
        @apply(--layout-justified);
      }

      .controls {
        margin-bottom: 10px;
      }

      .videos {
        @apply(--layout-horizontal);
        transition: all 0.4s cubic-bezier(0, 0, 0.2, 1);
        will-change: transition;
      }

      .video-item {
        @apply(--layout);
        padding-right: 24px;
        width: 100%;
        min-width: 100%;
      }

      paper-card {
        width: 100%;
      }

      .header {
        height: 200px;
        position: relative;
      }

      .thumbnail {
        @apply(--layout-fit);
      }

      .play-video {
        @apply(--layout-fit);
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        margin: 0 auto;
        cursor: pointer;
        background: rgba(0,0,0,0.15);
      }

      .play-icon {
        --iron-icon-width: 48px;
        --iron-icon-height: 48px;
      }

      .title {
        @apply(--ellipsis);
        color: var(--primary-text-color);
      }

      .speakers {
        @apply(--ellipsis);
        color: var(--secondary-text-color);
        font-size: 14px;
      }

      .block-link {
        margin-top: 25px;
        display: block;
        color: inherit;
        font-size: .9em;
      }

      @media (min-width: 601px) {
        .videos-header {
          @apply(--layout-horizontal);
        }

        .video-item {
          width: 400px;
          min-width: 400px;
        }

        .video-item:hover paper-card {
          @apply(--shadow-elevation-2dp);
        }
      }
    </style>

    <div class="container">
      <div class="videos-header">
        <h4 class="heading">[[localize('featured-videos-title')]]</h4>
        <div class="controls">
          <paper-icon-button icon="icons:chevron-left" on-tap="shiftContentLeft"></paper-icon-button>
          <paper-icon-button icon="icons:chevron-right" on-tap="shiftContentRight"></paper-icon-button>
        </div>
      </div>
      <div id="videos" class="videos">
        <template is="dom-repeat" items="[[_videos]]" as="video">
          <div class="video-item">
            <paper-card class="card">
              <div class="header paper-card">
                <iron-image class="thumbnail" src="[[video.thumbnail]]" placeholder="[[video.preloadPlaceholder]]"
                            sizing="cover" preload fade></iron-image>
                <div class="play-video" on-tap="_playVideo">
                  <iron-icon class="play-icon" icon="icons:play"></iron-icon>
                </div>
              </div>
              <div class="paper-card-container">
                <div class="card-content list">
                  <div class="title">[[video.title]] [[video.preloadPlaceholder]]</div>
                  <div class="speakers">[[video.speakers]]</div>
                </div>
              </div>
            </paper-card>
          </div>
        </template>
      </div>
      <div>
        <a href="[[app.data.videosSessionsUrl]]" class="block-link" target="_blank">
          <paper-button>[[localize('featured-videos-view-all')]]</paper-button>
        </a>
      </div>
    </div>
    <video-dialog id="videoViewer" video-title="[[_selectedVideo.title]]" youtube-id="[[_selectedVideo.youtubeId]]"
                  entry-animation="scale-up-animation"
                  exit-animation="scale-down-animation" modal></video-dialog>

  </template>

  <script>
    (function () {
      'use strict';

      Polymer({

        is: 'featured-videos',

        behaviors: [
          HOVERBOARD.AppLocalizeBehavior,
          HOVERBOARD.UtilsBehavior
        ],

        listeners: {
          'track': '_onSwipe'
        },

        properties: {
          _videos: Array,
          _selectedVideo: Object,
          _currentIndex: {
            type: Number,
            value: 0
          }
        },

        observers: [
          '_videosChanged(app.videos)'
        ],


        _onSwipe: function(event) {

          let state = event.detail.state;

          if (state === 'start') {
            this._nodeWidth = event.currentTarget.offsetWidth;
          } else if (state === 'end') {
            this._trackEnd(event.detail);
          }
        },

        _trackEnd: function(event) {

          // The element is swiped away if it's moved halfway its total width.
          this._swipeComplete = Math.abs(event.dx) > this._nodeWidth / 2;
          this._direction = event.dx > 0;

          if (this._swipeComplete) {
            if (event.dx > 0) {
              this.shiftContentLeft();
            }
            else  {
              this.shiftContentRight();
            }
          }
        },

        _videosChanged: function () {
          if (this.app.videos)
            this._videos = this._randomOrder(this.app.videos).slice(0, 6);
        },

        _playVideo: function (e) {
          var presenters = e.model.video.speakers ? (' by ' + e.model.video.speakers) : '';
          this._selectedVideo = {
            title: e.model.video.title + presenters,
            youtubeId: e.model.video.youtubeId
          };
          this.$.videoViewer.open();
          HOVERBOARD.Analytics.trackEvent('video', 'watch',  'dfua15' + this._selectedVideo.title);
        },

        shiftContentLeft: function () {
          var videos = Polymer.dom(this.root).querySelectorAll('.video-item');
          var cardRect = videos[videos.length - 1].getBoundingClientRect();
          var cardWidth = cardRect.width;
          var newX = -(this._currentIndex - 1) * cardWidth;
          if (this._currentIndex < videos.length && this._currentIndex > 0) {
            this.$.videos.style.transform = 'translate3d(' + newX + 'px, 0, 0)';
            this._currentIndex--;
          }
        },

        shiftContentRight: function () {
          var videos = Polymer.dom(this.root).querySelectorAll('.video-item');
          var cardRect = videos[videos.length - 1].getBoundingClientRect();
          var cardWidth = cardRect.width;
          var newX = -(this._currentIndex + 1) * cardWidth;
          if (this._currentIndex >= 0 && this._currentIndex < videos.length - 1) {
            this.$.videos.style.transform = 'translate3d(' + newX + 'px, 0, 0)';
{'fraction_non_alphanumeric': 0.16033330938869333, 'fraction_numerical': 0.010272250556712879, 'mean_word_length': 1.8534535765525721, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 130, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2343563', 'n_tokens_mistral': 4428, 'n_tokens_neox': 4151, 'n_words': 684}