C# 2008 Programmer's Reference

 rectDownloadProgress.width = Math.round(progressWidth);
}

Figure 19-61

The EllMarkerDown event handler is fired when the user clicks on the marker (the Ellipse element). Here, you set the markerClicked variable to true to indicate that the marker has been clicked:

//---marker is clicked---
function EllMarkerMouseDown(sender, eventArgs) {
 markerClicked = true;
}

When the user releases the mouse button, the EllMarkerMouseUp event handler is fired. You first need to check if the user releases the button on the main canvas itself or on the marker. If the marker was previously clicked, you need to move the marker to the current location of the mouse and set the media to the new position. The new position of the movie is determined by multiplying the duration of the media and the ratio of the position of the marker with respect to the width of the progress well. Here's the code:

//---marker is released---
function EllMarkerMouseUp(sender, eventArgs) {
 //---only execute this function if the user is moving the marker---
 if (markerClicked) {
  markerClicked=false;
  //---find duration of movie---
  duration =
   Math.round(MediaElement1.NaturalDuration.Seconds * 100) / 100;
  //---get the position of the marker w.r.t. to the Well---
  position =
   ((ellMarker['Canvas.Left']) / rectProgressWell.width) * duration;
  //---get integer part---
  position = Math.floor(position);
  //---end of the media---
  if (ellMarker['Canvas.Left']==rectProgressWell.width) {
   //---move the movie to the last frame---
   MediaElement1.Position = ConvertToTimeSpan(duration);
  } else {
   //---move the movie to the new position---
   MediaElement1.Position = ConvertToTimeSpan(position);
  }
 }
}

The MediaPlayerMouseMove event handler is continuously fired when the mouse moves over the page. You need to determine if the marker is clicked when the mouse is moving. If it is, that means that the user is moving the marker, and you need to reposition the marker. Here's the code:

//---mouse moves inside the Silverlight media player control---
function MediaPlayerMouseMove(sender, eventArgs) {
 //---user clicks marker and drags it---
 if (markerClicked) {
  //---find duration of movie---
  if (duration==0)
   duration =
    Math.round(MediaElement1.NaturalDuration.Seconds * 100) /
    100;
  clearlnterval(intervallD);
  //---get the position of the mouse with respect to the progress Well---
  var pt = eventArgs.getPosition(rectProgressWell);
  //---marker not allowed to stray outside the well---
  if (pt.x > 0 && pt.x < rectProgressWell.width) {
   //---moves the marker---
   ellMarker['Canvas.Left'] = pt.x;
   //---display the new time---
   textblock.Text =
    ConvertToTimeSpan((pt.x / rectProgressWell.width) * duration).toString();
  } else if (pt.x <= 0) //---move to the beginning---
  {
   //---moves the marker---
   ellMarker['Canvas.Left'] = 0;
   //---display the new time---
   textblock.Text = '00:00:00';
  } else if (pt.x >= rectProgressWell.width) //---move to the end---
  {
   //---moves the marker---
   ellMarker['Canvas.Left'] = rectProgressWell.width;
   //---display the new time---
   textblock.Text = ConvertToTimeSpan(duration);
  }
  if (playing)
intervalID = window.setInterval('DisplayCurrentPlayBack()', 500)
 }
}

The MediaPlayerMouseLeave event handler is fired when the mouse leaves the Silverlight page. In this case, you set the markerClicked variable to false:

//---mouse leaves the entire Silverlight media player control
function MediaPlayerMouseLeave(sender, eventArgs) {
 markerClicked=false;
}

The MediaEnded event handler is fired when the media has finished playing. You have to make the Play button visible again and hide the Pause button. In addition, you have to move the marker to the beginning and reset the media to the beginning. Here's the code:

//---movie has finished playing---
function MediaEnded(sender, eventArgs) {
 var btnPlay = sender.findName('canvasPlay');
 var btnPause = sender.findName('canvasPause');
 playing = false;
 clearlnterval(intervallD); //---clear the progress updating---
 btnPlay.opacity = 1; //---show the Play button---
 btnPause.opacity = 0; //---hide the Pause button---
 //---move the marker to the beginning---
 ellMarker['Canvas.Left'] = -2;
 MediaElement1.Position='00:00:00'; //---reset the movie position---
}