hyunsupul / aesop-core

Open-sourced suite of components that empower interactive storytelling in WordPress.
http://aesopstoryengine.com
GNU General Public License v2.0
244 stars 56 forks source link

Request - Audio Waypoint Filter #83

Closed TheAnarchyState closed 10 years ago

TheAnarchyState commented 10 years ago

For the audio component, is it possible to add an option for it to autostart when the player is mid-way up the page?

bearded-avenger commented 10 years ago

this will be in 1.1

If you filter this, and return a value such as 30%, this means the audio component will start to play when it is 30% from the top of the screen. 75% would mean, it would start playing when the audio component is 75% from the top of the screen.

This video filter is identical. Just switch out the name audio for video.

add_filter('aesop_audio_component_waypoint','aesop_audio_component_waypoint');
function aesop_audio_component_waypoint() {
  return '50%';
}
TheAnarchyState commented 10 years ago

Hi Nick. This sounds perfect.

Does this code need to go into a child theme?

Can your above code be made specific to an individual audio file? If so, do I use the aside id (e.g. aside id=aesop-audio-1146-1) to do this?

Thanks, Mark

bearded-avenger commented 10 years ago

ok i expanded teh scope of this and the video filter to target individual components

add_filter('aesop_audio_component_waypoint-1146-1','aesop_audio_component_waypoint');
function aesop_audio_component_waypoint() {
  return '50%';
}

Just in case you're not aware, the unique prefixes break down to postid-instance.

bearded-avenger commented 10 years ago

oh! and also, yeah, either a child theme functions.php, or Code Snippets plugin (the latter I use often when too lazy to make a child theme).

https://wordpress.org/plugins/code-snippets/

TheAnarchyState commented 10 years ago

Thanks for the info. I've just tried this in Code Snippets, adding the below code, but it's not working for http://www.theanarchystate.uk/test-5/. On the audio component, I have tried both 'On' and 'Off' for "Start Audio When in View". Am I doing something wrong?

add_filter('aesop_audio_component_waypoint-1187-1','aesop_audio_component_waypoint'); function aesop_audio_component_waypoint() { return '50%'; }

bearded-avenger commented 10 years ago

Do you have the most up to date version of the beta? This was pushed about 15 mins ago. Just tested and seems to work.

TheAnarchyState commented 10 years ago

Just downloaded the latest version and it's working perfectly. Many thanks once again!

TheAnarchyState commented 10 years ago

As well as targeting individual audio clips to set the start, can your original code still be used to set it across the site as well? It didn't seem to do anything unless I included the postid. Ideally, I would like to set everything at 50%, but then set other percentages for some specific clips that should start earlier or later. Is that possible?

bearded-avenger commented 10 years ago

ok so yeah i had to re-write this filter, so you'll need to in turn re-write yours. it's a lot more robust and more efficient now so I appreciate you thoroughly playing with this.

add_filter('aesop_audio_component_waypoint','aesop_audio_component_waypoint', 10, 2);
function aesop_audio_component_waypoint($point, $unique) {

    if('1798-1' == $unique) {
        $point = '20%';
    } else {
            $point = '50%';
    }

    return $point;
}

in the example above, if the instance is postid-firstinstance then return 20% waypoint, otherwise, return 50%.

TheAnarchyState commented 10 years ago

This isn't quite working for me. The first audio clip (just under the chapter at the top) works using either the postid or generic point setting, but the second clip (after a few other components) starts the audio earlier than it should when, again using either postid or general. E.g. If set to 10% it starts half-way up, 50% starts near the bottom of the screen, and 80% starts before it is on the screen.

bearded-avenger commented 10 years ago

I tested this locally and works perfectly. Are you sure you have the correct ID? In my example above, on post 1798, the first instance, the player starts 20% from the top of the screen, otherwise, it start 50% from the top of the screen.

P.S - Do you have lazy loader active? If so, deactivate and see if that fixes the issue. I've ran into some major issues using lazy loader with waypoints.

TheAnarchyState commented 10 years ago

Yes, Lazy Loader was the problem. As soon as I deactivated, the audio worked fine. Is this something that can be fixed in LL?

If I want to have more than one clip set to start at a different point than the majority, would I just repeat the above code, or would it be best to include an additional 'if' statement in the same code?

bearded-avenger commented 10 years ago

I think the issue lies within the waypoint thinking the image isn't there because technically, it's not. What I need to do is fake a placeholder with the images height so waypoint thinks the image is there. It will be a bit before I can make it to this, probably in the next two weeks.

To add another, just do an 'elseif';

add_filter('aesop_audio_component_waypoint','aesop_audio_component_waypoint', 10, 2);
function aesop_audio_component_waypoint($point, $unique) {

    if('1798-1' == $unique) {
        $point = '20%';
    } elseif ('1798-2' == $unique) {
         $point = '23%';
    } else {
            $point = '50%';
    }

    return $point;
}
bearded-avenger commented 10 years ago

going to go ahead and close this out as it seems to be working well. if you have any other questions just let us know