So I decided to redo the frontend. There's a lot of different code, but a lot of reused code as well. I took more advantage of Polymer and some more Dart features as well that I didn't know about before this. For an example, getting the playlist is much simpler for the Dart code, but slightly more complex for the html stuff. I tried to make it as similar to our old stuff as possible, while adding in some new/different stuff that I wanted to add before as well.
New/Different stuff
The artist/album/song views now stay on top of the library at all times. They also switch when you change tabs without clicking one of them.
You can click an artist in the playlist and it will take you to it's albums page. You can also do this for the current song's artist/album, but I had that in one of the last commits for the older version.
The current playing song is no longer part of the list of songs, so it stays at the top instead of scrolling.
There's a tooltip over the current song's title/artist/album. I thought this would be helpful if there was a long name. We could easily add this to the rest of the playlist if we want to, which brings the question, should we?
Some issues
The play/pause button needs to be pressed twice the first time. I'm not sure why, but it does. I think this was a problem before as well.
I had to copy the image folder twice, because the paths were for some reason different for the Dart version and the compiled version. We had this problem before, but we were able to place the images in a location that worked for both.
Technical stuffs - the fun stuff
Hopefully I can explain this well...
Folder hierarchy
So our file hierarchy now looks like this (If this doesn't make sense, you can look at it on github):
├──pubspec.lock - Info about our dependencies.
├──pubspec.yaml - Includes our info about our application.
├──build.dart - Gives us info about Polymer errors and stuffs for the Dart editor.
├──build - Our files build to this folder.
├──web - Our files actually build to this folder.
├──web - Where our important files are.
├──index.html - Our very simple index page.
├──style.css - Our once again, very simple css file.
├──img - Image files used in our html
├──classes - Non-Polymer dart files go here.
├──components - Polymer files
├──css - Polymer css files
├──dart - Polymer dart files
├──html - Polymer html files
├──img - Image files used in our html
The files!
I'll try to explain all the files as best as I can, but no promises.
web/
This is where the not really needed for Turbo Wookie files, but needed to run an application files are.
index.html
This file is very simple. It's just a basic html file that imports our main polymer element, initializes polymer and displays everything.
style.css
This basically just gives style to the body.
main.dart
This has been migrated into the index file since I wrote this.
All this does is initialize polymer, and could probably be replaced by a simple script in the index. Maybe later?
classes/
This is where all non-polymer dart files are.
lastfm.dart
This just gathers info from lastfm. I decided to give it it's own file so it'd be easier to change it to a different service if we wanted to.
song.dart
This is the same as the old song.dart. It
Search still doesn't work of course.
The location slider doesn't work correctly still. just holds info about a song.
stream-observer.dart
Search still doesn't work of course.
The location slider doesn't work correctly still.
This is what listens to the server for updates about the playlist/library/stream. It has a list of listeners that implement it's abstract methods that are called when something is updated.
components/
This is where all the Polymer stuff is. It's separated in folders: css, dart, and html, but I'm going to talk about them as one component. I'll mostly talk about the Dart stuff, cause that's the most interesting.
All components are named tw-name in html and just name in Dart. This is because Polymer requires a - in an element.
library
This file holds our library stuff. It's the same as library-list in the old version, except it no longer includes the views buttons.
player
This is the new media-bar. It's pretty much the exact same thing.
playlist
This is the new play-list. It's looks like it's pretty much the same, but it's a little simpler.
The html part takes over a bit of what the dart code did. It takes advantage of html templates, and Polymer's @observable annotation. The html observes a list and automagically adds the songs to the playlist.
The current playing song is no longer part of the list of songs, so it stays at the top instead of scrolling.
turbo-wookie
This is the main component of our application. It just puts everything together and doesn't do much else. You can actually create multiple <tw-turbo-wookie> tags, and it will be on the page twice. The player is always at the bottom of the screen and taking up the whole thing, but it's pretty cool that you can do that.
views
This is the buttons for the artists/albums/songs tabs. It's it's own component so it will stay over the library when you scroll. It also now updates when you navigate to a different view outside of clicking a views button.
Further things to do (related to the new frontend)
Comments. I'll start this now...
Migrate artists/albums to the template style. I tried doing this for artists, but I couldn't get it to work for some reason.
I think it would be cool if we could put a Turbo Wookie instance anywhere on a page, so fixing the player only being at the bottom would be needed.
Figure out how to have images only included once, preferably without any dirty hacks.
Make the mute/unmute button respond to the first press. I think I know what's going on here, but I'm not 100% sure.
Think about renaming the classes folder.
Make sure it works on other people's computers. Ignoring Rick's of course...
Probably something else
That's it
I think I went over this pretty well. If you are still confused, post a comment and I'll think about answering. I'm open to renaming/reorganizing. I'm especially still iffy the classes folder name if there's a better one. Other than that I think everything is good.
sleepdeprecation
commented
10 years ago
New Frontend
So I decided to redo the frontend. There's a lot of different code, but a lot of reused code as well. I took more advantage of Polymer and some more Dart features as well that I didn't know about before this. For an example, getting the playlist is much simpler for the Dart code, but slightly more complex for the html stuff. I tried to make it as similar to our old stuff as possible, while adding in some new/different stuff that I wanted to add before as well.
New/Different stuff
Some issues
The play/pause button needs to be pressed twice the first time. I'm not sure why, but it does. I think this was a problem before as well.Technical stuffs - the fun stuff
Hopefully I can explain this well...
Folder hierarchy
So our file hierarchy now looks like this (If this doesn't make sense, you can look at it on github):
The files!
I'll try to explain all the files as best as I can, but no promises.
web/
This is where the not really needed for Turbo Wookie files, but needed to run an application files are.
index.html
This file is very simple. It's just a basic html file that imports our main polymer element, initializes polymer and displays everything.
style.css
This basically just gives style to the body.
main.dartThis has been migrated into the index file since I wrote this.
All this does is initialize polymer, and could probably be replaced by a simple script in the index. Maybe later?classes/
This is where all non-polymer dart files are.
lastfm.dart
This just gathers info from lastfm. I decided to give it it's own file so it'd be easier to change it to a different service if we wanted to.
song.dart
This is the same as the old song.dart. It
stream-observer.dart
components/
This is where all the Polymer stuff is. It's separated in folders: css, dart, and html, but I'm going to talk about them as one component. I'll mostly talk about the Dart stuff, cause that's the most interesting.
All components are named
tw-namein html and justnamein Dart. This is because Polymer requires a-in an element.library
This file holds our library stuff. It's the same as
library-listin the old version, except it no longer includes the views buttons.player
This is the new
media-bar. It's pretty much the exact same thing.playlist
This is the new
play-list. It's looks like it's pretty much the same, but it's a little simpler.The html part takes over a bit of what the dart code did. It takes advantage of html templates, and Polymer's
@observableannotation. The html observes a list and automagically adds the songs to the playlist.The current playing song is no longer part of the list of songs, so it stays at the top instead of scrolling.
turbo-wookie
This is the main component of our application. It just puts everything together and doesn't do much else. You can actually create multiple
<tw-turbo-wookie>tags, and it will be on the page twice. The player is always at the bottom of the screen and taking up the whole thing, but it's pretty cool that you can do that.views
This is the buttons for the artists/albums/songs tabs. It's it's own component so it will stay over the library when you scroll. It also now updates when you navigate to a different view outside of clicking a views button.
Further things to do (related to the new frontend)
Comments. I'll start this now...Make the mute/unmute button respond to the first press. I think I know what's going on here, but I'm not 100% sure.classesfolder.That's it
I think I went over this pretty well. If you are still confused, post a comment and I'll think about answering. I'm open to renaming/reorganizing. I'm especially still iffy the
classesfolder name if there's a better one. Other than that I think everything is good.