Skip to content

FLUID-4558: Error handling #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
acheetham wants to merge 32 commits into
base: main
Choose a base branch
from
Open

FLUID-4558: Error handling #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
e44822e
FLUID-4558: Move toward error handling by starting with console logs,…
acheetham Oct 26, 2012
82e26f0
FLUID-4558: Fix error message for Amara files.
acheetham Oct 26, 2012
a116fcc
Merge branch 'master' into FLUID-4558
acheetham Oct 26, 2012
248e0c7
Merge branch 'master' into FLUID-4558
acheetham Oct 26, 2012
a3b156a
FLUID-4558: First pass at rudimentary error handling. Still needs work.
acheetham Oct 29, 2012
757175f
FLUID-4558: Use events and error messag display for video load errors.
acheetham Oct 30, 2012
9f57081
FLUID-4558: Ensure other captions load even if there's an error with …
acheetham Oct 30, 2012
f9abde7
FLUID-4558: Ensure disabled language menu item is not clickable.
acheetham Oct 30, 2012
bd0c56d
FLUID-4558: Tests for various loading errors. Could use a bit more re…
acheetham Oct 30, 2012
5bb9323
FLUID-4558: Refactor tests to reduce duplication.
acheetham Oct 30, 2012
52bab4a
FLUID-4558: Begin to improve visual styling of error handling.
acheetham Oct 30, 2012
a1ddd9a
FLUID-4558: First pass at ErrorPanel component, with tests. Not used …
acheetham Oct 31, 2012
7af8044
FLUID-4558: Display and style video load error; retry callback not ye…
acheetham Nov 1, 2012
caf6890
FLUID-4558: Update tests to include ErrorPanel where necessary.
acheetham Nov 1, 2012
6072189
FLUID-4558: Begin integrating video and transcript errors.
acheetham Nov 1, 2012
46a6d7f
FLUID-4558: Fixes so transcript handles switching between tracks prop…
acheetham Nov 1, 2012
4fa6d96
FLUID-4558: Cleaning up tests
acheetham Nov 2, 2012
b5c8440
FLUID-4558: Style transcript error message.
acheetham Nov 2, 2012
1bd9c37
FLUID-4558: First pass at caption load error messages.
acheetham Nov 2, 2012
daea8a1
FLUID-4558: Tests for caption load errors.
acheetham Nov 2, 2012
b215e33
FLUID-4558: Tests for dismiss callback
acheetham Nov 2, 2012
f8ecf37
FLUID-4558: Implement reload functionality in video error panel.
acheetham Nov 5, 2012
34f8eff
FLUID-4558: Focus and hover styling for video error retry button.
acheetham Nov 5, 2012
7d12c1b
FLUID-4558: Clean up error panel template loading.
acheetham Nov 5, 2012
127ed6e
FLUID-4558: Code clean-up
acheetham Nov 5, 2012
cfbfee5
Merge branch 'master' into FLUID-4558
acheetham Nov 5, 2012
eb6932d
FLUID-4558: Styling of errors with proper assets
acheetham Nov 6, 2012
c5912a6
FLUID-4558: Focus styling for errors
acheetham Nov 6, 2012
021c074
Merge branch 'master' into FLUID-4558
acheetham Nov 8, 2012
b0c8708
FLUID-4558: Clean up unused CSS.
acheetham Nov 8, 2012
084f5d3
Merge branch 'master' into FLUID-4558
acheetham Nov 12, 2012
e280976
FLUID-4558: Switch video error 'retry callback' to be event based.
acheetham Nov 13, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 177 additions & 2 deletions css/VideoPlayer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,119 @@
.fl-theme-uio-by .fl-videoPlayer-video-element:focus,
.fl-theme-uio-bw .fl-videoPlayer-video-element:focus { outline-color: #000000; }

/*
* Error message areas
*/
.fl-videoPlayer-videoError {
border: 2px solid #999999;
width: 32em;
height: 20em;
background: url("../images/error/exclamation.png") no-repeat 50% 30% rgba(0,0,0,.5);
}
.fl-theme-uio-yb .fl-videoPlayer-videoError {
background-image: url("../images/error/exclamation-yellow.png");
}
.fl-theme-uio-wb .fl-videoPlayer-videoError {
background-image: url("../images/error/exclamation-white.png");
}
.fl-theme-uio-by .fl-videoPlayer-videoError,
.fl-theme-uio-bw .fl-videoPlayer-videoError {
background-image: url("../images/error/exclamation-black.png");
}

.fl-videoPlayer-videoError .fl-errorPanel-container {
margin-top: 40%;
text-align: center;
color: #FFFFFF;
}
.fl-videoPlayer-videoError .fl-errorPanel-message {
text-transform: lowercase;
font-style: italic;
text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.fl-theme-uio-yb .fl-videoPlayer-videoError .fl-errorPanel-message,
.fl-theme-uio-wb .fl-videoPlayer-videoError .fl-errorPanel-message,
.fl-theme-uio-by .fl-videoPlayer-videoError .fl-errorPanel-message,
.fl-theme-uio-bw .fl-videoPlayer-videoError .fl-errorPanel-message {
text-shadow: none;
}
.fl-videoPlayer-videoError .fl-errorPanel-retryButton {
border: none;
background: url("../images/error/2xretry.png") no-repeat left center;
padding-left: 1.5em;
font-size: inherit;
height: 2em;
background-size: contain;
text-transform: uppercase;
pointer-events: all;
cursor: pointer;
color: #FFFFFF;
text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.fl-videoPlayer-videoError .fl-errorPanel-retryButton:hover {
background-color: rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 0.25em rgba(0,0,0,.5);
background-image: url("../images/error/2xretry-hover.png");
}
.fl-theme-yb .fl-videoPlayer-videoError .fl-errorPanel-retryButton {
background-image: url("../images/error/2xretry-yellow.png");
}
.fl-theme-yb .fl-videoPlayer-videoError .fl-errorPanel-retryButton:hover {
background-image: url("../images/error/2xretry-yellow-hover.png");
box-shadow: none;
border: 1px solid #FFFF00;
}
.fl-theme-wb .fl-videoPlayer-videoError .fl-errorPanel-retryButton {
background-image: url("../images/error/2xretry-white.png");
}
.fl-theme-wb .fl-videoPlayer-videoError .fl-errorPanel-retryButton:hover {
background-image: url("../images/error/2xretry-white-hover.png");
box-shadow: none;
border: 1px solid #FFFFFF;
}
.fl-theme-by .fl-videoPlayer-videoError .fl-errorPanel-retryButton,
.fl-theme-bw .fl-videoPlayer-videoError .fl-errorPanel-retryButton {
background-image: url("../images/error/2xretry-black.png");
}
.fl-theme-by .fl-videoPlayer-videoError .fl-errorPanel-retryButton:hover,
.fl-theme-bw .fl-videoPlayer-videoError .fl-errorPanel-retryButton:hover {
background-image: url("../images/error/2xretry-black-hover.png");
box-shadow: none;
border: 1px solid #000000;
}
.fl-theme-uio-yb .fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus {
background-color: #FFFF00 !important;
background-image: url("../images/error/2xretry-black-hover.png");
}
.fl-theme-uio-yb .fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus span {
color: #000000 !important;
background-color: #FFFF00 !important;
}
.fl-theme-uio-wb .fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus {
background-color: #FFFFFF !important;
background-image: url("../images/error/2xretry-black-hover.png");
}
.fl-theme-uio-wb .fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus span {
color: #000000 !important;
background-color: #FFFFFF !important;
}
.fl-theme-uio-by .fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus {
background-color: #000000 !important;
background-image: url("../images/error/2xretry-yellow-hover.png");
}
.fl-theme-uio-by .fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus span {
color: #FFFF00 !important;
background-color: #000000 !important;
}
.fl-theme-uio-bw .fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus {
background-color: #000000 !important;
background-image: url("../images/error/2xretry-white-hover.png");
}
.fl-theme-uio-bw .fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus span {
color: #FFFFFF !important;
background-color: #000000 !important;
}

/*
* Controller area
*/
Expand Down Expand Up @@ -66,7 +179,8 @@
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
}
.fl-videoPlayer-button:focus {
.fl-videoPlayer-button:focus,
.fl-videoPlayer-videoError .fl-errorPanel-retryButton:focus {
background-color: #3195C7;
}
.fl-theme-uio-yb .fl-videoPlayer-button:focus { background-color: #FFFF00 !important; }
Expand Down Expand Up @@ -563,10 +677,12 @@ ul.fl-videoPlayer-transcripts-languageList li {
.fl-theme-uio-bw .fl-videoPlayer-overlay, .fl-theme-uio-bw .fl-videoPlayer-captionArea, .fl-theme-uio-bw .captionator-cue-canvas {
background-color: transparent !important;
}
.fl-videoPlayer-caption-captionText {
.fl-videoPlayer-caption-captionText,
.fl-videoPlayer-captionError {
color: white;
background-color: black;
opacity: 0.7;
padding: 0.5em;
}

.fl-videoPlayer-controller-menu-captions {
Expand All @@ -576,6 +692,61 @@ ul.fl-videoPlayer-transcripts-languageList li {
z-index: 101; /* To make our div showin on top since captionator has 100 so */
}

.fl-videoPlayer-captionError {
position: absolute;
bottom: 0;
margin: 0 10%;
width: 80%
}
.fl-videoPlayer-captionError .fl-errorPanel-message {
width: 95%;
}
.fl-videoPlayer-captionError .fl-errorPanel-dismissButton {
pointer-events: visible;
cursor: pointer;
border: none;
background: url("../images/error/2Xcloseerror-blackonwhite.png") no-repeat center center;
background-color: transparent !important;
height: 1.5em;
width: 1.5em;
background-size: cover;
margin-top: -1em;
margin-right: -1em;
font-size: inherit;
}
.fl-videoPlayer-captionError .fl-errorPanel-dismissButton:hover {
background-image: url("../images/error/2Xcloseerror-blackonwhite-hover.png");
}
.fl-videoPlayer-captionError .fl-errorPanel-dismissButton:focus {
background-image: url("../images/error/2Xcloseerror-whiteonblack.png");
}
.fl-theme-uio-yb .fl-videoPlayer-captionError .fl-errorPanel-dismissButton {
background-image: url("../images/error/2Xcloseerror-blackonyellow.png");
}
.fl-theme-uio-yb .fl-videoPlayer-captionError .fl-errorPanel-dismissButton:hover {
background-image: url("../images/error/2Xcloseerror-blackonyellow-hover.png");
}
.fl-theme-uio-yb .fl-videoPlayer-captionError .fl-errorPanel-dismissButton:focus {
background-image: url("../images/error/2Xcloseerror-yellowonblack.png");
}
.fl-theme-uio-by .fl-videoPlayer-captionError .fl-errorPanel-dismissButton {
background-image: url("../images/error/2Xcloseerror-yellowonblack.png");
}
.fl-theme-uio-by .fl-videoPlayer-captionError .fl-errorPanel-dismissButton:hover {
background-image: url("../images/error/2Xcloseerror-yellowonblack-hover.png");
}
.fl-theme-uio-by .fl-videoPlayer-captionError .fl-errorPanel-dismissButton:focus {
background-image: url("../images/error/2Xcloseerror-blackonyellow.png");
}
.fl-theme-uio-bw .fl-videoPlayer-captionError .fl-errorPanel-dismissButton {
background-image: url("../images/error/2Xcloseerror-whiteonblack.png");
}
.fl-theme-uio-bw .fl-videoPlayer-captionError .fl-errorPanel-dismissButton:hover {
background-image: url("../images/error/2Xcloseerror-whiteonblack-hover.png");
}
.fl-theme-uio-bw .fl-videoPlayer-captionError .fl-errorPanel-dismissButton:focus {
background-image: url("../images/error/2Xcloseerror-blackonwhite.png");
}

/*
* Transcript area
Expand All @@ -596,6 +767,10 @@ ul.fl-videoPlayer-transcripts-languageList li {
width: 65%;
}

.fl-videoPlayer-transcriptError .fl-errorPanel-message {
text-align: center;
margin: 3em;
}
.fl-videoPlayer-transcript-text {
word-spacing: 0.1em;
overflow-x: hidden;
Expand Down
1 change: 1 addition & 0 deletions demos/Mammals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
<script type="text/javascript" src="../js/VideoPlayer_controllers.js"></script>
<script type="text/javascript" src="../js/ToggleButton.js"></script>
<script type="text/javascript" src="../js/MenuButton.js"></script>
<script type="text/javascript" src="../js/ErrorPanel.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_media.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_transcript.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_intervalEventsConductor.js"></script>
Expand Down
1 change: 1 addition & 0 deletions demos/VideoPlayer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
<script type="text/javascript" src="../js/VideoPlayer_controllers.js"></script>
<script type="text/javascript" src="../js/ToggleButton.js"></script>
<script type="text/javascript" src="../js/MenuButton.js"></script>
<script type="text/javascript" src="../js/ErrorPanel.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_media.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_transcript.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_intervalEventsConductor.js"></script>
Expand Down
Loading