search

alonslotky / universal_tutors

0 stars 0 forks source link

Classroom bug in chrome #36

Open nickcrosthwaite opened 11 years ago

nickcrosthwaite commented 11 years ago

We need to get this fixed before (as soon as) we start recruiting tutors as they will want to play with the classroom once they signup and Chrome is obvisouyl the preominant browser used these days.

nickcrosthwaite commented 11 years ago

@alonslotky any luck with this? It's a pretty high on our list of bugs right now? Would it help if I put you in touch directly with the guy who built the classroom software?

alonslotky commented 11 years ago

@nickcrosthwaite , The commit mentioned above solved it on my chrome. Can you please tell me how it looks on your chrome and other browsers? Another solution was to open the flash classroom in 'full screen', meaning without wizoku logo. The idea the guy suggested regarding rounding the window size didn't work. It's a really shitty bug (not ours, adobe's), and everything I tried was kind of voodoo. Please tell me if the current attempt is not good enough and I'll do my best to find something better as soon as possible.

nickcrosthwaite commented 11 years ago

@alonslotky see below the error I'm getting in Chrome. I am just unable to click on the flash popup at all to either accept or reject it. This error only started in the past couple of months, it was working perfectly previously. So it is unlikely that the issue is an adobe one. Sid is now looking to this issue too as it is the main issue stopping us from starting recruiting now. Also I would like you two to communicate with the Stephan the guy who built the product about it asap (he is on UK time) so that we can get a solution today. So if you and @sid99 Sid can put an email together in the next 30 mins I can shoot it off before I go into a meeting

screen shot 2013-07-18 at 09 48 41

nickcrosthwaite commented 11 years ago

@sid99 @alonslotky please insert the code in this post http://stackoverflow.com/questions/12048784/hide-adobe-flash-player-setting-dialog-using-flex so that the flash settings are remembered and the user only gets this popup once

alonslotky commented 11 years ago

@nickcrosthwaite Please forward the next message to Stefan or whoever you are in touch with in from muchosmedia:

(whatever intro)

We are still having these problems with embeding the scribblar classroom app in Chrome, where the flash settings popup is unresponsive. In some zoom settings and different screen resolutions the problems is resolved, so it seems that your idea that this is closely related to unrounded pixel values or sizing in general is very probable.

However, after messing for some time with the elements' styling (height & width) using javascript and css we found that we are not making much progress on solving this. We are also somewhat beginners in javascript which is making it a bit harder for us. It would be great if you can give more specific advice on how to fix this? Which of the html elements dimensions should we modify (the object, the container, body, all of them)? In which js events? Before or after embeding the object?

I am attaching below the rendered html the user is receiving and the javascript used to embed the app. Again, any insight would be helpful and appreciated. Thank you.

<body class="app classroom">
<div class="container">
<div id="alternate-container" class="main scribblar-container">
<object id="scribblar" width="100%" height="100%" type="application/x-shockwave-flash" name="scribblar"             data="http://media.muchosmedia.com/scribblar/v2/main.swf">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="userid=7D681330-FDFF-FF44-        1CBD24F4DC834D8F&roomid=4uzwcv6nt&preferredLocales=en_US&username=alon slotky">
</object>
</div>
</div>

and the script:

<script type="text/javascript">
$(window).ready(function(){
    var targetID = "scribblar";

    var flashvars = {
        'userid': "{{user.profile.scribblar_id}}",
        'roomid': "{{user.profile.get_test_class_id}}",
        'preferredLocales': "{{profile.class_language}}",
        'username': "{{user.get_full_name}}"
    };

    var params = {
        'allowscriptaccess': "always"
    };

    var attributes = {
        'id': "scribblar",
        'name': "scribblar"
    };

    swfobject.embedSWF(
        "http://media.muchosmedia.com/scribblar/v2/main.swf", 
        "alternate", 
        "100%", 
        "100%", 
        "10", 
        "http://media.muchosmedia.com/swfobject/expressInstall.swf", 
        flashvars, 
        params, 
        attributes);

    if(!swfobject.hasFlashPlayerVersion("10")) {
        alert('You need a computer with flash-enabled to test a class');
        window.location.href = '{% url edit_tutor_profile %}';          
    }

    setInterval(function(){
        $.ajax({
            type: 'get',
            url: '{% url check_tutor_class_status %}',
            success: function(response) {
                if (response == 'close') {
                    window.location.href = '{% url edit_tutor_profile %}';
                }
            }
        });             
    }, 60 * 1000);

    $('#id_class_language').change(function(){
        var language = $(this).val();
        thisMovie('scribblar').setLocale(language);
        $.get('{% url set_class_language %}'+ language +'/');
    });
});
</script>
alonslotky commented 11 years ago

@nickcrosthwaite, @sid99 I will also keep trying to understand this. Can't be that complicated.

nickcrosthwaite commented 11 years ago

@sid99 chrome message

screen shot 2013-07-19 at 11 01 17

alonslotky commented 11 years ago

@nickcrosthwaite @sid99 shouldn't the alert popup only for chrome users???

alonslotky commented 11 years ago

response from stephan:

I've not done it myself either but you should try the following in order to eliminate other causes:
- embed the SWF at a fixed size instead of percentage values.
- try removing the outer container <div class="container">

Your scripts look fine but what I propose is that you check the size of the wrapper SWF <div id="alternate-                     container" class="main scribblar-container"> and the <object> itself when the problem occurs. What is the     rendered size in pixels? You can check this via Firebug or the dev console.

I would propose that you set up a resize listener on the window object and whenever it fires you retrieve, round     and then set the size of the wrapper div and maybe the object tag as well to a full pixel value that's nearest to the     detected size (for example round a size of 833.94 x 489.4 to 844 x 489
sid99 commented 11 years ago

This is a temporary quick fix for now using Javascript alert.

On Jul 23, 2013, at 6:17 AM, alonslotky notifications@github.com wrote:

@nickcrosthwaite @sid99 shouldn't the alert popup only for chrome users???

— Reply to this email directly or view it on GitHub.

nickcrosthwaite commented 11 years ago

@sid99 I agree this is a temp fix so not the end of the world, but I thought it was fairly easy to only show that message if the user is using Chrome?