Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
A
Annotation-System
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
14
Issues
14
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
Annotation-Pushers
Annotation-System
Commits
9051caa9
Commit
9051caa9
authored
Mar 07, 2019
by
Matt Mascarenhas
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
cinera: Player page mobile style
parent
35b6b803
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
249 additions
and
11 deletions
+249
-11
cinera.c
cinera/cinera.c
+1
-1
cinera.css
cinera/cinera.css
+93
-1
cinera_player_post.js
cinera/cinera_player_post.js
+28
-8
cinera_player_pre.js
cinera/cinera_player_pre.js
+127
-1
No files found.
cinera/cinera.c
View file @
9051caa9
...
@@ -17,7 +17,7 @@ typedef struct
...
@@ -17,7 +17,7 @@ typedef struct
version
CINERA_APP_VERSION
=
{
version
CINERA_APP_VERSION
=
{
.
Major
=
0
,
.
Major
=
0
,
.
Minor
=
6
,
.
Minor
=
6
,
.
Patch
=
7
.
Patch
=
8
};
};
#include <stdarg.h> // NOTE(matt): varargs
#include <stdarg.h> // NOTE(matt): varargs
...
...
cinera/cinera.css
View file @
9051caa9
...
@@ -116,7 +116,7 @@
...
@@ -116,7 +116,7 @@
display
:
none
;
display
:
none
;
}
}
@media
(
max-width
:
512
px
),
(
max-height
:
512px
)
@media
(
max-width
:
720
px
),
(
max-height
:
512px
)
{
{
#cineraIndexControl
{
#cineraIndexControl
{
margin
:
4px
auto
;
margin
:
4px
auto
;
...
@@ -172,6 +172,7 @@
...
@@ -172,6 +172,7 @@
.cineraMenus
>
.menu
{
.cineraMenus
>
.menu
{
position
:
relative
;
position
:
relative
;
align-self
:
center
;
}
}
.cineraMenus
>
.menu.filter.responsible
,
.cineraMenus
>
.menu.filter.responsible
,
...
@@ -652,6 +653,97 @@
...
@@ -652,6 +653,97 @@
margin-right
:
8px
;
margin-right
:
8px
;
}
}
@media
(
max-width
:
720px
),
(
max-height
:
512px
)
{
.cineraMenus
.episode_name
,
.cineraMenus
>
.menu
>
.view
,
.cineraMenus
>
.menu
>
.views_container
.view
,
.cineraMenus
>
.help
,
.markers_container
>
.episodeMarker
div
:nth-child
(
2
),
.markers_container
>
.episodeMarker
div
:nth-child
(
3
),
.markers_container
>
.markers
.marker
:not
(
.current
)
{
display
:
none
;
}
.cineraMenus
{
justify-content
:
center
;
}
.cineraMenus
.menu
.quotes_container
,
.cineraMenus
.menu
.references_container
,
.cineraMenus
.menu
.filter_container
,
.cineraMenus
.menu
.link_container
,
.cineraMenus
.menu
.credits_container
{
position
:
fixed
;
left
:
0
;
margin
:
auto
;
max-height
:
80%
;
max-width
:
97%
;
}
.cineraPlayerContainer
{
display
:
flex
;
flex-direction
:
column
;
}
.cineraPlayerContainer
.markers_container
{
display
:
flex
;
flex-flow
:
row
;
overflow-y
:
auto
;
}
.cineraPlayerContainer
.markers_container
>
.episodeMarker
{
user-select
:
none
;
-moz-user-select
:
none
;
-webkit-user-select
:
none
;
}
.cineraPlayerContainer
.markers_container
>
.markers
.marker
.cineraContent
{
width
:
456px
;
}
@media
(
max-width
:
580px
)
{
.cineraPlayerContainer
.markers_container
>
.markers
.marker
.cineraContent
{
width
:
320px
;
}
}
@media
(
max-width
:
450px
)
{
.cineraPlayerContainer
.markers_container
>
.markers
.marker
.cineraContent
{
width
:
256px
;
}
}
@media
(
max-width
:
375px
)
{
.cineraPlayerContainer
.markers_container
>
.markers
.marker
.cineraContent
{
width
:
180px
;
}
}
.cineraPlayerContainer
.markers_container
>
.episodeMarker.first
,
.cineraPlayerContainer
.markers_container
>
.episodeMarker.prev
,
.cineraPlayerContainer
.markers_container
>
.markers
.marker
,
.cineraPlayerContainer
.markers_container
>
.episodeMarker.last
,
.cineraPlayerContainer
.markers_container
>
.episodeMarker.next
{
border
:
0
;
}
.cineraPlayerContainer
.markers_container
>
.episodeMarker.first
,
.cineraPlayerContainer
.markers_container
>
.episodeMarker.prev
{
border-right
:
3px
double
;
}
.cineraPlayerContainer
.markers_container
>
.episodeMarker.last
,
.cineraPlayerContainer
.markers_container
>
.episodeMarker.next
{
border-left
:
3px
double
;
}
}
/* CUSTOM PAGE STYLE */
/* CUSTOM PAGE STYLE */
/*
/*
...
...
cinera/cinera_player_post.js
View file @
9051caa9
var
originalTextContent
=
{
TitleQuotes
:
null
,
TitleReferences
:
null
,
TitleCredits
:
null
,
EpisodePrev
:
null
,
EpisodeNext
:
null
,
};
var
menuState
=
[];
var
menuState
=
[];
var
titleBar
=
document
.
querySelector
(
".cineraMenus"
);
var
titleBar
=
document
.
querySelector
(
".cineraMenus"
);
var
quotesMenu
=
titleBar
.
querySelector
(
".quotes_container"
);
var
quotesMenu
=
titleBar
.
querySelector
(
".quotes_container"
);
if
(
quotesMenu
)
if
(
quotesMenu
)
{
{
originalTextContent
.
TitleQuotes
=
quotesMenu
.
previousElementSibling
.
textContent
;
menuState
.
push
(
quotesMenu
);
menuState
.
push
(
quotesMenu
);
var
quoteItems
=
quotesMenu
.
querySelectorAll
(
".ref"
);
var
quoteItems
=
quotesMenu
.
querySelectorAll
(
".ref"
);
if
(
quoteItems
)
if
(
quoteItems
)
...
@@ -29,6 +38,7 @@ if(quotesMenu)
...
@@ -29,6 +38,7 @@ if(quotesMenu)
var
referencesMenu
=
titleBar
.
querySelector
(
".references_container"
);
var
referencesMenu
=
titleBar
.
querySelector
(
".references_container"
);
if
(
referencesMenu
)
if
(
referencesMenu
)
{
{
originalTextContent
.
TitleReferences
=
referencesMenu
.
previousElementSibling
.
textContent
;
menuState
.
push
(
referencesMenu
);
menuState
.
push
(
referencesMenu
);
var
referenceItems
=
referencesMenu
.
querySelectorAll
(
".ref"
);
var
referenceItems
=
referencesMenu
.
querySelectorAll
(
".ref"
);
if
(
referenceItems
)
if
(
referenceItems
)
...
@@ -111,10 +121,16 @@ if(filterMenu)
...
@@ -111,10 +121,16 @@ if(filterMenu)
}
}
var
views
=
{
var
views
=
{
REGULAR
:
1
,
REGULAR
:
0
,
THEATRE
:
2
,
THEATRE
:
1
,
SUPERTHEATRE
:
3
,
SUPERTHEATRE
:
2
,
};
var
devices
=
{
DESKTOP
:
0
,
MOBILE
:
1
,
};
};
var
cineraProps
=
{
var
cineraProps
=
{
C
:
null
,
C
:
null
,
V
:
views
.
REGULAR
,
V
:
views
.
REGULAR
,
...
@@ -125,7 +141,8 @@ var cineraProps = {
...
@@ -125,7 +141,8 @@ var cineraProps = {
mW
:
null
,
mW
:
null
,
H
:
null
,
H
:
null
,
mH
:
null
,
mH
:
null
,
P
:
null
P
:
null
,
D
:
devices
.
DESKTOP
,
};
};
var
viewsMenu
=
titleBar
.
querySelector
(
".views"
);
var
viewsMenu
=
titleBar
.
querySelector
(
".views"
);
...
@@ -183,6 +200,7 @@ if(linkMenu)
...
@@ -183,6 +200,7 @@ if(linkMenu)
var
creditsMenu
=
titleBar
.
querySelector
(
".credits_container"
);
var
creditsMenu
=
titleBar
.
querySelector
(
".credits_container"
);
if
(
creditsMenu
)
if
(
creditsMenu
)
{
{
originalTextContent
.
TitleCredits
=
creditsMenu
.
previousElementSibling
.
textContent
;
menuState
.
push
(
creditsMenu
);
menuState
.
push
(
creditsMenu
);
var
lastFocusedCreditItem
=
null
;
var
lastFocusedCreditItem
=
null
;
...
@@ -240,8 +258,14 @@ var focusedElement = null;
...
@@ -240,8 +258,14 @@ var focusedElement = null;
var
focusedIdentifier
=
null
;
var
focusedIdentifier
=
null
;
var
playerContainer
=
document
.
querySelector
(
".cineraPlayerContainer"
)
var
playerContainer
=
document
.
querySelector
(
".cineraPlayerContainer"
)
var
prevEpisode
=
playerContainer
.
querySelector
(
".episodeMarker.prev"
);
if
(
prevEpisode
)
{
originalTextContent
.
EpisodePrev
=
prevEpisode
.
firstChild
.
textContent
;
}
var
nextEpisode
=
playerContainer
.
querySelector
(
".episodeMarker.next"
);
if
(
nextEpisode
)
{
originalTextContent
.
EpisodeNext
=
nextEpisode
.
firstChild
.
textContent
;
}
var
testMarkers
=
playerContainer
.
querySelectorAll
(
".marker"
);
var
cinera
=
playerContainer
.
parentNode
;
var
cinera
=
playerContainer
.
parentNode
;
// NOTE(matt): All the originalTextContent values must be set by this point, because the player's construction may need them
var
player
=
new
Player
(
playerContainer
,
onRefChanged
);
var
player
=
new
Player
(
playerContainer
,
onRefChanged
);
var
cineraViewStorageItem
=
"cineraView"
;
var
cineraViewStorageItem
=
"cineraView"
;
...
@@ -274,10 +298,6 @@ for(var i = 0; i < sourceMenus.length; ++i)
...
@@ -274,10 +298,6 @@ for(var i = 0; i < sourceMenus.length; ++i)
})
})
};
};
var
prevEpisode
=
playerContainer
.
querySelector
(
".episodeMarker.prev"
);
var
nextEpisode
=
playerContainer
.
querySelector
(
".episodeMarker.next"
);
var
testMarkers
=
playerContainer
.
querySelectorAll
(
".marker"
);
var
colouredItems
=
playerContainer
.
querySelectorAll
(
".author, .member, .project"
);
var
colouredItems
=
playerContainer
.
querySelectorAll
(
".author, .member, .project"
);
for
(
i
=
0
;
i
<
colouredItems
.
length
;
++
i
)
for
(
i
=
0
;
i
<
colouredItems
.
length
;
++
i
)
{
{
...
...
cinera/cinera_player_pre.js
View file @
9051caa9
...
@@ -110,11 +110,129 @@ Player.prototype.jumpToPrevMarker = function() {
...
@@ -110,11 +110,129 @@ Player.prototype.jumpToPrevMarker = function() {
this
.
play
();
this
.
play
();
};
};
function
switchToMobileView
(
player
)
{
var
menuContainerOffset
=
getElementYOffsetFromPage
(
titleBar
)
+
parseInt
(
window
.
getComputedStyle
(
titleBar
).
height
);
if
(
quotesMenu
)
{
quotesMenu
.
previousElementSibling
.
textContent
=
'
\
u{1F5E9}'
;
quotesMenu
.
style
.
top
=
menuContainerOffset
+
"px"
;
}
if
(
referencesMenu
)
{
referencesMenu
.
previousElementSibling
.
textContent
=
'
\
u{1F4D6}'
;
referencesMenu
.
style
.
top
=
menuContainerOffset
+
"px"
;
}
if
(
filterMenu
)
{
filterMenu
.
style
.
top
=
menuContainerOffset
+
"px"
;
}
if
(
linkMenu
)
{
linkMenu
.
style
.
top
=
menuContainerOffset
+
"px"
;
}
if
(
creditsMenu
)
{
creditsMenu
.
previousElementSibling
.
textContent
=
'
\
u{1F46A}'
;
creditsMenu
.
style
.
top
=
menuContainerOffset
+
"px"
;
}
var
rightmost
=
{};
var
markersContainer
=
player
.
markersContainer
;
markersContainer
.
style
.
height
=
"auto"
;
var
episodeMarkerPrev
=
markersContainer
.
querySelector
(
".episodeMarker.prev"
);
var
episodeMarkerNext
=
markersContainer
.
querySelector
(
".episodeMarker.next"
);
var
episodeMarkerLast
=
markersContainer
.
querySelector
(
".episodeMarker.last"
);
if
(
episodeMarkerPrev
)
{
episodeMarkerPrev
.
firstChild
.
textContent
=
'
\
u{23EE}'
;
}
if
(
episodeMarkerNext
)
{
episodeMarkerNext
.
firstChild
.
textContent
=
'
\
u{23ED}'
;
rightmost
=
episodeMarkerNext
;
}
else
if
(
episodeMarkerLast
)
{
rightmost
=
episodeMarkerLast
;
}
var
markers
=
markersContainer
.
querySelector
(
".markers"
);
var
controlPrevAnnotation
=
document
.
createElement
(
"a"
);
controlPrevAnnotation
.
classList
.
add
(
"episodeMarker"
);
controlPrevAnnotation
.
classList
.
add
(
"prevAnnotation"
);
controlPrevAnnotation
.
addEventListener
(
"click"
,
function
(
ev
)
{
player
.
jumpToPrevMarker
();
});
var
controlPrevAnnotationContent
=
document
.
createElement
(
"div"
);
controlPrevAnnotationContent
.
appendChild
(
document
.
createTextNode
(
'
\
u{23F4}'
));
controlPrevAnnotation
.
appendChild
(
controlPrevAnnotationContent
);
markersContainer
.
insertBefore
(
controlPrevAnnotation
,
markers
);
var
controlNextAnnotation
=
document
.
createElement
(
"a"
);
controlNextAnnotation
.
classList
.
add
(
"episodeMarker"
);
controlNextAnnotation
.
classList
.
add
(
"nextAnnotation"
);
controlNextAnnotation
.
addEventListener
(
"click"
,
function
(
ev
)
{
player
.
jumpToNextMarker
();
});
var
controlNextAnnotationContent
=
document
.
createElement
(
"div"
);
controlNextAnnotationContent
.
appendChild
(
document
.
createTextNode
(
'
\
u{23F5}'
));
controlNextAnnotation
.
appendChild
(
controlNextAnnotationContent
);
if
(
rightmost
)
{
markersContainer
.
insertBefore
(
controlNextAnnotation
,
rightmost
);
}
else
{
markersContainer
.
appendChild
(
controlNextAnnotation
);
}
cineraProps
.
D
=
devices
.
MOBILE
;
}
function
switchToDesktopView
(
player
)
{
if
(
quotesMenu
)
{
quotesMenu
.
previousElementSibling
.
textContent
=
originalTextContent
.
TitleQuotes
;
quotesMenu
.
style
.
top
=
"100%"
;
}
if
(
referencesMenu
)
{
referencesMenu
.
previousElementSibling
.
textContent
=
originalTextContent
.
TitleReferences
;
referencesMenu
.
style
.
top
=
"100%"
;
}
if
(
filterMenu
)
{
filterMenu
.
style
.
top
=
"100%"
;
}
if
(
linkMenu
)
{
linkMenu
.
style
.
top
=
"100%"
;
}
if
(
creditsMenu
)
{
creditsMenu
.
previousElementSibling
.
textContent
=
originalTextContent
.
TitleCredits
;
creditsMenu
.
style
.
top
=
"100%"
;
}
var
markersContainer
=
player
.
markersContainer
;
var
episodeMarkerPrev
=
markersContainer
.
querySelector
(
".episodeMarker.prev"
);
if
(
episodeMarkerPrev
)
{
episodeMarkerPrev
.
firstChild
.
textContent
=
originalTextContent
.
EpisodePrev
;
}
var
episodeMarkerNext
=
markersContainer
.
querySelector
(
".episodeMarker.next"
);
if
(
episodeMarkerNext
)
{
episodeMarkerNext
.
firstChild
.
textContent
=
originalTextContent
.
EpisodeNext
;
}
var
prevAnnotation
=
markersContainer
.
querySelector
(
".episodeMarker.prevAnnotation"
);
markersContainer
.
removeChild
(
prevAnnotation
);
var
nextAnnotation
=
markersContainer
.
querySelector
(
".episodeMarker.nextAnnotation"
);
markersContainer
.
removeChild
(
nextAnnotation
);
cineraProps
.
D
=
devices
.
DESKTOP
;
}
// Call this after changing the size of the video container in order to update the youtube player.
// Call this after changing the size of the video container in order to update the youtube player.
Player
.
prototype
.
updateSize
=
function
()
{
Player
.
prototype
.
updateSize
=
function
()
{
var
width
=
this
.
videoContainer
.
offsetWidth
;
var
width
=
this
.
videoContainer
.
offsetWidth
;
var
height
=
width
/
16
*
9
;
var
height
=
width
/
16
*
9
;
this
.
markersContainer
.
style
.
height
=
height
+
"px"
;
if
(
window
.
innerHeight
>
512
&&
window
.
innerWidth
>
720
)
{
if
(
cineraProps
.
D
==
devices
.
MOBILE
)
{
switchToDesktopView
(
this
);
}
this
.
markersContainer
.
style
.
height
=
height
+
"px"
;
// NOTE(matt): This was the original line here
}
else
{
if
(
cineraProps
.
D
==
devices
.
DESKTOP
)
{
switchToMobileView
(
this
);
}
}
if
(
this
.
youtubePlayerReady
)
{
if
(
this
.
youtubePlayerReady
)
{
this
.
youtubePlayer
.
setSize
(
Math
.
floor
(
width
),
Math
.
floor
(
height
));
this
.
youtubePlayer
.
setSize
(
Math
.
floor
(
width
),
Math
.
floor
(
height
));
}
}
...
@@ -178,6 +296,14 @@ function getElementXOffsetFromPage(el) {
...
@@ -178,6 +296,14 @@ function getElementXOffsetFromPage(el) {
return
left
;
return
left
;
}
}
function
getElementYOffsetFromPage
(
el
)
{
var
top
=
0
;
do
{
top
+=
el
.
offsetTop
;
}
while
(
el
=
el
.
offsetParent
);
return
top
;
}
Player
.
prototype
.
onMarkerMouseMove
=
function
(
marker
,
ev
)
{
Player
.
prototype
.
onMarkerMouseMove
=
function
(
marker
,
ev
)
{
if
(
this
.
currentMarker
==
marker
)
{
if
(
this
.
currentMarker
==
marker
)
{
marker
.
hoverx
=
(
ev
.
pageX
-
getElementXOffsetFromPage
(
marker
.
el
))
/
marker
.
el
.
offsetWidth
;
marker
.
hoverx
=
(
ev
.
pageX
-
getElementXOffsetFromPage
(
marker
.
el
))
/
marker
.
el
.
offsetWidth
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment