<commit_before>---
title: Media
layout: component
---

<p class="lead"> "An audio or video media player" </p> 

<h3> Typical Appearance <small> how it usually looks </small> </h3> 

<p> Simple three button interface towards the bottom of the screen, previous file, Play/Pause, and next file. Top of the screen includes the file name, and any other details about the file if available. The middle of the screen will show the video itself or the album art in case of audio files. Other buttons include volume control through buttons or a slider, options to shuffle your list of songs or repeat a single song or playlist, and a drop down menu for media settings. In the case of a video, choices for the quality of the video are usually present when streaming it online. Lastly slider that corresponds to the video or song length and how far into the file you are is present at the bottom of the screen. </p>


<h3> Typical Behavior <small> how it usually behaves </small> </h3>

<p> Songs are listed by alphabetical order, and depending on what tab you are in you can search for specific artists or albums as well. When play button is clicked/pressed, the file will begin playing. Default speakers in the device will be used unless there are user designated speakers available (e.x. headphones plugged in, blue tooth stereo system set up, etc.). If the previous file button is pressed once, the player will return to the beginning of the current file. If it is pressed twice in rapid succession it will start playing the file that came before the current one. The next file button only needs to be pressed once to skip the rest of the current file and start playing the next file in the list. </p> 
    

<h4> Events </h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales a erat ut venenatis. Nullam nec nisi a nibh tempus cursus. Maecenas maximus risus vel sem volutpat, gravida lacinia est lobortis. Sed fermentum rutrum tellus. Sed euismod laoreet ipsum ac tempus. Ut tortor eros, iaculis quis consectetur in, consectetur et risus. In tincidunt tempus turpis. Fusce venenatis nibh ultricies, efficitur orci nec, pulvinar nisl. Sed condimentum nec dolor vitae maximus. Nullam ullamcorper ante in elementum eleifend. In consequat dui dapibus auctor tincidunt. Vestibulum fermentum metus non dui feugiat condimentum. Nullam aliquet dolor quis odio euismod, id mattis nibh posuere. Sed ac nunc nec mi aliquam consectetur. Curabitur est sem, semper sed risus placerat, mattis laoreet ex. 
</p> 
<!-- THE FUTURE IS THE PRESENT!-->
<h4> State Diagram </h4> 
<p> In some media players there are two major states, when the <b>control shown</b> and <b>control hidden</b> states. In the control shown state this is when the user is able to control the video. Within this state there are multiple states: </p> 
<ul>
    <li>Idle/Paused: When the media is stopped </li>
    <li>Playback: When the media is playing </li>
    <li>(Optional) Rewinding: When the media is playing backwards </li>
    <li>(Optional) Fast Forwarding: When the media is playing ahead </li>
</ul>

<p> For video media players there are also options to change states between having the video play full screen and the video playing at the specifed size.</p>

<div class="row">
    <div class = "col-sm-6">

        <img src="images_media/Overall_v2.svg" class="img-responsive" alt= "Responsive image"style= "height: auto; width: auto">
        

    </div>

    <div class= "col-sm-6">

        <img src="images_media/3ButtonInterface.svg" class="img-responsive" alt="Responsive image" style= "height: auto; width: auto">

    </div> 

</div>


<h4> Component in Action </h4>
<div class= "row"> 
    <div class= "col-sm-6">
        
        <iframe width="100%" height="250" src="https://www.youtube.com/embed/89bcFDlP5rw" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class= "col-sm-6">
        To the right is an example of a media player from Youtube. Description description description
    </div>
</div>
<h3> Variants <small> how it varies per location </small> </h3>

