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

<dom-module id="youtube-notes">

  <template>
    <style>
      h1 {
        color: maroon;
      }
      header {
        background: #fff;
      }
    </style>
    <header>
      <h1>YouTube Notes</h1>
      <nav>
        <a href="/choose-video">Choose Video</a>
        <a href="/watch-video">Watch Video</a>
        <a href="/save-notes">Load/Save Notes</a>
      </nav>
    </header>

    <template is="dom-if" if="{{flagList_}}">
      <div>Choose Video content</div>
      <p>
        <label><input type="text" id="search_bar" size="72"
          value=""> <button>Search</button></label>
      </p>
      <!-- TODO: Search button dynamically inserts videos into the list below. -->
      <ul class="video-list"></ul>
    </template>

    <template is="dom-if" if="{{flagVideo_}}">
      <div>Watch Video content</div>
      <div id="ytplayer_wrapper">
      <iframe id="ytplayer" type="text/html" width="640" height="390"
        src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://localhost:8080&enablejsapi=1"
        frameborder="0"></iframe>
      </div>
    </template>

    <template is="dom-if" if="{{flagNotes_}}">
      <article>
        <div>Save Notes content</div>
        <p>
          <strong>Notes</strong>
          <label><input type="checkbox" id="edit_text"
            value="edit_text_value"> Unlocked {{flagNotes_}}</label>
          <button>Copy to Clipboard</button>
        </p>
        <textarea rows="8" cols="80"></textarea>
      </article>
    </template>

    <p>Footer</p>

  </template>

  <script>
    // element registration
    Polymer({
      is: 'youtube-notes',

      // add properties and methods on the element's prototype
      properties: {
        // declare properties for the element's public API
        user: Object,

        APIKey_: {
          type: String,
          value: ""
        },

        // 3 flags to enable and disable above templates.
        flagList_: {
          type: Boolean,
          value: false
        },
        flagVideo_: {
          type: Boolean,
          value: false
        },
        flagNotes_: {
          type: Boolean,
          value: false
        }
      },

      pauseYTPlayer: function() {
        // Pauses video in the Watch Video view. To be called when leaving said view.
				var vid = Polymer.dom(this.$$('#ytplayer_wrapper')).children[0].contentWindow;
        console.log(vid);
        vid.postMessage('{"event":"command", "func":"pauseVideo", "args":""}', 'https://www.youtube.com');
      },

      // 3 Functions for setting the flags when arriving at a view.
      change2ViewChoose: function() {
        if (this.flagVideo_) {
          this.pauseYTPlayer();
          this.flagVideo_ = false;
        }
        this.flagList_ = true;
        this.flagNotes_ = false;
        ;
      },
      change2ViewWatch: function() {
        this.flagVideo_ = true;
        this.flagNotes_ = true;
        this.flagList_ = false;
        ;
      },
      change2ViewNotes: function() {
        if (this.flagVideo_) {
          this.pauseYTPlayer();
          this.flagVideo_ = false;
        }
        this.flagNotes_ = true;
        this.flagList_ = false;
        ;
      },

      attached: function() {
        this.APIKey_ = ""; // TODO: Replace with authentication key.
        this.change2ViewChoose();
        ;
      }

      // Desired Feature: Change rows of textarea based on view.
      //   rows="8" when watching, bigger when saving & loading.
    });
  </script>
<commit_msg>Removed stray semicolons. Commented and reorganized view changing functions, to show elements before hiding old ones.<commit_after><link rel="import" href="node_modules/@polymer/polymer/polymer.html" />

<dom-module id="youtube-notes">

  <template>
    <style>
      h1 {
        color: maroon;
      }
      header {
        background: #fff;
      }
    </style>
    <header>
      <h1>YouTube Notes</h1>
      <nav>
        <a href="/choose-video">Choose Video</a>
        <a href="/watch-video">Watch Video</a>
        <a href="/save-notes">Load/Save Notes</a>
      </nav>
    </header>

    <template is="dom-if" if="{{flagList_}}">
      <div>Choose Video content</div>
      <p>
        <label><input type="text" id="search_bar" size="72"
          value=""> <button>Search</button></label>
      </p>
      <!-- TODO: Search button dynamically inserts videos into the list below. -->
      <ul class="video-list"></ul>
    </template>

    <template is="dom-if" if="{{flagVideo_}}">
      <div>Watch Video content</div>
      <div id="ytplayer_wrapper">
      <iframe id="ytplayer" type="text/html" width="640" height="390"
        src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://localhost:8080&enablejsapi=1"
        frameborder="0"></iframe>
      </div>
    </template>

    <template is="dom-if" if="{{flagNotes_}}">
      <article>
        <div>Save Notes content</div>
        <p>
          <strong>Notes</strong>
          <label><input type="checkbox" id="edit_text"
            value="edit_text_value"> Unlocked {{flagNotes_}}</label>
          <button>Copy to Clipboard</button>
        </p>
        <textarea rows="8" cols="80"></textarea>
      </article>
    </template>

    <p>Footer</p>

  </template>

  <script>
    // element registration
    Polymer({
      is: 'youtube-notes',

      // add properties and methods on the element's prototype
      properties: {
        // declare properties for the element's public API
        user: Object,

        APIKey_: {
          type: String,
          value: ""
        },

        // 3 flags to enable and disable above templates.
        flagList_: {
          type: Boolean,
          value: false
        },
        flagVideo_: {
          type: Boolean,
          value: false
        },
        flagNotes_: {
          type: Boolean,
          value: false
        }
      },

      pauseYTPlayer: function() {
        // Pauses video in the Watch Video view. To be called when leaving said view.
				var vid = Polymer.dom(this.$$('#ytplayer_wrapper')).children[0].contentWindow;
        console.log(vid);
        vid.postMessage('{"event":"command", "func":"pauseVideo", "args":""}', 'https://www.youtube.com');
      },

      // 3 Functions for setting the flags when arriving at a view.
      change2ViewChoose: function() {
        this.flagList_ = true;
        // If leaving *Watch Video* view, pause and hide the video.
        if (this.flagVideo_) {
          this.pauseYTPlayer();
          this.flagVideo_ = false;
        }
        this.flagNotes_ = false;
      },
      change2ViewWatch: function() {
        this.flagVideo_ = true;
        this.flagNotes_ = true;
        this.flagList_ = false;
      },
      change2ViewNotes: function() {
        this.flagNotes_ = true;
        // If leaving *Watch Video* view, pause and hide the video.
        if (this.flagVideo_) {
          this.pauseYTPlayer();
          this.flagVideo_ = false;
        }
        this.flagList_ = false;
      },

      attached: function() {
        this.APIKey_ = ""; // TODO: Replace with authentication key.
        this.change2ViewChoose();
      }

      // Desired Feature: Change rows of textarea based on view.
      //   rows="8" when watching, bigger when saving & loading.
    });
  </script>

{'fraction_non_alphanumeric': 0.1446124763705104, 'fraction_numerical': 0.00837159060221442, 'mean_word_length': 1.9963592233009708, 'pattern_counts': {'":': 6, '<': 125, '<?xml version=': 0, '>': 125, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, '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': '1321783', 'n_tokens_mistral': 2291, 'n_tokens_neox': 2168, 'n_words': 517}