recon_frontend's People
recon_frontend's Issues
Playback gets confused after first chapter selection
After a transcript is finished, select a chapter. Playback is fine until you select another chapter, then it creates new chapters/paragraphs/speaker-switches for every word.
Add superscripts to frequent words.
Implement left nav bar to design spec.
Implement to Chen's design spec.
The nav bar is fixed to the upper left at all times and is fixed in size.
My plan was to lay it out horizontally, then use CSS rotate (I already added a .rot90 class to index.css) to rotate the whole navBar.
The div heirarchy is #navigation > #navBar
I assigned the Navigation.View a template and started to fill it out.
When you click the ReConstitution title, it takes you back to the landing page where you can select which debate to watch (same page you see when you land at the site).
The clock is always the time of the current sentence. So in the live debates, it is the real clock time. In the playback of the debates, it is whenever the current sentence was originally spoken (aka between 9:00PM and 10:30PM).
When you scroll back up the transcript, the clock switches to the text GO LIVE, with some color. If you press this text, the transcript will jump back to the current sentence (aka down to the bottom edge).
The yellow progress bar always reflects the time of the current sentence, normalized over the whole hour and a half (which is the height of the white box). When you scroll back up the transcript, some graphic (a line or box) will slide up along this yellow line to indicate where you currently are in the transcript.
Move transcript dom manipulation and playback control out of navigation module
The lines around here:
recon_frontend/app/modules/navigation.js
Line 70 in c8be141
Client-side event naming + payload standards?
"message:word" or "words:add" or "words:new" or ??? This is going to get really confusing if we don't settle on something consistent.
Also, do we want to avoid passing state in events (such as "live" in
Line 124 in c8be141
Frequent word count superscript : Is double div causing slowdown?
Granted, we'll be adding lots more crap to the transcript and we'll definitely look into culling the offscreen paragraphs—part of the slowdown might be coming from the double-div for the superscripts.
Is there a way to make those superscripts a single span? And have them either added as a child of the word span or actually inserted into the word span flow?
implement method to get most frequent words
We are showing 20 most frequent words for both candidates in comparison mode.
Forward slash not handled properly in message
"9/11" gets inserted as "9"
Do we want to categorize words as frequent based on percent of total word count?
Instead of raw times a word occurs? By the end of the debate, most words will have been spoken say 10 times, though many will not until maybe 3/4 of the way through. Should it be a threshold on occurrences/total_word_count ?
integrate Typekit into CSS
create parallax system for navigating comparisons
do we need .gitconfig inside the repository
is this file necessary to track?
Create Meta-Data-Overlay view classes and associated DOM objects
Autoscroll broke when span-per-word was removed in transcript.
Transcript no longer adds a span per word. It just inserts the words into the sentence span.
And then MarkupManager wraps selected words with spans (with their special classes). For now, these are frequent words and word count overlay words.
Autoscrolling is disabled for now in Ref.
Add frequent word treatments to transcript.
comparison module system
Create Model to store client-side word data.
First stab at setting up a Model to store all of our word data (counts, topics, etc.).
getCurSentencePosY() and getRecentWordPos() depend on race condition
These functions look for the #curParagraph and #curSentence elements, which sometimes do not exist (namely between paragraph and sentence start/end messages). I'm getting exceptions when working on the numbers overlay since it calls these functions at the end of the sentence.
We either need to cache these values somehow, or explicitly pass this position information in the relevant events (the latter will make sure the context of "current" doesn't change between the event being fired and the DOM being manipulated).
sentencelength event not firing
maybe change binding not firing? haven't looked into it yet...
Rendering slow when many elements with "-webkit-transform:" property are added
The main culprit right now is .wordCountTextHolder and the -webkit-transform: translateZ(0px). Turning this one CSS property off with Chrome's "inspect element" tool speeds up rendering/scrolling immensely. Can we just get rid of it? Good news is that CSS transitions seem to be working perfectly smooth.
vendor folder naming
- public
- vendor
- assets
apostrophes are backwards??
Cull overlay/translateZ'ed elements
Elements with -webkit-transform: translateZ() properties slow down rendering when there are many in the DOM. Right now, the problem elements are .bigWord and .wordCountTextHolder . Both are absolutely positioned, so they can be culled by setting display: none without affecting the rest of the layout.
To do this efficiently, elements will need to cache their top and bottom positions so we don't have to call $().offset() (which is also relatively slow). Calculating this might not be trivial since these elements are moving with parallax...
Word View
Autoscroll gets stuck
Sometimes when you try to scroll up, autoscroll doesn't give up control.
keep track of longest sentence in speaker model
right now it's just tracking length, need to grab contents of the div on endsentence msg somehow I think
Make final list of common words
We can start with a list of common English words (http://en.wikipedia.org/wiki/Most_common_words_in_English) but maybe we want to add the names (Obama, Romney) and other debate-specific things (Governor, President, etc). Or maybe we want to keep all that in and display the word counts for almost everything.
Start filling out overlay and transcript functionality in MarkupManager
Implement Quotes Overlay
This is the said, saying, says, etc. overlay. markup:quote events should already be triggered in transcript. MarkupManager should listen for these and do the right thing.
Basically, the "say" word and the word before it gets extracted for the overlay expand and blown up. Along with big quotation marks. The sentence in the transcript (the entire sentence — we're not going to try to find quotes becuase they're too inconsistent) gets styled as the maroon color with an underline.
In Chen's sketches, she shows the sentence first with the background rect and then underlined, but for now let's just go straight to the underline.
For the overlay animation, i like the look of the words sliding up from nowhere (like the wordCount one) so let's try to figure out a way to make that work for this. Give me a holler when you sit down to work on the overlay expand for this and we can chat it through. Thanks!
Frequent word superscript #'s get messed up when u go to Comparison mode
Transcript MVC
Basic word feeding and paragraph organization
Sentence View
Would hiding out-of-viewport paragraphs help performance?
Right now after running the transcript for about 30 minutes Chrome takes 100% CPU when I scroll. The DOM is getting pretty complex as we begin to mark up each word. Can we just do some sort of viewport culling and keep things snappy?
implement Basic CSS Grid
Comparison scrolling / parallax architecture.
Figure out how to do comparison scrolling (with parallax!)
From Justin:
when you reach the bottom of the comparisons, the bottom of your 'viewport' starts to be chopped off. you can restore them by scrolling all the way back to the top
Set up events-based communication between modules
Using Backbone.Events, which is rolled into the app object by BBB.
To trigger:
app.trigger("eventdomain:action", data);
To receive:
app.on("eventdomain:action", handler, this);
These are separate events from DOM events (onClick, etc) and WebSocket message events (word, sentenceEnd, etc), though both of those event types could (and probably should) trigger app events.
Some messages are not being added to the collection
Punctuation is never added, other words are occasionally dropped. It seems to be the same words every time, but I could be wrong.
"Args" and "sid" undefined in speaker.js
"Uncaught ReferenceError: args is not defined" at
recon_frontend/app/modules/speaker.js
Line 35 in 0fcca3d
When rendering lags, words appear out of order
Should word insertion check to make sure the current message ID > the previous message ID?
design backbone architecture
Start designing data models and collections for Backbone architecture and thinking about how they will fit in with views and front end.
Extreme decrease in scroll performance when transcript is full.
Since we don't need every every word to be a span anymore (just frequent words and phrases and any other special marked up text), we can add a function that, on each endSentence in transcript, simplifies the sentence HTML into longer spans.
implement method to emit total # of unique words
front end needs way to get the # of unique words each candidate has used (vocabulary size, in common parlance)
Transcript doesn't receive scroll events
I think the layout changed and now the body is scrolling, not the transcript DIV.
Implement layout for each comparison module design
(This will be broken out into individ modules later)
create navigation buttons for moving through comparisons
Set transcript view to point to real transcript div
Avoid "this.$el.children().first()" in transcript.js
keep track metadate in speaker model
word count
sentence length
current stats scores
Background doesn't work on Safari
The page background is just white-- is "-webkit-linear-gradient" not supported by Safari?
need favicon.ico
either that or we should disable lookups to favicon.ico.
Implement Numbers Overlay.
Hey Sam,
Chen's most recent designs are in Dropbox/Recon2012/Design/DesignInProgress_modes_cb04.pdf
The numbers overlay design is the salmon colored "16 million".
I got number phase detection going. Transcript has logic in addWord to detect numbers, wait until a set number of words have come in after a number, and emit a markup:number event. MarkupManager listens for these, and uses the new transcript.addSpanToRecentWord() function to style the number phrase.
I already added in the husks for numbers overlay (Overlay.Views.NumbersView and numbers.html template). Look at how wordCount overlay was done and implement the numbers overlay. We're currently thinking that the big numbers overlay slides in from the right for the expand animation. Let's see how this works.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.