<h3> Priority Metrics <small> Media and its Usability Metrics </small> </h3>

  <p> 
    For most users, media players are used to do one thing, to play the media that the user wants them to play. That being said, because it is more of a utilitarian component, there are some usability metrics that are not as importnat as others. Some of the important ones are learnability, efficiency, errors, and memorability. 

  </p>
  <p> 
    Media players have to be very learnable, very quickly. For most users, the  media player is only a gateway for them to see the actual content. The quicker it is to learn the software the better. For many of it though it may come very intuitively and if learnability clashed with efficiency I would have to say that efficiency has a higher priority. Similar to buying tickets at a train station or anything like that media players have to do this. derp derp. Its the content thata they want to see that is most important. 
  </p>
  <p> 
    Since it is not so much the media player that is important then the actual content being played, media players must also have to be very efficient. Many of the players today have many shortcuts. Instead of pressing the play button they can have the shortcut of spacebar. Or to scrub through they have arrow bars. These are all very important. This allows the user to quickly access this content and to have quicker responses and feedback. 
  </p>
  <p> 
    Also as far as playing the media, no one wants to encounter through errors. Though errors here will not be as fatal, pausing or stoping when one doesn't want to may be annoying. Also volumne controls may not allow a person to really play the video as intended. Again because the media player in it of itself is a gateway into the actual content, the errors are a basis of not delteing the file and being able to accurately scrub through the video. For it to playback the media at the right speed. etc. 
    </p> 
    <p>
      Yes it should be a memorable interface. Even though you may not have been able to see a media player for a long time, the user should be able to remember what exactly the different functions were. 
    </p>
    <p>
      As far as I can tell Satistfaction isn't a very important component. Really having the media player show the media that is needed is more important. Having fun or seeing how well it feels isn't at all that important as the other usability metrics.

  </P> 

<h3> Key Chararacteristics <small> what do all great media players have? </small> </h3>
  
  <p> List them design principles: 
        1. Feedback


        -Has a play/pause button
  -Able to share the media elsewhere 
  -Rewind and fast forward capabilities 
  -Volume Control 
  -Time Stamp- Time control
  -Scrub bar
  -Full Screen Option
  -Minimize and Maximize the screen (player)
  -For Online streaming: DPI/ HD or not 
  -Subtitles

  -Feedback

  </p> 






<h2> Platform Specific Instances </h2> 
<div class="row"> 
  <div class="col-sm-4">
    <div class="well">
        <h3> Mac OSX: Yosemite</h3>
        
        <h5> Appearance </h5>
        <h5> Behavior </h5>
        <h5> Component in Action </h5>
        <h5> Key Characteristics </h5>
      
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
        <h3> iOS iPhone4s </h3>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales a erat ut venenatis. Nullam nec nisi a nibh tempus cursus. Maecenas maximus risus vel sem volutpat, gravida lacinia est lobortis. Sed fermentum rutrum tellus. Sed euismod laoreet ipsum ac tempus. Ut tortor eros, iaculis quis consectetur in, consectetur et risus. In tincidunt tempus turpis. Fusce venenatis nibh ultricies, efficitur orci nec, pulvinar nisl. Sed condimentum nec dolor vitae maximus. Nullam ullamcorper ante in elementum eleifend. In consequat dui dapibus auctor tincidunt. Vestibulum fermentum metus non dui feugiat condimentum. Nullam aliquet dolor quis odio euismod, id mattis nibh posuere. Sed ac nunc nec mi aliquam consectetur. Curabitur est sem, semper sed risus placerat, mattis laoreet ex. 
        </p>
    </div>
  </div> 


  <div class="col-sm-4">
    <div class="well">
        <h3> Android S5 </h3>
          <h4> Music </h4>
          <li> The ability to skip songs by swiping left or right on the album cover art </li>
          <li> Tapping on a small star in the middle below the song’s information will add the song to your “Favorites” playlist. The star will light up, and if tapped again it will take the song off of your “Favorites” playlist and the star will turn off </li>
          <li> A button on the bottom left will show you all of the song names in the current playlist, and a button on the bottom right will add the current song to a playlist. If no playlists have been made you can create a new playlist with the current song as the first entry </li>
          <li> In addition to the volume controls on the left side of the phone, you can tap on the speaker icon in the top right to pull up a volume control slider, that goes from a max of fifteen to a muted zero </li>
          <h4> Video </h4>
          <p>

          </p>
    </div>
  </div> 
</div>

<commit_msg>Nick: Updated Variants - Audio<commit_after>---
title: Media
layout: component
---

<p class="lead"> "An audio or video media player" </p> 

<h3> Typical Appearance <small> how it usually looks </small> </h3> 

