Giter Site home page Giter Site logo

again-src's Introduction

jiku

Coordinated issues for jiku apps, site, etc.

again-src's People

Contributors

jiku avatar

Stargazers

avatar

Watchers

avatar avatar

again-src's Issues

Resizing of PixiJS sprites

As part of #19.

At the moment, they won't resize because the event.target is window? Not sure... Maybe PixiContainer has some way of calling a function on allChildren?

Fix PixiJS textures not rendering

[.WebGLRenderingContext-0x7ff0f37eb9b0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering

PIXI disappearing

C/D: Chrome 46 on OSX 10.10.5 on a Mac Mini 2012 (WebGL supported).
S/D: Safari ? on OSX 10.10.5 on a Mac Mini 2012 (WebGL supported).
FF/D: Firefox 41.0.2 on OSX 10.11 on a Macbook Pro 2009 (WebGL supported).
C/M: Chrome 46 on iOS 9.1 on an iPad Air.
S/M: Safari on iOS 9.1 on an iPhone 6S+ (Xcode simulator).

In Chrome on iPad (and maybe other configs) after converting to kadira:flow-router.

fade-in, etc of activate(Extra)

COULD also be that it works, but PIXI background ([Julia, Piano, Leaves], maybe [Cosmic]) isn't rendering on mobile anymore for some reason.

Pane's tweenTo fadeIn (DECONFIRMED)

onActivate: (event) =>
  # ...
  @tweenTo @stage,
    type: 'fadeIn'
    time: 5
  # ...

tweenTo: (target, data) ->
  if data.type == 'fadeIn'
    target.alpha = 0
    target.visible = true
    properties = alpha: 1
    easingType = TWEEN.Easing.Quadratic.Out
    cb = @enableInteractivity
  new TWEEN.Tween target
    .to properties, data.time * 1000
    .easing easingType
    .onComplete cb
    .start()

Disabling makes it not work in C/D.

@stage.visible = false on init

Tried making it visible initially, while disabling tween (that would make it visible). This solved the issue again for C/D, but nowhere else.

PIXI background visible, but displaced (DECONFIRMED)

Image

Size (CONFIRMED)

Seems to be the issue... I.e. resizing from 2400x4800 to 2048x4096, it appeared in all target browsers, not just C/D and S/D. Funnily, it still worked in those. Has to do with PIXI and WebGL preferring textures that are max 4096x4096. See here and here. Experiment: Try resizing to 2049x4097.

For more (on how stuff was debugged, etc), see video project diary, 010.

Missing content on refresh, inter-site history

When refreshing, going to /sectionX, going back from an external link, ..., logo's, panes, background, ... are missing.

Problems

With (all of?) the above, you still have to click 'Again' logo to go to /sectionX.
PIXI doesn't render at all.
THREE renders, but interactivity seems missing. Doesn't react to mouse, etc.

Potential causes

PIXI doesn't have time to init. I.e. uses a CB to add onActivate event listener, etc.

has disable-scroll until 'Again' logo is clicked. router.coffee seems fine? I.e. goes to init, emits activate. Neither container or pane onActive work, so might not be a timing issue... If it is, add event listeners quicker or stop using listeners for activation? `Meteor.setTimeout init, 1000` fixes interactivity, etc. Missing text, panes, PIXI, etc.

Vertical sectioning

Branch

I.e. panY to position X. Sort of like 'Sections' in AS3, so can work from that. Landing positions and relative movement of everything are crucial. Also triggering animations, etc, at points. Set up listener when you know it's going past a point, then remove that listener when it's reached that point. Don't have a continuous listener...

http://stackoverflow.com/questions/30282204/pixi-js-how-is-the-scrolling-done-on-the-website-flashvhtml-com

Make it native?

See scrollsound (which uses), skrollr, fullPage, scrollIt, etc.

https://ihatetomatoes.net/skrollr-vs-scrollmagic/

If there's a way to get the total height of the window, i.e. not just what's visible but overflow, etc, maybe this could be emitted to PixiJS to recalculate positioning of containers/sprites... or if they should be created/destroyed, etc.

Possible native + PixiJS container solution 1

Have PixiJS cover entire viewport, but not respond to any mouse or touch events...
Instead make a (custom) scrollbar/position listener, that gets scrollbar(/position)... i.e. viewport in relation to content. Maybe just a percentage or ratio value calculated once near the emitter, instead of every time in the listener.
Maybe skrollr or something could then be used for the actual scrolling and placement of content.
So have that PixiJS container transition in/out and freeze/hold in the background while the position/scrollbar is within a given region in terms of Y position.

Tween to changing value (see stuff about ScrollMagic)

http://greensock.com/forums/topic/11761-can-i-tie-a-tween-to-a-changing-y-position/

Intra-site history not scrolling

Intercept history?

https://www.google.no/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=javascript%20intercept%20history%20back

http://stackoverflow.com/questions/20325423/use-of-history-back-button-dettection

$(window).on "navigate", (event, data) ->
  direction = data.state.direction
  if direction is 'back'
    # do something
    localStorage.back = 1

in body.coffee with other scroll stuff doesn't seem to work. Maybe only on online?
Working on this on https://github.com/jiku/Again/tree/issue-49

PixiJS scrolling doesn't match percentage

As part of #19.

Seems caused by controller = new ScrollMagic.Controller(); having a globalSceneOptions argument, i.e. { globalSceneOptions: { duration: x }]. Where x = "100%" || 100

Make audio (SoundCloud) player

Basic interface, track info, etc.

  • Integrate with
    • Site
    • Visuals
    • SoundCloud, other services (i.e. likes, comments, etc)
  • Style

react-soundplayer

  • Integrate with Meteor through NPM (webpack:webpack)

    Almost deployable... Just have to fix routing, before refactoring.

    Avoid basscss conflicts

    • Use Meteor kit packages.

      Works for the most part. A few conflicts with footer/social.

    Make router work as before, but with React components in /modules.

    • FlowRouter/BlazeLayout in lib/router.coffee

      • Im-/export React component... I.e. make available to Blaze template through reactComponent with

        • require and helpers in client/sections.coffee
        • require in lib/router.coffee and helpers in client/sections.coffee
          • Can't seem to require (ES5) because of?

            • CoffeeScript?

              CS compiler wouldn't load on starting Meteor...

              => Started proxy.
Killed: 9g plugin `compileCoffeescript` ...  \
        
- [ ] Not exported as an ES5 module or something? Maybe I can export/-pose it in

  - `entry/...` somewhere.
  - `entry/client/webpack.conf.js`'s (ES5) `module.export`
    • FlowRouter/BlazeLayout in entry/client/router.jsx
      • Im-/export React component... I.e. make available to Blaze template through reactComponent with
      • import in entry/client/router.jsx.
        • The only
          • This works.
      • Can im-/export to reactComponent
    • FlowRouter/BlazeLayout in entry/client/router.jsx
      • Not sure why I would...

  • Make plug-in for using WebAudio with or instead of SoundCloud.

  • Integrate that plug-in with Wavesurfer, SoundCloud, etc API's for (timed) comments, likes, etc.

Scroll easing

As part of #19.

Seems to work fine. Tested with

iOS

9.1

Chrome 46 (iScroll because of UIWebView)
Safari

OS X

10.10.5

Chrome 46
Safari 9.0.1
Firefox 41.0.2

Can't hear sound in Chrome 46 on iOS 9

As part of #22.

Seems it's only an issue with Chrome... Safari works (iOS 9.x, late Oct).

Not sure how to fix this, but...

Reference

http://matt-harrison.com/perfect-web-audio-on-ios-devices-with-the-web-audio-api/
https://github.com/maxogden/webaudio-playlist/blob/master/index.js

WHAT / WHERE

Stream seems to work (i.e. shows notifications, shows in control center, etc), but there's no sound. Most likely CORS? #69. Outputs to zeroes.

OUTLINE FOR STACKOVERFLOW

No sound from WebAudio on Chrome iOS (works in Safari iOS, both on OSX)

I can't hear audio on a site I'm making in Chrome (46.0.2490.73) on iOS (9.0.2), both locally and deployed. What's weird is that if I drag up the iOS control center, Chrome is shown as playing the correct URL (with the correct credentials), with a working progress bar that shows the correct time and duration. I can press play/pause, which seems to work correctly too (i.e. pause hides the URL and progress bar).

I'm sure it's not my devices (iPad Air and iPhone 4S). The volume is up and the mute button isn't engaged. I can switch over to Safari iOS and hear the audio, both locally and deployed. (It also works on the desktop.) I can also go to some other sites and have audio work in Chrome.

Pertinent parts of my code,

@audio = document.createElement('audio')
@audio.crossOrigin = 'anonymous'
constructor = window.AudioContext or window.webkitAudioContext
@audioContext = new constructor()
@gainNode = @audioContext.createGain()
@gainNode.connect @audioContext.destination
@source = @audioContext.createMediaElementSource @audio
@source.connect @gainNode
@gainNode.gain.value = 0.8

I also connect an analyzer, etc. I have tried disabling parts, adding browser-policy, etc.

WHY

CORS?

Maybe related to #69? Since it SEEMS to play, but is quiet. I.e. maybe outputs zeroes? Doesn't seem like it, after adding browser-policy, etc.

http://stackoverflow.com/questions/29708513/web-audio-api-no-sound-playing
http://stackoverflow.com/questions/29705874/web-audio-api-not-working-in-chrome-localy?lq=1

UIWebView

Need to debug Chrome iOS 46 (UIWebView) on iOS 9, which is very problematic. Xcode 6 for iOS 7 simulator. Remote debug Safari which used UIWebView then.

See #57, #65, #71 for more on UIWebView.

iOS 9 touchstart for -end to unlock sound (seems unrelated. Fixed in dot release maybe?)

iOS 9 issues (Possibly fixed in WK)
Use touchend to unlock... See jiku: CS package.
http://www.holovaty.com/writing/ios9-web-audio/
phaserjs/phaser#2095
http://qiita.com/uupaa/items/e5856e3cb2a9fc8c5507

UNLIKELY

SO demo
Chromium bug filing (Android and createMediaElement)

Visualizer demo: AnalyserNode works on mobile if source of AudioContext is createBufferSource(). Not viable because of streaming!

Analytics?

Google and/or other analytics. Not just the usual, but load times, tracks, etc.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.