Mosaicon is an AngularJS app integrated with Google Firebase, built as UI prototype of Mosaicon social network. It is a SoNet2017 project at "Politecnico di Torino".
Further info and details about the project at https://sonet-2017.github.io/MOSAICON/.
The user interface is designed specifically for iPhone 6. With Google Chrome and its Developer Tools, you can set the actual interface model. The demo view is a past event page with a innovative mediaplayer.
In the middle of the view you get the info of the event.
Video and audio files are different sources, but synced together. Videos underneath the main player are different point of view of the same event, contained in a modal slideshow. When you play them, the players jump to a specific synced time of the tracks (audio and video). Three players are synced together at the same time.
Above the audio player there is a gallery of pictures of the event that scrolls horizontally. You can upload your own picture (thanks to Firebase server) and tell your experience or view other users' pictures in a modal that scrolls vertically. The menu is a typical social network app menu.
In the top bar, videocamera and chat icons, are disabled. The bottom bar got 5 icons to navigate to Finder, Timeline, On Air, Passport and Floor that stand for Search, Calendar, Home, Profile and Map.
-
Register an account, Login and Logout
-
Edit your profile information
-
Check for events near you (GMaps)
-
Enjoy a HQ video/audio recap of a past techno party from synced multiple views of the party
-
Take a look at other people's pictures about that night, like/unlike it
-
Upload your own content
-
Check for events on a specific date
-
Filter the site content in order to find other users or events
-
Google Firebase - AngularFire
-
Google Maps - ng-map
-
Videogular: http://www.videogular.com/
-
Twitter Bootstrap
-
moment.js
-
CSS/LESS
-
When searching for an event by date, the calendar template (found online) doesn't permit to click on past dates. For simplicity purposes, all the events are scheduled on July 31th and just one contains the whole media content uploaded by users ("NotteTechno III", eventId = 0).
-
In the passport and external passport view is possibile to see where the user is located, and pictures uploaded by that user; actually the content is relative to just one event ("NotteTechno III", eventId = 0).