<p> Simple three button interface towards the bottom of the screen, previous file, Play/Pause, and next file. Top of the screen includes the file name, and any other details about the file if available. The middle of the screen will show the video itself or the album art in case of audio files. Other buttons include volume control through buttons or a slider, options to shuffle your list of songs or repeat a single song or playlist, and a drop down menu for media settings. In the case of a video, choices for the quality of the video are usually present when streaming it online. Lastly slider that corresponds to the video or song length and how far into the file you are is present at the bottom of the screen. </p>


<h3> Typical Behavior <small> how it usually behaves </small> </h3>

<p> Songs are listed by alphabetical order, and depending on what tab you are in you can search for specific artists or albums as well. When play button is clicked/pressed, the file will begin playing. Default speakers in the device will be used unless there are user designated speakers available (e.x. headphones plugged in, blue tooth stereo system set up, etc.). If the previous file button is pressed once, the player will return to the beginning of the current file. If it is pressed twice in rapid succession it will start playing the file that came before the current one. The next file button only needs to be pressed once to skip the rest of the current file and start playing the next file in the list. </p> 
    

<h4> Events </h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales a erat ut venenatis. Nullam nec nisi a nibh tempus cursus. Maecenas maximus risus vel sem volutpat, gravida lacinia est lobortis. Sed fermentum rutrum tellus. Sed euismod laoreet ipsum ac tempus. Ut tortor eros, iaculis quis consectetur in, consectetur et risus. In tincidunt tempus turpis. Fusce venenatis nibh ultricies, efficitur orci nec, pulvinar nisl. Sed condimentum nec dolor vitae maximus. Nullam ullamcorper ante in elementum eleifend. In consequat dui dapibus auctor tincidunt. Vestibulum fermentum metus non dui feugiat condimentum. Nullam aliquet dolor quis odio euismod, id mattis nibh posuere. Sed ac nunc nec mi aliquam consectetur. Curabitur est sem, semper sed risus placerat, mattis laoreet ex. 
</p> 
<!-- THE FUTURE IS THE PRESENT!-->
<h4> State Diagram </h4> 
<p> In some media players there are two major states, when the <b>control shown</b> and <b>control hidden</b> states. In the control shown state this is when the user is able to control the video. Within this state there are multiple states: </p> 
<ul>
    <li>Idle/Paused: When the media is stopped </li>
    <li>Playback: When the media is playing </li>
    <li>(Optional) Rewinding: When the media is playing backwards </li>
    <li>(Optional) Fast Forwarding: When the media is playing ahead </li>
</ul>

<p> For video media players there are also options to change states between having the video play full screen and the video playing at the specifed size.</p>

<div class="row">
    <div class = "col-sm-6">

        <img src="images_media/Overall_v2.svg" class="img-responsive" alt= "Responsive image"style= "height: auto; width: auto">
        

    </div>

    <div class= "col-sm-6">

        <img src="images_media/3ButtonInterface.svg" class="img-responsive" alt="Responsive image" style= "height: auto; width: auto">

    </div> 

</div>


<h4> Component in Action </h4>
<div class= "row"> 
    <div class= "col-sm-6">
        
        <iframe width="100%" height="250" src="https://www.youtube.com/embed/89bcFDlP5rw" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class= "col-sm-6">
        To the right is an example of a media player from Youtube. Description description description
    </div>
</div>
<h3> Variants <small> how it varies per location </small> </h3>
  <h4> Audio Media Settings </h4>
    <li> Set as _____ : Able to set the song as a ringtone or an alarm tone </li>
    <li> Settings : Will take you to a lot of different settings for whatever platform you are using, such as Equalizers, or play speed </li>
    <li> Details : Will give you every detail about the current song from Artist to Track length to the file size </li>
    <li> Add to playlist: Add song to a list of the users favorite songs, useful when searching for a song in a very large library </li>

