Jump To …

youtubeplugin.coffee

src/plugins/

class window.YoutubePlugin extends window.LimePlugin
  init: ->
    @name = 'YoutubePlugin'
    annotation = undefined
    console.info "Initialize YoutubePlugin"

    for annotation in @lime.annotations
      if annotation.resource.value.indexOf("geonames") < 0 and annotation.resource.value.indexOf("dbpedia") < 0 and annotation.resource.value.indexOf("youtube") > 0
        @handleAnnotation annotation

Putting this into a function keeps the annotation in the context

  handleAnnotation: (annotation) ->

console.info "The annotation #{annotation.resource} looks interesting, get the whole entity so we can show it in a widget!", annotation annotation.entityPromise.done (entities) => console.info "entities for annotation #{annotation.resource} loaded, create a widget for it!", annotation

    nonConcept = annotation.resource.value
    nonConcept = nonConcept.replace("No description found.","")
    if(nonConcept.length >= 3)
      widget = @lime.allocateWidgetSpace @,
        thumbnail: "img/youtube.png" # should go into CSS
        title: "#{annotation.getLabel()} Video"
        type: "YoutubeWidget"
        sortBy: ->
          10000 * annotation.start + annotation.end

We're going to need the annotation for the widget's activate event

      widget.annotation = annotation

widget was activated, we show details now

      jQuery(widget).bind 'activate', (e) =>
        try
          eventClickedLabel = e.target.options.title
          eventCategory = @name
          _gaq.push ['_trackEvent',eventCategory, 'clicked',eventClickedLabel]
        catch error
        @showAbstractInModalWindow annotation, @getModalContainer()

Hang the widget on the annotation

      annotation.widgets[@name] = widget

      jQuery(annotation).bind "becomeActive", (e) =>

attached gogle analytics stack push for active annotation

        try
          eventActiveLabel = e.target.widgets[@name].options.title
          eventCategory = @name
          _gaq.push ['_trackEvent',eventCategory,'becameActive',eventActiveLabel]
        catch error
        annotation.widgets[@name].setActive()

      jQuery(annotation).bind "becomeInactive", (e) =>

attached gogle analytics stack push for inactive annotation

        try
          eventActiveLabel = e.target.widgets[@name].options.title
          eventCategory = @name
          _gaq.push ['_trackEvent',eventCategory,'becomeInactive',eventActiveLabel]
        catch error
        annotation.widgets[@name].setInactive()

  showAbstractInModalWindow: (annotation, outputElement) ->
    modalContent = $(outputElement)
    modalContent.css "width", "600px"
    modalContent.css "height", "auto"
    startTime = new Date().getTime()

console.log("latitude: " + latitude + " longitude: " + longitude + " = latlong: " + latlng);

    lime = this.lime
    url = annotation.resource.value
    url = url.split('v=')[1]
    console.info annotation.resource.value, url

result = "

" + "

" + comment + "

" + "

    result = """
             <iframe width="600" height="338" style="margin: 0 auto; display: block;" src="http://www.youtube.com/embed/#{url}?autoplay=1" frameborder="0" allowfullscreen>
                  <p>Your browser does not support iframes.</p>
              </iframe>
            """
    modalContent.append result

widget controls

    $(".close").click (e) =>
      endTime = new Date().getTime()
      timeSpent = endTime - startTime
      eventLabel = annotation.widgets[@name].options.title
      try
        _gaq.push ['_trackEvent', @name, 'viewed', eventLabel, timeSpent]
        _gaq.push ['_trackTiming', @name, eventLabel, timeSpent, 'viewed']
      catch error

    $('#mask').click (e) =>
      endTime = new Date().getTime()
      timeSpent = endTime - startTime
      eventLabel = annotation.widgets[@name].options.title
      try
        _gaq.push ['_trackEvent', @name, 'viewed', eventLabel, timeSpent]
        _gaq.push ['_trackTiming', @name, eventLabel, timeSpent, 'viewed']
      catch error

displayModal: (annotation) -> # Modal window script usin jquery

Get Modal Window var modalcontainer;

    if @lime.player.isFullScreen
      modalcontainer = $(".modalwindow")
    else
      modalcontainer = $("#modalWindow")

Get mask element

    mask = undefined
    if @lime.player.isFullScreen
      mask = $(".mask")
    else
      mask = $("#mask")
    $(modalcontainer).css "height", "90%"
    $(modalcontainer).css "max-height", "750px"
    $(modalcontainer).css "max-width", "700px"
    $(modalcontainer).css "overflow-x", "auto"
    $(modalcontainer).empty()
    $(modalcontainer).append "<a href=\"#\" class=\"close\" role=\"button\"><img src=\"img/close-icon.png\" style=\"width: 22px; height: 22px;\"/></a>"
    $(modalcontainer).append "<div id=\"modalContent\" style=\"height: 95%; width: 100%; position: relative; margin: 0 auto; color: black; \">"

$(modalcontainer).append("

" + "

" + locationName + "

" + " lat: " + latitude + "; long: " + longitude + "

");

    $(modalcontainer).append "</div>"

console.log("$(modalcontainer) = " + $(modalcontainer).html() + " modalcontainer " + modalcontainer.html());

Get the screen height and width

    maskHeight = $(window).height()
    maskWidth = $(window).width()

Set heigth and width to mask to fill up the whole screen

    $(mask).css
      width: maskWidth
      height: maskHeight

transition effect

    $(mask).fadeIn 100
    $(mask).fadeTo "fast", 0.8

Get the window height and width

    winH = $(window).height()
    winW = $(window).width()

Set the popup window to center

    $(modalcontainer).css "top", winH / 2 - $(modalcontainer).height() / 2
    $(modalcontainer).css "left", winW / 2 - $(modalcontainer).width() / 2

transition effect

    $(modalcontainer).fadeIn 100

if close button is clicked

    $(".close").click (e) =>

Cancel the link behavior

      e.preventDefault()
      $(mask).hide()
      $(modalcontainer).hide().empty();

if mask is clicked

    $(mask).click (e)=>
      $(mask).hide()
      $(modalcontainer).hide().empty();

    $(window).resize (e)=>

var box = modalcontainer;

Get the screen height and width

      maskHeight = $(document).height()
      maskWidth = $(document).width()

Set height and width to mask to fill up the whole screen

      $(mask).css
        width: maskWidth
        height: maskHeight

Get the window height and width

      winH = $(window).height()
      winW = $(window).width()

Set the popup window to center

      $(modalcontainer).css "top", winH / 2 - $(modalcontainer).height() / 2
      $(modalcontainer).css "left", winW / 2 - $(modalcontainer).width() / 2

box.blur(function() { setTimeout(, 100); });

    @showInModalWindow annotation, "modalContent"

#

LIME - Linked Media Player