pageflow 12.2.0 → 12.3.0

data/app/assets/stylesheets/pageflow/themes/default/slideshow.scss

@@ -1,3 +1,4 @@
 .slideshow {
   @extend %pageflow_widget_margin_top !optional;
+  @extend %pageflow_widget_margin_bottom !optional;
 }

data/app/controllers/pageflow/admin/initial_passwords_controller.rb

@@ -0,0 +1,8 @@
+module Pageflow
+  module Admin
+    class InitialPasswordsController < Devise::PasswordsController
+      layout 'active_admin_logged_out'
+      helper ActiveAdmin::ViewHelpers
+    end
+  end
+end

data/app/helpers/pageflow/common_entry_seed_helper.rb

@@ -10,6 +10,7 @@ module Pageflow
       {
         locale: entry.locale,
         slug: entry.slug,
+        theming: entry.theming.as_json(only: [:privacy_link_url]),
         page_types: PageTypesSeed.new(config).as_json,
         file_url_templates: FileUrlTemplatesSeed.new(config).as_json,
         file_model_types: config.file_types

data/app/helpers/pageflow/entries_helper.rb

@@ -27,11 +27,29 @@ module Pageflow
 
     def entry_global_links(entry)
       links = []
+
       if entry.theming.imprint_link_label.present? && entry.theming.imprint_link_url.present?
-        links << link_to(raw(entry.theming.imprint_link_label), entry.theming.imprint_link_url, :target => '_blank', :tabindex => 2, :class => 'legal')
+        links << link_to(raw(entry.theming.imprint_link_label),
+                         entry.theming.imprint_link_url,
+                         target: '_blank',
+                         tabindex: 2,
+                         class: 'legal')
       end
+
       if entry.theming.copyright_link_label.present? && entry.theming.copyright_link_url.present?
-        links << link_to(raw(entry.theming.copyright_link_label), entry.theming.copyright_link_url, :target => '_blank', :tabindex => 2, :class => 'copy')
+        links << link_to(raw(entry.theming.copyright_link_label),
+                         entry.theming.copyright_link_url,
+                         target: '_blank',
+                         tabindex: 2,
+                         class: 'copy')
+      end
+
+      if entry.theming.privacy_link_url.present?
+        links << link_to(I18n.t('pageflow.public.privacy_notice'),
+                         "#{entry.theming.privacy_link_url}?lang=#{entry.locale}",
+                         target: '_blank',
+                         tabindex: 2,
+                         class: 'privacy')
       end
 
       if links.any?

data/app/helpers/pageflow/entry_json_seed_helper.rb

@@ -11,7 +11,7 @@ module Pageflow
                                         entry: entry)).html_safe
     end
 