<h3> Priority Metrics <small> Media and its Usability Metrics </small> </h3>

  <p> 
    For most users, media players are used to do one thing, to play the media that the user wants them to play. That being said, because it is more of a utilitarian component, there are some usability metrics that are not as importnat as others. Some of the important ones are learnability, efficiency, errors, and memorability. 

  </p>
  <p> 
    Media players have to be very learnable, very quickly. For most users, the  media player is only a gateway for them to see the actual content. The quicker it is to learn the software the better. For many of it though it may come very intuitively and if learnability clashed with efficiency I would have to say that efficiency has a higher priority. Similar to buying tickets at a train station or anything like that media players have to do this. derp derp. Its the content thata they want to see that is most important. 
  </p>
  <p> 
    Since it is not so much the media player that is important then the actual content being played, media players must also have to be very efficient. Many of the players today have many shortcuts. Instead of pressing the play button they can have the shortcut of spacebar. Or to scrub through they have arrow bars. These are all very important. This allows the user to quickly access this content and to have quicker responses and feedback. 
  </p>
  <p> 
    Also as far as playing the media, no one wants to encounter through errors. Though errors here will not be as fatal, pausing or stoping when one doesn't want to may be annoying. Also volumne controls may not allow a person to really play the video as intended. Again because the media player in it of itself is a gateway into the actual content, the errors are a basis of not delteing the file and being able to accurately scrub through the video. For it to playback the media at the right speed. etc. 
    </p> 
    <p>
      Yes it should be a memorable interface. Even though you may not have been able to see a media player for a long time, the user should be able to remember what exactly the different functions were. 
    </p>
    <p>
      As far as I can tell Satistfaction isn't a very important component. Really having the media player show the media that is needed is more important. Having fun or seeing how well it feels isn't at all that important as the other usability metrics.

  </P> 

<h3> Key Chararacteristics <small> what do all great media players have? </small> </h3>
  
  <p> List them design principles: 
        1. Feedback


        -Has a play/pause button
  -Able to share the media elsewhere 
  -Rewind and fast forward capabilities 
  -Volume Control 
  -Time Stamp- Time control
  -Scrub bar
  -Full Screen Option
  -Minimize and Maximize the screen (player)
  -For Online streaming: DPI/ HD or not 
  -Subtitles

  -Feedback

  </p> 






<h2> Platform Specific Instances </h2> 
<div class="row"> 
  <div class="col-sm-4">
    <div class="well">
        <h3> Mac OSX: Yosemite</h3>
        
        <h5> Appearance </h5>
        <h5> Behavior </h5>
        <h5> Component in Action </h5>
        <h5> Key Characteristics </h5>
      
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
        <h3> iOS iPhone4s </h3>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales a erat ut venenatis. Nullam nec nisi a nibh tempus cursus. Maecenas maximus risus vel sem volutpat, gravida lacinia est lobortis. Sed fermentum rutrum tellus. Sed euismod laoreet ipsum ac tempus. Ut tortor eros, iaculis quis consectetur in, consectetur et risus. In tincidunt tempus turpis. Fusce venenatis nibh ultricies, efficitur orci nec, pulvinar nisl. Sed condimentum nec dolor vitae maximus. Nullam ullamcorper ante in elementum eleifend. In consequat dui dapibus auctor tincidunt. Vestibulum fermentum metus non dui feugiat condimentum. Nullam aliquet dolor quis odio euismod, id mattis nibh posuere. Sed ac nunc nec mi aliquam consectetur. Curabitur est sem, semper sed risus placerat, mattis laoreet ex. 
        </p>
    </div>
  </div> 


  <div class="col-sm-4">
    <div class="well">
        <h3> Android S5 </h3>
          <h4> Music </h4>
          <li> The ability to skip songs by swiping left or right on the album cover art </li>
          <li> Tapping on a small star in the middle below the song’s information will add the song to your “Favorites” playlist. The star will light up, and if tapped again it will take the song off of your “Favorites” playlist and the star will turn off </li>
          <li> A button on the bottom left will show you all of the song names in the current playlist, and a button on the bottom right will add the current song to a playlist. If no playlists have been made you can create a new playlist with the current song as the first entry </li>
          <li> In addition to the volume controls on the left side of the phone, you can tap on the speaker icon in the top right to pull up a volume control slider, that goes from a max of fifteen to a muted zero </li>
          <h4> Video </h4>
          <li>  </li>
    </div>
  </div> 
</div>


{'fraction_non_alphanumeric': 0.06719077568134171, 'fraction_numerical': 0.0061844863731656185, 'mean_word_length': 3.38946399815965, 'pattern_counts': {'":': 0, '<': 271, '<?xml version=': 0, '>': 271, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '342358', 'n_tokens_mistral': 5645, 'n_tokens_neox': 5392, 'n_words': 2969}