-    def entry_theming_seed(entry)
+    def entry_theme_seed(entry)
       theme = entry.theme
       {
         change_to_parent_page_at_storyline_boundary: theme.change_to_parent_page_at_storyline_boundary?,

data/app/helpers/pageflow/public_i18n_helper.rb

@@ -7,11 +7,16 @@ module Pageflow
     end
 
     def public_i18n_translations(entry)
+      merge_ignoring_nil = lambda do |_, fallback, value|
+        value.presence || fallback
+      end
+
       {
         pageflow: {
           public: I18n.t('pageflow.public', locale: I18n.default_locale)
                       .dup
-                      .deep_merge(I18n.t('pageflow.public', locale: entry.locale))
+                      .deep_merge(I18n.t('pageflow.public', locale: entry.locale),
+                                  &merge_ignoring_nil)
         }
       }
     end

data/app/views/admin/accounts/_form.html.erb

@@ -34,6 +34,7 @@
       <%= theming.input :imprint_link_url %>
       <%= theming.input :copyright_link_label %>
       <%= theming.input :copyright_link_url %>
+      <%= theming.input :privacy_link_url %>
 
       <% account_config.admin_form_inputs.find_all_for(:theming).each do |form_input| %>
         <%= form_input.build(theming) %>

data/app/views/pageflow/admin/initial_passwords/edit.html.erb

@@ -0,0 +1,16 @@
+<div id="login">
+  <h2><%= render_or_call_method_or_proc_on(self, active_admin_application.site_title) %> - <%= title t('pageflow.initial_password.title') %></h2>
+
+  <%= devise_error_messages! %>
+  <%= active_admin_form_for(resource, as: resource_name, url: admin_initial_password_path, html: { method: :put }) do |f|
+    f.inputs do
+      f.input :password
+      f.input :password_confirmation
+      f.input :reset_password_token, as: :hidden, input_html: { value: resource.reset_password_token }
+    end
+    f.actions do
+      f.action :submit, label: t('pageflow.initial_password.submit'), button_html: { value: t('pageflow.initial_password.submit') }
+    end
+  end
+  %>
+</div>

data/app/views/pageflow/entry_json_seed/_entry.json.jbuilder

@@ -1,6 +1,6 @@
 json.merge! common_entry_seed(entry)
 
-json.theming entry_theming_seed(entry)
+json.theme entry_theme_seed(entry)
 
 json.storylines entry_storylines_seed(entry)
 json.chapters entry_chapters_seed(entry)

data/app/views/pageflow/user_mailer/invitation.html.erb

@@ -2,8 +2,8 @@
 
 <p><%= t('.instruction') %></p>
 
-<p><%= link_to main_app.edit_user_password_url(@user, reset_password_token: @password_token),
-               main_app.edit_user_password_url(@user, reset_password_token: @password_token) %></p>
+<p><%= link_to edit_admin_initial_password_url(reset_password_token: @password_token),
+               edit_admin_initial_password_url(reset_password_token: @password_token) %></p>
 
 <p><%= t('.ending') %></p>
 

data/app/views/pageflow/user_mailer/invitation.text.erb

@@ -2,7 +2,7 @@
 
 <%= t('.instruction') %>
 
-<%= main_app.edit_user_password_url(@user, reset_password_token: @password_token) %>
+<%= edit_admin_initial_password_url(reset_password_token: @password_token) %>
 
 <%= t('.ending') %>
 

data/config/locales/de.yml

@@ -268,6 +268,7 @@ de:
         home_url: Redirect URL
         imprint_link_label: Impressum-Link Text
         imprint_link_url: Impressum-Link URL
+        privacy_link_url: Datenschutz-Link URL
         theme_name: Theme
       pageflow/video_file:
         dimensions: Maße
@@ -756,7 +757,6 @@ de:
         no_entries: Keine Beiträge
         no_members: Keine Benutzer
         theming_defaults_inline_help: Die folgenden Einstellungen werden als Standard für neue Beiträge des Kontos verwendet. Änderungen wirken sich nicht auf existierende Beiträge aus.
-        widgets_inline_help: DELETED
       entries:
         add_folder: Ordner hinzufügen
         confirm_depublish: Soll der Beitrag wirklich depubliziert werden?
@@ -983,6 +983,8 @@ de:
         captions: Ton-Ersatz-Textspur
         descriptions: Bild-Ersatz-Textspur
         subtitles: Übersetzungs-Textspur
+    cookie_notice_bar:
+      widget_type_name: Leiste am unteren Seitenrand
     default_theme:
       name: Standard
     delayed_text_fade_in:
@@ -1017,6 +1019,8 @@ de:
         header: Dies ist ein leerer Pageflow
         intro: Pageflows bestehen aus Kapiteln und Seiten. In der Seitenleiste rechts findest Du die Gliederung.
         outro: Hier siehst Du dann eine Vorschau deines Pageflows.
+      cookie_notice_bar:
+        widget_type_info_box_text: Der Hinweis wird beim ersten Öffnen von Beiträgen, die Cookies verwenden, am unteren Seitenrand angezeigt. Cookies werden gesetzt, falls ein Dienst zur Erhebnung von Nutzungsdaten (z.B. Google Analytics) verwendet wird oder wenn die Funktion 'Neue Seiten hervorheben' aktiv ist.
       entries:
         unsupported_browser_hint:
           message: Die Version Ihres Browsers wird vom Pageflow Editor nicht unterstützt. Bitte benutzen Sie einen aktuellen Browser.
@@ -1216,10 +1220,6 @@ de:
           title: Hilfe
         help_button:
           open_help: Hilfe anzeigen
-        inputs:
-          reference:
-            edit: DELETED
-            reset: DELETED
         list_blank_slate:
           text: "(Keine Einträge)"
         list_item:
@@ -1652,6 +1652,9 @@ de:
         image_rights: Bildrechte
     highdef_video_encoding:
       feature_name: Full HD und 4K Videos
+    initial_password:
+      submit: Speichern und anmelden
+      title: Passwort festlegen
     invalid_transition: Der gewünschte Statuswechsel ist nicht erlaubt.
     languages:
       ar: Arabisch
@@ -1718,6 +1721,7 @@ de:
     ui:
       configuration_editor:
         tabs:
+          cookie_notice_bar: Cookie Hinweis
           files: Dateien
           general: Allgemein
           links: Verweise
@@ -1763,7 +1767,7 @@ de:
 
             Alle Änderungen sind in der linken Frontend-Ansicht sichtbar, sobald das entsprechende Texteingabefeld im Editierbereich verlassen wurde.
           thumbnail_image_id: Das Thumbnail ersetzt das ansonsten automatisch generierte Vorschaubild in der Navigation und in der Übersicht.
-          transition: Wähle hier den Effekt, der beim Erreichen dieser der Seite benutzt werden soll.
+          transition: Wähle hier den Effekt, der beim Erreichen dieser Seite benutzt werden soll.
       templates:
         inputs:
           file_input:
@@ -1803,6 +1807,8 @@ de:
             url_hint: URL muss mit http:// beginnen.
             url_hint_https: URL muss mit http:// oder https:// beginnen.
     unauthorized: Sie sind nicht berechtigt diese Seite anzuzeigen.
+    unmute_button:
+      widget_type_name: "'Ton ein'-Button"
     user_mailer:
       invitation:
         ending: Dankeschön und viel Spaß,
@@ -1825,6 +1831,8 @@ de:
       none: "(Kein)"
       roles:
         analytics: Zählpixel
+        background_media_control: Hintergrund-Media-Control
+        cookie_notice: Cookie Hinweis
         mobile_navigation: Mobile Navigation
         navigation: Navigationsleiste
         player_controls: Player Controls

data/config/locales/en.yml

@@ -268,6 +268,7 @@ en:
         home_url: Redirect URL
         imprint_link_label: Legal notice link label
         imprint_link_url: Legal notice link URL
+        privacy_link_url: Privacy link URL
         theme_name: Theme
       pageflow/video_file:
         dimensions: Dimensions
@@ -756,13 +757,12 @@ en:
         no_entries: No Stories
         no_members: No members
         theming_defaults_inline_help: The following settings will be used as defaults for new entries in this account. Changes do not affect existing entries.
-        widgets_inline_help: DELETED
       entries:
         add_folder: Add folder
-        confirm_depublish: Unpublish this story?
+        confirm_depublish: Depublish this story?
         confirm_duplicate: Duplicate this story?
         confirm_restore: Restore story to the selected version? A snapshot will be created, so that you can roll back later.
-        depublish: Unpublish story
+        depublish: Depublish story
         duplicate: Copy Story
         edit: Edit
         edit_config: Edit configuration
@@ -981,6 +981,8 @@ en:
         captions: Audio Replacement Text Track
         descriptions: Image Description Text Track
         subtitles: Translation Text Track
+    cookie_notice_bar:
+      widget_type_name: Bar at lower page margin
     default_theme:
       name: Default
     delayed_text_fade_in:
@@ -1017,6 +1019,8 @@ en:
         header: This is an empty Pageflow
         intro: Each Pageflow consist of chapters and pages. The editor panel to your right shows the outline of your story.
         outro: In this area, a live preview will be shown.
+      cookie_notice_bar:
+        widget_type_info_box_text: The notice is displayed when visiting an entry that uses Cookies. Cookies are set, if an analytics integration is active or the 'Emphasize new pages' feature has been enabled.
       entries:
         unsupported_browser_hint:
           message: The Pageflow editor does not support the browser version you are using. We recommend upgrading your browser to the most recent version.
@@ -1216,10 +1220,6 @@ en:
           title: Help
         help_button:
           open_help: Open help
-        inputs:
-          reference:
-            edit: DELETED
-            reset: DELETED
         list_blank_slate:
           text: "(No items)"
         list_item:
@@ -1559,7 +1559,7 @@ en:
           click on a page type on the left column.
       publishing:
         menu_item: Publishing
-        text: "# Publishing\n\nClick on the „Publish“ button to publish your Pageflow. A\nPageflow can be published at any point in time. \n\nBesides this, there is the possibility to publish Pageflows with \na password protection. Just activate „Protect with password“. \nPageflow uses the name of the account as user name and \nautomatically generates a password, which can be changed afterwords. \n\nAlready published stories can also be protected with a password by \npublishing another version - the other way round works as well. \nFor this please just click on the „Publishing“ button. The following \nsteps will then be shown and explained within the dialog window.\n\nPublished\nPageflows can also be unpublished manually at any time. If a\nPageflow has already been published, changes will not be\nshown until you publish your report again.  A Pageflow can\nonly be edited by one author at one time.\n\nThumbnail for embedding the Pageflow on external websites\nAfter publishing your Pageflow, the system generates a\nthumbnail, which can be embedded as an iframe to the\nhyperlink of another website. By means of the code, the size\nof the iframe can be adjusted. The minimum size is a height\n150px and a width of 220px."
+        text: "# Publishing\n\nClick on the „Publish“ button to publish your Pageflow. A\nPageflow can be published at any point in time. \n\nBesides this, there is the possibility to publish Pageflows with \na password protection. Just activate „Protect with password“. \nPageflow uses the name of the account as user name and \nautomatically generates a password, which can be changed afterwords. \n\nAlready published stories can also be protected with a password by \npublishing another version - the other way round works as well. \nFor this please just click on the „Publishing“ button. The following \nsteps will then be shown and explained within the dialog window.\n\nPublished\nPageflows can also be depublished manually at any time. If a\nPageflow has already been published, changes will not be\nshown until you publish your report again.  A Pageflow can\nonly be edited by one author at one time.\n\nThumbnail for embedding the Pageflow on external websites\nAfter publishing your Pageflow, the system generates a\nthumbnail, which can be embedded as an iframe to the\nhyperlink of another website. By means of the code, the size\nof the iframe can be adjusted. The minimum size is a height\n150px and a width of 220px."
       storylines:
         menu_item: Storylines
         text: "# Storylines\n\nIn addition to linear narrations from top to bottom, further storylines can be used as non linear excursions to enlarge upon parts of a story. A „Storyline“ consists of chapters and pages, which users scroll through. Distinguishable is the so called main storyline from further subordinate ones. The user starts off in the main storyline and can then navigate to different excursions.\n\nTo create such an excursion from the main storyline use one of the „Link“ pages (Mosaic, Collage, Hotspot) and create the desired connections via „Links“.\n\nBy choosing a „Parent page“ you can determine to which page users return after scrolling the storyline´s last page.\n\nTransitions to subordinate storylines are visually supported by a horizontal animation as the default setting for entering and leaving. \n\nStorylines are created by clicking onto the plus button next to the storyline menu. Thereby a new chapter opens automatically in which further pages can be added. \n\n\n### Parent pages\n\nIn every subordinate  storyline a „Parent page“ must be determined to define where users land when scrolling back.\n\nThis target page can be chosen by clicking on the pen symbol next to the storyline menu. When a „Parent page“ is defined, a back button will be shown automatically in the subordinate storyline that will always lead users back to the „Parent page“.\n\n\n### Chapter hierarchy\n\nThe use of more than one „subordinary“ storylines and the definition of „Parent pages“ leads to a chapter hierarchy as known from books:\n\n1. (Main storyline), 1.1. (Superior sub storyline), 1.1.1. (Subordinate sub storyline) and so on.\n\nThis hierarchy can be edited afterwards by clicking on the pen symbol next to the storyline menu. A subordinate storyline can be turned into the main storyline as well.\n\n\n### Scroll successors\n\nIf you want to lead users from a last page of a subordinate chapter (1.1.1) to another position than\nthe „Parent page“ (e.g. to 2.1) you can define a „Scroll successor“. Therefore click on the blue pen symbol within the storyline settings. As an example the following sequence might be imaginable: 1 -> 1.1 -> 1.1.1 -> 2.1\n\nAttention: While editing only the selected chapter will be shown in the sidebar. To switch to the other chapters click onto the storyline menu."
@@ -1624,6 +1624,9 @@ en:
         image_rights: Credits
     highdef_video_encoding:
       feature_name: Full HD and 4K videos
+    initial_password:
+      submit: Save and sign in
+      title: Set your password
     invalid_transition: Invalid transition
     languages:
       ar: Arabic
@@ -1690,6 +1693,7 @@ en:
     ui:
       configuration_editor:
         tabs:
+          cookie_notice_bar: Cookie Notice
           files: Files
           general: General
           links: Links
@@ -1778,6 +1782,8 @@ en:
             url_hint: 'URL must start with http:// '
             url_hint_https: URL must start with http:// or https://
     unauthorized: You are not authorized to view this page.
+    unmute_button:
+      widget_type_name: Unmute button
     user_mailer:
       invitation:
         ending: Thank you and have fun,
@@ -1800,6 +1806,8 @@ en:
       none: "(none)"
       roles:
         analytics: Tracking
+        background_media_control: Background media control
+        cookie_notice: Cookie Notice
         mobile_navigation: Mobile navigation
         navigation: Navigation bar
         player_controls: Player Controls

data/config/routes.rb

@@ -30,6 +30,12 @@ Pageflow::Engine.routes.draw do
       resource :edit_lock
     end
 
+    namespace :admin do
+      devise_scope :user do
+        resource :initial_password, only: [:edit, :update]
+      end
+    end
+
     namespace :editor do
       resources :entries, :only => :index, :shallow => true do
         get :seed, :on => :member

data/db/migrate/20180528144334_add_privacy_link_url_to_themings.rb

@@ -0,0 +1,5 @@
+class AddPrivacyLinkUrlToThemings < ActiveRecord::Migration
+  def change
+    add_column :pageflow_themings, :privacy_link_url, :string
+  end
+end

data/lib/pageflow/built_in_widget_type.rb

@@ -31,5 +31,13 @@ module Pageflow
     def self.slim_player_controls
       new('slim_player_controls', ['player_controls'], 'pageflow/widgets/placeholder')
     end
+
+    def self.cookie_notice_bar
+      Pageflow::React.create_widget_type('cookie_notice_bar', 'cookie_notice')
+    end
+
+    def self.unmute_button
+      Pageflow::React.create_widget_type('unmute_button', 'background_media_control')
+    end
   end
 end

data/lib/pageflow/built_in_widget_types_plugin.rb

@@ -5,6 +5,8 @@ module Pageflow
       config.widget_types.register(Pageflow::BuiltInWidgetType.mobile_navigation, default: true)
       config.widget_types.register(Pageflow::BuiltInWidgetType.slim_player_controls)
       config.widget_types.register(Pageflow::BuiltInWidgetType.classic_player_controls, default: true)
+      config.widget_types.register(Pageflow::BuiltInWidgetType.cookie_notice_bar)
+      config.widget_types.register(Pageflow::BuiltInWidgetType.unmute_button, default: true)
     end
   end
 end

data/lib/pageflow/version.rb

@@ -1,3 +1,3 @@
 module Pageflow
-  VERSION = '12.2.0'.freeze
+  VERSION = '12.3.0'.freeze
 end

data/vendor/assets/javascripts/audio5.min.js

@@ -4,9 +4,9 @@
  * License MIT (c) Zohar Arad 2013
  */
 (function ($win, ns, factory) {
+  "use strict";
   /*global define */
   /*global swfobject */
-  "use strict";
 
   if (typeof (module) !== 'undefined' && module.exports) { // CommonJS
     module.exports = factory(ns, $win);
@@ -134,17 +134,35 @@
     trigger: function (evt) {
       if (this.channels && this.channels.hasOwnProperty(evt)) {
         var args = Array.prototype.slice.call(arguments, 1);
-        var a = [];
+
+        // temp array to store all subscribers for the channel evt that must be stored in state
+        var evtSubscribers = [];
+        // temp array to store all subscribers for the channel evt that is being triggered that must be executed.
+        var evtSubscribersForExec = [];
+
         while(this.channels[evt].length > 0) {
           var sub = this.channels[evt].shift();
-          if (typeof (sub.fn) === 'function') {
-            sub.fn.apply(sub.ctx, args);
-          }
+
           if ( !sub.once ){
-            a.push(sub);
+            // for any channel event triggers that are not marked as once only, we need to keep.
+            evtSubscribers.push(sub);
           }
+
+          // if we have a function with the channel subscription, store in temp array ready to call after all proceeded
+          if (typeof (sub.fn) === 'function') {
+            // every subscriber we've processed will be executed
+            evtSubscribersForExec.push(sub);
+          }
+        }
+
+        // before we execute any of the subscribers to the trigger, we must make sure keep this.channels[evt] up to date in case any sub fns call off
+        this.channels[evt] = evtSubscribers;
+
+        // run all the event subscribers that need executing
+        while(evtSubscribersForExec.length > 0) {
+          var eventSub = evtSubscribersForExec.shift();
+          eventSub.fn.apply(eventSub.ctx, args);
         }
-        this.channels[evt] = a;
       }
     }
   };
@@ -153,19 +171,21 @@
     /**
      * Flash embed code string with cross-browser support.
      */
-    flash_embed_code: (function () {
+  flash_embed_code: function (id, swf_location, ts) {
       var prefix;
-      var s = '<param name="movie" value="$2?playerInstance=window.' + ns + '_flash.instances[\'$1\']&datetime=$3"/>' +
+      var elemId = ns + id;
+      var s = '<param name="movie" value="' + swf_location + '?playerInstanceNumber=' + id + '&datetime=' + ts + '"/>' +
         '<param name="wmode" value="transparent"/>' +
         '<param name="allowscriptaccess" value="always" />' +
         '</object>';
       if (ActiveXObject) {
-        prefix = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1" height="1" id="$1">';
+        prefix = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1" height="1" id="' + elemId + '">';
       } else {
-        prefix = '<object type="application/x-shockwave-flash" data="$2?playerInstance=window.' + ns + '_flash.instances[\'$1\']&datetime=$3" width="1" height="1" id="$1" >';
+        prefix = '<object type="application/x-shockwave-flash" data="' + swf_location + '?playerInstanceNumber=' + id + '&datetime=' + ts + '" width="1" height="1" id="' + elemId + '" >';
       }
+
       return prefix + s;
-    }()),
+    },
     /**
      * Check if browser supports audio mime type.
      * @param {String} mime_type audio mime type to check
@@ -175,30 +195,36 @@
       var a = document.createElement('audio');
       var mime_str;
       switch (mime_type) {
-      case 'mp3':
-        mime_str = 'audio/mpeg; codecs="mp3"';
-        break;
-      case 'vorbis':
-        mime_str = 'audio/ogg; codecs="vorbis"';
-        break;
-      case 'opus':
-        mime_str = 'audio/ogg; codecs="opus"';
-        break;
-      case 'webm':
-        mime_str = 'audio/webm; codecs="vorbis"';
-        break;
-      case 'mp4':
-        mime_str = 'audio/mp4; codecs="mp4a.40.5"';
-        break;
-      case 'wav':
-        mime_str = 'audio/wav; codecs="1"';
-        break;
-      }
-      if (mime_str === undefined) {
-        throw new Error('Unspecified Audio Mime Type');
-      } else {
-        return !!a.canPlayType && a.canPlayType(mime_str) !== '';
+        case 'mp3':
+          mime_str = 'audio/mpeg;';
+          break;
+        case 'vorbis':
+          mime_str = 'audio/ogg; codecs="vorbis"';
+          break;
+        case 'opus':
+          mime_str = 'audio/ogg; codecs="opus"';
+          break;
+        case 'webm':
+          mime_str = 'audio/webm; codecs="vorbis"';
+          break;
+        case 'mp4':
+          mime_str = 'audio/mp4; codecs="mp4a.40.5"';
+          break;
+        case 'wav':
+          mime_str = 'audio/wav; codecs="1"';
+          break;
       }
+      if (mime_str !== undefined) {
+        if (mime_type === 'mp3' && navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/Firefox/i)) {
+          return true;
+        }
+        try {
+          return !!a.canPlayType && a.canPlayType(mime_str) !== '';
+        } catch (e) {
+          return false;
+        }
+      }
+      return false;
     },
     /**
      * Boolean flag indicating whether the browser has Flash installed or not
@@ -232,19 +258,17 @@
       document.body.appendChild(d);
       if(typeof($win.swfobject) === 'object'){
         var fv = {
-          playerInstance: 'window.'+ ns + '_flash.instances["'+id+'"]'
+          playerInstance: 'window.'+ ns + '_flash.instances[\''+id+'\']'
         };
         var params = {
           allowscriptaccess: 'always',
           wmode: 'transparent'
         };
-        d.innerHTML = '<div id="'+id+'"></div>';
-        swfobject.embedSWF(swf_location + '?ts='+(new Date().getTime() + Math.random()), id, "1", "1", "9.0.0", null, fv, params);
+        d.innerHTML = '<div id="'+ ns + id +'"></div>';
+        swfobject.embedSWF(swf_location + '?ts='+(new Date().getTime() + Math.random()), ns + id, "1", "1", "9.0.0", null, fv, params);
       } else {
-        var flashSource = this.flash_embed_code.replace(/\$1/g, id);
-        flashSource = flashSource.replace(/\$2/g, swf_location);
-        flashSource = flashSource.replace(/\$3/g, (new Date().getTime() + Math.random())); // Ensure swf is not pulled from cache
-        d.innerHTML = flashSource;
+        var ts = new Date().getTime() + Math.random(); // Ensure swf is not pulled from cache
+        d.innerHTML = this.flash_embed_code(id, swf_location, ts);
       }
       return document.getElementById(id);
     },
@@ -281,7 +305,7 @@
     duration: 0, /** {Float} audio duration (sec) */
     position: 0, /** {Float} audio position (sec) */
     load_percent: 0, /** {Float} audio file load percent (%) */
-    seekable: null, /** {Boolean} is loaded audio seekable */
+    seekable: false, /** {Boolean} is loaded audio seekable */
     ready: null /** {Boolean} is loaded audio seekable */
   };
 
@@ -291,8 +315,7 @@
    * @type {Object}
    */
   var globalAudio5Flash = $win[ns + '_flash'] = $win[ns + '_flash'] || {
-    instances: { }, /** FlashAudioPlayer instance hash */
-    count: 0 /** FlashAudioPlayer instance count */
+    instances: [] /** FlashAudioPlayer instance hash */
   };
 
   /**
@@ -311,9 +334,8 @@
      * @param {String} swf_src path to audio player SWF file
      */
     init: function (swf_src) {
-      globalAudio5Flash.count += 1;
-      this.id = ns + globalAudio5Flash.count;
-      globalAudio5Flash.instances[this.id] = this;
+      globalAudio5Flash.instances.push(this);
+      this.id = globalAudio5Flash.instances.length - 1;
       this.embed(swf_src);
     },
     /**
@@ -327,7 +349,7 @@
      * ExternalInterface callback indicating SWF is ready
      */
     eiReady: function () {
-      this.audio = document.getElementById(this.id);
+      this.audio = document.getElementById(ns + this.id);
       this.trigger('ready');
     },
     /**
@@ -363,9 +385,13 @@
     /**
      * ExternalInterface download progress callback. Fires as long as audio file is downloaded by browser.
      * @param {Float} percent audio download percent
+     * @param {Float} duration audio total duration (sec)
+     * * @param {Boolean} seekable is audio seekable or not (download or streaming)
      */
-    eiProgress: function (percent) {
+    eiProgress: function (percent, duration, seekable) {
       this.load_percent = percent;
+      this.duration = duration;
+      this.seekable = seekable;
       this.trigger('progress', percent);
     },
     /**
@@ -381,6 +407,7 @@
     eiPlay: function () {
       this.playing = true;
       this.trigger('play');
+      this.trigger('playing');
     },
     /**
      * ExternalInterface audio pause callback. Fires when audio is paused.
@@ -393,7 +420,7 @@
      * ExternalInterface audio ended callback. Fires when audio playback ended.
      */
     eiEnded: function () {
-      this.playing = false;
+      this.pause();
       this.trigger('ended');
     },
     /**
@@ -459,6 +486,24 @@
         this.audio.seekTo(position);
         this.position = position;
       } catch (e) {}
+    },
+    /**
+     * This feature was not implemented for Flash
+     */
+    rate: function () {
+      // Not implemented
+    },
+    /**
+     * Destroy audio object and remove from DOM
+     */
+    destroyAudio: function() {
+      if(this.audio){
+        this.pause();
+        this.audio.parentNode.removeChild(this.audio);
+        delete globalAudio5Flash.instances[this.id];
+        globalAudio5Flash.instances.splice(this.id, 1);
+        delete this.audio;
+      }
     }
   };
 
@@ -475,52 +520,91 @@
     /**
      * Initialize the player instance
      */
-    init: function (reusedTag) {
-      this.reusedTag = reusedTag;
+    init: function () {
+      this._rate = 1;
       this.trigger('ready');
     },
+    /**
+     * Create new audio instance
+     */
     createAudio: function(){
-      this.audio = this.reusedTag || new Audio();
+      this.audio = new Audio();
       this.audio.autoplay = false;
       this.audio.preload = 'auto';
       this.audio.autobuffer = true;
+      this.audio.playbackRate = this._rate;
 
       this.audio.setAttribute('crossorigin', 'anonymous');
 
       this.bindEvents();
     },
+    /**
+     * Destroy current audio instance
+     */
     destroyAudio: function(){
       if(this.audio){
+        this.pause();
         this.unbindEvents();
-        delete this.audio;
+        try {
+          this.audio.setAttribute('src', '');
+        } finally {
+          delete this.audio;
+        }
       }
     },
+    /**
+     * Sets up audio event listeners once so adding / removing event listeners is always done
+     * on the same callbacks.
+     */
+    setupEventListeners: function(){
+      this.listeners = {
+        loadstart: this.onLoadStart.bind(this),
+        canplay: this.onLoad.bind(this),
+        loadedmetadata: this.onLoadedMetadata.bind(this),
+        play: this.onPlay.bind(this),
+        playing: this.onPlaying.bind(this),
+        pause: this.onPause.bind(this),
+        ended: this.onEnded.bind(this),
+        error: this.onError.bind(this),
+        timeupdate: this.onTimeUpdate.bind(this),
+        seeking: this.onSeeking.bind(this),
+        seeked: this.onSeeked.bind(this)
+      };
+    },
     /**
      * Bind DOM events to Audio object
      */
-    bindEvents: function () {
-      this.audio.addEventListener('loadstart', this.onLoadStart.bind(this));
-      this.audio.addEventListener('canplay', this.onLoad.bind(this));
-      this.audio.addEventListener('loadedmetadata', this.onLoadedMetadata.bind(this));
-      this.audio.addEventListener('playing', this.onPlay.bind(this));
-      this.audio.addEventListener('pause', this.onPause.bind(this));
-      this.audio.addEventListener('ended', this.onEnded.bind(this));
-      this.audio.addEventListener('error', this.onError.bind(this));
-      this.audio.addEventListener('timeupdate', this.onTimeUpdate.bind(this));
-      this.audio.addEventListener('seeking', this.onSeeking.bind(this));
-      this.audio.addEventListener('seeked', this.onSeeked.bind(this));
-    },
-    unbindEvents: function(){
-      this.audio.removeEventListener('loadstart', this.onLoadStart.bind(this));
-      this.audio.removeEventListener('canplay', this.onLoad.bind(this));
-      this.audio.removeEventListener('loadedmetadata', this.onLoadedMetadata.bind(this));
-      this.audio.removeEventListener('playing', this.onPlay.bind(this));
-      this.audio.removeEventListener('pause', this.onPause.bind(this));
-      this.audio.removeEventListener('ended', this.onEnded.bind(this));
-      this.audio.removeEventListener('error', this.onError.bind(this));
-      this.audio.removeEventListener('timeupdate', this.onTimeUpdate.bind(this));
-      this.audio.removeEventListener('seeking', this.onSeeking.bind(this));
-      this.audio.removeEventListener('seeked', this.onSeeked.bind(this));
+    bindEvents: function() {
+      if(this.listeners === undefined){
+        this.setupEventListeners();
+      }
+      this.audio.addEventListener('loadstart', this.listeners.loadstart, false);
+      this.audio.addEventListener('canplay', this.listeners.canplay, false);
+      this.audio.addEventListener('loadedmetadata', this.listeners.loadedmetadata, false);
+      this.audio.addEventListener('play', this.listeners.play, false);
+      this.audio.addEventListener('playing', this.listeners.playing, false);
+      this.audio.addEventListener('pause', this.listeners.pause, false);
+      this.audio.addEventListener('ended', this.listeners.ended, false);
+      this.audio.addEventListener('error', this.listeners.error, false);
+      this.audio.addEventListener('timeupdate', this.listeners.timeupdate, false);
+      this.audio.addEventListener('seeking', this.listeners.seeking, false);
+      this.audio.addEventListener('seeked', this.listeners.seeked, false);
+    },
+    /**
+     * Unbind DOM events from Audio object
+     */
+    unbindEvents: function() {
+      this.audio.removeEventListener('loadstart', this.listeners.loadstart);
+      this.audio.removeEventListener('canplay', this.listeners.canplay);
+      this.audio.removeEventListener('loadedmetadata', this.listeners.loadedmetadata);
+      this.audio.removeEventListener('play', this.listeners.play);
+      this.audio.removeEventListener('playing', this.listeners.playing);
+      this.audio.removeEventListener('pause', this.listeners.pause);
+      this.audio.removeEventListener('ended', this.listeners.ended);
+      this.audio.removeEventListener('error', this.listeners.error);
+      this.audio.removeEventListener('timeupdate', this.listeners.timeupdate);
+      this.audio.removeEventListener('seeking', this.listeners.seeking);
+      this.audio.removeEventListener('seeked', this.listeners.seeked);
     },
     /**
      * Audio load start event handler. Triggered when audio starts loading
@@ -533,6 +617,9 @@
      * Resets player parameters and starts audio download progress timer.
      */
     onLoad: function () {
+      if(!this.audio){
+        return setTimeout(this.onLoad.bind(this), 100);
+      }
       this.seekable = this.audio.seekable && this.audio.seekable.length > 0;
       if (this.seekable) {
         this.timer = setInterval(this.onProgress.bind(this), 250);
@@ -549,12 +636,21 @@
      * Audio play event handler. Triggered when audio starts playing.
      */
     onPlay: function () {
+      this.playing = true;
       this.trigger('play');
     },
+    /**
+     * Audio play event handler. Triggered when audio starts playing.
+     */
+    onPlaying: function () {
+      this.playing = true;
+      this.trigger('playing');
+    },
     /**
      * Audio pause event handler. Triggered when audio is paused.
      */
     onPause: function () {
+      this.playing = false;
       this.trigger('pause');
     },
     /**
@@ -568,9 +664,11 @@
      * Audio timeupdate event handler. Triggered as long as playhead position is updated (audio is being played).
      */
     onTimeUpdate: function () {
-      if (this.audio.buffered !== null && this.playing) {
-        this.position = this.audio.currentTime;
-        this.duration = this.audio.duration === Infinity ? null : this.audio.duration;
+      if (this.audio && this.playing) {
+        try{
+          this.position = this.audio.currentTime;
+          this.duration = this.audio.duration === Infinity ? null : this.audio.duration;
+        } catch (e){}
         this.trigger('timeupdate', this.position, this.duration);
       }
     },
@@ -580,8 +678,9 @@
      * Cancelled when audio has fully download or when a new audio file has been loaded to the player.
      */
     onProgress: function () {
-      if (this.audio.buffered !== null) {
-        this.load_percent = parseInt(((this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration) * 100), 10);
+      if (this.audio && this.audio.buffered !== null && this.audio.buffered.length) {
+        this.duration = this.audio.duration === Infinity ? null : this.audio.duration;
+        this.load_percent = parseInt(((this.audio.buffered.end(this.audio.buffered.length - 1) / this.duration) * 100), 10);
         this.trigger('progress', this.load_percent);
         if (this.load_percent >= 100) {
           this.clearLoadProgress();
@@ -632,8 +731,11 @@
      */
     load: function (url) {
       this.reset();
-      this.destroyAudio();
-      this.createAudio();
+      this.trigger('pause');
+      //this.destroyAudio();
+      if(this.audio === undefined){
+        this.createAudio();
+      }
       this.audio.setAttribute('src', url);
       this.audio.load();
     },
@@ -641,15 +743,19 @@
      * Play audio
      */
     play: function () {
-      this.playing = true;
-      this.audio.play();
+      if(this.audio) {
+        var playPromise = this.audio.play();
+        this.audio.playbackRate = this._rate;
+        return playPromise;
+      }
     },
     /**
      * Pause audio
      */
     pause: function () {
-      this.playing = false;
-      this.audio.pause();
+      if(this.audio) {
+        this.audio.pause();
+      }
     },
     /**
      * Get / Set audio volume
@@ -676,10 +782,23 @@
       if (playing) {
         this.play();
       } else {
-        if (this.audio.buffered !== null) {
+        if (this.audio.buffered !== null && this.audio.buffered.length) {
           this.trigger('timeupdate', this.position, this.duration);
         }
       }
+    },
+    /**
+     * Define the playback rate
+     * @param {Float} v playback rate value to be set
+     */
+    rate: function (v) {
+      if (v === undefined || isNaN(parseFloat(v))) {
+        return this._rate;
+      }
+      this._rate = v;
+      if (this.audio) {
+          this.audio.playbackRate = v;
+      }
     }
   };
 
@@ -748,7 +867,7 @@
       if (this.settings.use_flash) {
         this.audio.init(s.swf_path);
       } else {
-        this.audio.init(s.reusedTag);
+        this.audio.init();
       }
     },
     /**
@@ -757,27 +876,35 @@
      * @return {FlashAudioPlayer,HTML5AudioPlayer} audio player instance
      */
     getPlayer: function () {
-      var i, l, player;
-      for (i = 0, l = this.settings.codecs.length; i < l; i++) {
-        var codec = this.settings.codecs[i];
-        if (Audio5js.can_play(codec)) {
-          player = new HTML5AudioPlayer();
-          this.settings.use_flash = false;
-          this.settings.player = {
-            engine: 'html',
-            codec: codec
-          };
-          break;
-        }
-      }
-      if (player === undefined) {
-        // here we double check for mp3 support instead of defaulting to Flash in case user overrode the settings.codecs array with an empty array.
-        this.settings.use_flash = !Audio5js.can_play('mp3');
-        player = this.settings.use_flash ? new FlashAudioPlayer() : new HTML5AudioPlayer();
+      var i, l, player, codec;
+      if(this.settings.use_flash){
+        player = new FlashAudioPlayer();
         this.settings.player = {
-          engine: (this.settings.use_flash ? 'flash' : 'html'),
+          engine: 'flash',
           codec: 'mp3'
         };
+      } else {
+        for (i = 0, l = this.settings.codecs.length; i < l; i++) {
+          codec = this.settings.codecs[i];
+          if (Audio5js.can_play(codec)) {
+            player = new HTML5AudioPlayer();
+            this.settings.use_flash = false;
+            this.settings.player = {
+              engine: 'html',
+              codec: codec
+            };
+            break;
+          }
+        }
+        if (player === undefined) {
+          // here we double check for mp3 support instead of defaulting to Flash in case user overrode the settings.codecs array with an empty array.
+          this.settings.use_flash = !Audio5js.can_play('mp3');
+          player = this.settings.use_flash ? new FlashAudioPlayer() : new HTML5AudioPlayer();
+          this.settings.player = {
+            engine: (this.settings.use_flash ? 'flash' : 'html'),
+            codec: 'mp3'
+          };
+        }
       }
       return player;
     },
@@ -798,18 +925,36 @@
       this.audio.on('seeking', this.onSeeking, this);
       this.audio.on('seeked', this.onSeeked, this);
     },
+    /**
+     * Bind events from audio object to internal callbacks
+     */
+    unbindAudioEvents: function () {
+      this.audio.off('ready', this.onReady);
+      this.audio.off('loadstart', this.onLoadStart);
+      this.audio.off('loadedmetadata', this.onLoadedMetadata);
+      this.audio.off('play', this.onPlay);
+      this.audio.off('pause', this.onPause);
+      this.audio.off('ended', this.onEnded);
+      this.audio.off('canplay', this.onCanPlay);
+      this.audio.off('timeupdate', this.onTimeUpdate);
+      this.audio.off('progress', this.onProgress);
+      this.audio.off('error', this.onError);
+      this.audio.off('seeking', this.onSeeking);
+      this.audio.off('seeked', this.onSeeked);
+    },
     /**
      * Load audio from URL
      * @param {String} url URL of audio to load
      */
     load: function (url) {
+      var that = this;
       var f = function(u){
-        this.audio.load(u);
-        this.trigger('load');
-      }.bind(this, url);
+        that.audio.load(u);
+        that.trigger('load');
+      };
 
       if(this.ready){
-        f();
+        f(url);
       } else {
         this.on('ready', f);
       }
@@ -819,8 +964,7 @@
      */
     play: function () {
       if(!this.playing){
-        this.playing = true;
-        this.audio.play();
+        return this.audio.play();
       }
     },
     /**
@@ -828,7 +972,6 @@
      */
     pause: function () {
       if(this.playing){
-        this.playing = false;
         this.audio.pause();
       }
     },
@@ -859,6 +1002,20 @@
       this.audio.seek(position);
       this.position = position;
     },
+    /**
+     * Define the playback rate
+     * @param {Float} value playback rate value to be set
+     */
+    rate: function (value) {
+        return this.audio.rate(value);
+    },
+    /**
+     * Destroy audio object and remove from DOM
+     */
+    destroy: function() {
+      this.unbindAudioEvents();
+      this.audio.destroyAudio();
+    },
     /**
      * Callback for audio ready event. Indicates audio is ready for playback.
      * Looks for ready callback in settings object and invokes it in the context of player instance
@@ -886,27 +1043,22 @@
      * Audio play event handler
      */
     onPlay: function () {
+      this.playing = true;
       this.trigger('play');
     },
     /**
      * Audio pause event handler
      */
     onPause: function () {
+      this.playing = false;
       this.trigger('pause');
     },
     /**
      * Playback end event handler
      */
     onEnded: function () {
-      var wasPlaying = this.playing;
-
-      if (this.settings.loop && wasPlaying) {
-        this.audio.play();
-      }
-      else {
-        this.playing = false;
-        this.trigger('ended');
-      }
+      this.playing = false;
+      this.trigger('ended');
     },
     /**
      * Audio error event handler
@@ -944,9 +1096,7 @@
      */
     onTimeUpdate: function (position, duration) {
       this.position = this.settings.format_time ? util.formatTime(position) : position;
-      if (this.duration !== duration) {
-        this.duration = this.settings.format_time && duration !== null ? util.formatTime(duration) : duration;
-      }
+      this.duration = this.settings.format_time && duration !== null ? util.formatTime(duration) : duration;
       this.trigger('timeupdate', this.position, this.duration);
     },
     /**
@@ -954,6 +1104,7 @@
      * @param {Float} loaded audio download percent
      */
     onProgress: function (loaded) {
+      this.duration = this.audio.duration;
       this.load_percent = loaded;
       this.trigger('progress', loaded);
     }
@@ -964,4 +1115,4 @@
 
   return Audio5js;
 
-}));
+}));