From 530276145b91be6eb5f5564f320a76c56e0bf6e6 Mon Sep 17 00:00:00 2001 From: James Mills Date: Mon, 23 Mar 2020 22:44:42 +1000 Subject: Fixed typo --- README.md | 4 ++-- app/rice-box.go | 12 +++++------ static/theme.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++ templates/upload.html | 4 +++- 4 files changed, 66 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 66ded3c..427ccd0 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# tube +# tube, `tube` is a Youtube-like (_without censorship and features you don't need!_) Video Sharing App written in Go which also supports automatic transcoding to -MP4 H.265 AAC and multiple collections and RSS feed. +MP4 H.265 AAC, multiple collections and RSS feed. ## Features diff --git a/app/rice-box.go b/app/rice-box.go index 67d2902..c5cc9f3 100644 --- a/app/rice-box.go +++ b/app/rice-box.go @@ -23,15 +23,15 @@ func init() { } file4 := &embedded.EmbeddedFile{ Filename: "upload.html", - FileModTime: time.Unix(1584879674, 0), + FileModTime: time.Unix(1584885231, 0), - Content: string("{{define \"content\"}}\n
\n
\n
\n \n
\n\n
\n \n
\n\n
You should select valid image files only!
\n
An error occurred while uploading the file
\n
The upload has been canceled by the user or the browser dropped the connection
\n
Your file is very big. We can't accept it. Please select more small file
\n\n
\n
\n
 
\n
\n
\n
 
\n
 
\n
 
\n
\n
\n\n
\n
\n
\n
\n{{end}}\n{{define \"scripts\"}}\n \n{{end}}\n"), + Content: string("{{define \"content\"}}\n
\n
\n
\n \n
\n\n
\n \n
\n\n
You should select valid image files only!
\n
An error occurred while uploading the file
\n
The upload has been canceled by the user or the browser dropped the connection
\n
Your file is very big. We can't accept it. Please select more small file
\n\n
\n
\n
 
\n
\n
\n
 
\n
 
\n
 
\n
\n
\n\n
\n
\n
\n
\n
\n
\n{{end}}\n{{define \"scripts\"}}\n \n{{end}}\n"), } // define dirs dir1 := &embedded.EmbeddedDir{ Filename: "", - DirModTime: time.Unix(1584884378, 0), + DirModTime: time.Unix(1584885231, 0), ChildFiles: []*embedded.EmbeddedFile{ file2, // "base.html" file3, // "index.html" @@ -46,7 +46,7 @@ func init() { // register embeddedBox embedded.RegisterEmbeddedBox(`../templates`, &embedded.EmbeddedBox{ Name: `../templates`, - Time: time.Unix(1584884378, 0), + Time: time.Unix(1584885231, 0), Dirs: map[string]*embedded.EmbeddedDir{ "": dir1, }, @@ -75,9 +75,9 @@ func init() { } file8 := &embedded.EmbeddedFile{ Filename: "theme.css", - FileModTime: time.Unix(1584884367, 0), + FileModTime: time.Unix(1584885182, 0), - Content: string(":root {\n --main-title-color: #ae81ff;\n --link-hover-color: #ae81ff;\n}\n\n/* normalize */\n* {\n font-weight: inherit;\n font-size: inherit;\n border: none;\n outline: none;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\nbody {\n font-family: Arial, sans-serif;\n font-size: 16px;\n font-weight: 400;\n color: #c5c8c6;\n background: #1e1e1e;\n padding-bottom: 10px;\n}\n\nnav {\n z-index: 100;\n color: var(--main-title-color);\n text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.7);\n font-weight: 700;\n font-size: 20px;\n text-indent: 20px;\n line-height: 50px;\n width: 100%;\n height: 50px;\n background: #171717;\n border-bottom: 1px solid #272727;\n position: relative;\n overflow: hidden;\n}\n\nnav a.centered {\n float: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\nmain {\n width: 1156px;\n margin:0 auto;\n margin-top: 15px;\n white-space: nowrap;\n}\n\n#player {\n width: 854px;\n display: inline-block;\n vertical-align: top;\n}\n\n/* 480p */\n#video {\n width: 100%;\n height: 480px;\n background: #000;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#player > h1 {\n margin-top: 10px;\n}\n\n#player > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n#player > p {\n margin-top: 10px;\n font-size: 80%;\n width: 100%;\n white-space: normal;\n}\n\n#playlist {\n font-size: 13px;\n display: inline-block;\n margin-left: 10px;\n width: 290px;\n background: #282a2e;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#playlist > a {\n display: block;\n padding: 10px;\n position: relative;\n min-height: 54px;\n}\n\n#playlist > a:hover {\n color: var(--link-hover-color);\n}\n\n#playlist > a.playing {\n background: #383a3e;\n}\n\n#playlist > a + a {\n border-top: 1px solid #1e1e1e;\n}\n\n#playlist > a > img {\n width: 70px;\n}\n\n#playlist > a > div {\n position: absolute;\n top: 10px;\n right: 10px;\n bottom: 10px;\n left: 90px;\n}\n\n#playlist > a > div > h1 {\n white-space: normal;\n}\n\n#playlist > a > div > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n/* 360p */\n@media only screen and (max-width: 1180px) {\n main {\n width: 940px;\n }\n #player {\n width: 640px;\n }\n #video {\n height: 360px;\n }\n}\n\n/* 240p */\n@media only screen and (max-width: 965px) {\n main {\n width: 726px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n}\n\n/* 240p with shifted playlist */\n@media only screen and (max-width: 750px) {\n main {\n width: 426px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n #playlist {\n width: 426px;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* responsive width with shifted playlist */\n@media only screen and (max-width: 440px) {\n main {\n width: 100%;\n }\n #player {\n width: 100%;\n }\n #video {\n height: auto;\n }\n #playlist {\n width: 100%;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* Upload */\n.upload_form_cont {\n background: -moz-linear-gradient(#ffffff, #f2f2f2);\n background: -ms-linear-gradient(#ffffff, #f2f2f2);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));\n background: -webkit-linear-gradient(#ffffff, #f2f2f2);\n background: -o-linear-gradient(#ffffff, #f2f2f2);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')\";\n background: linear-gradient(#ffffff, #f2f2f2);\n color:#000;\n overflow:hidden;\n}\n#upload_form {\n float:left;\n padding:20px;\n width:700px;\n}\n#upload_form > div {\n margin-bottom:10px;\n}\n#speed,#remaining {\n float:left;\n width:100px;\n}\n#b_transfered {\n float:right;\n text-align:right;\n}\n.clear_both {\n clear:both;\n}\ninput {\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n border:1px solid #ccc;\n font-size:14pt;\n padding:5px 10px;\n}\ninput[type=button] {\n background: -moz-linear-gradient(#ffffff, #dfdfdf);\n background: -ms-linear-gradient(#ffffff, #dfdfdf);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));\n background: -webkit-linear-gradient(#ffffff, #dfdfdf);\n background: -o-linear-gradient(#ffffff, #dfdfdf);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')\";\n background: linear-gradient(#ffffff, #dfdfdf);\n}\n#video_file {\n width:400px;\n}\n#progress_info {\n font-size:10pt;\n}\n#fileinfo,#error,#error2,#abort,#warnsize {\n color:#aaa;\n display:none;\n font-size:10pt;\n font-style:italic;\n margin-top:10px;\n}\n#progress {\n border:1px solid #ccc;\n display:none;\n float:left;\n height:14px;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n background: -moz-linear-gradient(#66cc00, #4b9500);\n background: -ms-linear-gradient(#66cc00, #4b9500);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));\n background: -webkit-linear-gradient(#66cc00, #4b9500);\n background: -o-linear-gradient(#66cc00, #4b9500);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')\";\n background: linear-gradient(#66cc00, #4b9500);\n}\n#progress_percent {\n float:right;\n}\n#upload_response {\n margin-top: 10px;\n padding: 20px;\n overflow: hidden;\n display: none;\n border: 1px solid #ccc;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n box-shadow: 0 0 5px #ccc;\n background: -moz-linear-gradient(#bbb, #eee);\n background: -ms-linear-gradient(#bbb, #eee);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));\n background: -webkit-linear-gradient(#bbb, #eee);\n background: -o-linear-gradient(#bbb, #eee);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')\";\n background: linear-gradient(#000000, #1e1e1e);\n}\n\n.fileContainer {\n overflow: hidden;\n position: relative;\n}\n\nlabel.filebutton {\n width:120px;\n height:40px;\n overflow:hidden;\n position:relative;\n background:linear-gradient(#000000, #1e1e1e);\n box-shadow: 0 0 5px #ccc;\n}\n\nlabel span input {\n z-index: 999;\n line-height: 0;\n font-size: 50px;\n position: absolute;\n top: -2px;\n left: -700px;\n opacity: 0;\n filter: alpha(opacity = 0);\n -ms-filter: \"alpha(opacity=0)\";\n cursor: pointer;\n _cursor: hand;\n margin: 0;\n padding:0;\n}\n"), + Content: string(":root {\n --main-title-color: #ae81ff;\n --link-hover-color: #ae81ff;\n}\n\n/* normalize */\n* {\n font-weight: inherit;\n font-size: inherit;\n border: none;\n outline: none;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\nbody {\n font-family: Arial, sans-serif;\n font-size: 16px;\n font-weight: 400;\n color: #c5c8c6;\n background: #1e1e1e;\n padding-bottom: 10px;\n}\n\nnav {\n z-index: 100;\n color: var(--main-title-color);\n text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.7);\n font-weight: 700;\n font-size: 20px;\n text-indent: 20px;\n line-height: 50px;\n width: 100%;\n height: 50px;\n background: #171717;\n border-bottom: 1px solid #272727;\n position: relative;\n overflow: hidden;\n}\n\nnav a.centered {\n float: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\nmain {\n width: 1156px;\n margin:0 auto;\n margin-top: 15px;\n white-space: nowrap;\n}\n\n#player {\n width: 854px;\n display: inline-block;\n vertical-align: top;\n}\n\n/* 480p */\n#video {\n width: 100%;\n height: 480px;\n background: #000;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#player > h1 {\n margin-top: 10px;\n}\n\n#player > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n#player > p {\n margin-top: 10px;\n font-size: 80%;\n width: 100%;\n white-space: normal;\n}\n\n#playlist {\n font-size: 13px;\n display: inline-block;\n margin-left: 10px;\n width: 290px;\n background: #282a2e;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#playlist > a {\n display: block;\n padding: 10px;\n position: relative;\n min-height: 54px;\n}\n\n#playlist > a:hover {\n color: var(--link-hover-color);\n}\n\n#playlist > a.playing {\n background: #383a3e;\n}\n\n#playlist > a + a {\n border-top: 1px solid #1e1e1e;\n}\n\n#playlist > a > img {\n width: 70px;\n}\n\n#playlist > a > div {\n position: absolute;\n top: 10px;\n right: 10px;\n bottom: 10px;\n left: 90px;\n}\n\n#playlist > a > div > h1 {\n white-space: normal;\n}\n\n#playlist > a > div > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n/* 360p */\n@media only screen and (max-width: 1180px) {\n main {\n width: 940px;\n }\n #player {\n width: 640px;\n }\n #video {\n height: 360px;\n }\n}\n\n/* 240p */\n@media only screen and (max-width: 965px) {\n main {\n width: 726px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n}\n\n/* 240p with shifted playlist */\n@media only screen and (max-width: 750px) {\n main {\n width: 426px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n #playlist {\n width: 426px;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* responsive width with shifted playlist */\n@media only screen and (max-width: 440px) {\n main {\n width: 100%;\n }\n #player {\n width: 100%;\n }\n #video {\n height: auto;\n }\n #playlist {\n width: 100%;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* Upload */\n.upload_form_cont {\n background: -moz-linear-gradient(#ffffff, #f2f2f2);\n background: -ms-linear-gradient(#ffffff, #f2f2f2);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));\n background: -webkit-linear-gradient(#ffffff, #f2f2f2);\n background: -o-linear-gradient(#ffffff, #f2f2f2);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')\";\n background: linear-gradient(#ffffff, #f2f2f2);\n color:#000;\n overflow:hidden;\n}\n#upload_form {\n float:left;\n padding:20px;\n width:700px;\n}\n#upload_form > div {\n margin-bottom:10px;\n}\n#speed,#remaining {\n float:left;\n width:100px;\n}\n#b_transfered {\n float:right;\n text-align:right;\n}\n.clear_both {\n clear:both;\n}\ninput {\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n border:1px solid #ccc;\n font-size:14pt;\n padding:5px 10px;\n}\ninput[type=button] {\n background: -moz-linear-gradient(#ffffff, #dfdfdf);\n background: -ms-linear-gradient(#ffffff, #dfdfdf);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));\n background: -webkit-linear-gradient(#ffffff, #dfdfdf);\n background: -o-linear-gradient(#ffffff, #dfdfdf);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')\";\n background: linear-gradient(#ffffff, #dfdfdf);\n}\n#video_file {\n width:400px;\n}\n#progress_info {\n font-size:10pt;\n}\n#fileinfo,#error,#error2,#abort,#warnsize {\n color:#aaa;\n display:none;\n font-size:10pt;\n font-style:italic;\n margin-top:10px;\n}\n#progress {\n border:1px solid #ccc;\n display:none;\n float:left;\n height:14px;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n background: -moz-linear-gradient(#66cc00, #4b9500);\n background: -ms-linear-gradient(#66cc00, #4b9500);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));\n background: -webkit-linear-gradient(#66cc00, #4b9500);\n background: -o-linear-gradient(#66cc00, #4b9500);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')\";\n background: linear-gradient(#66cc00, #4b9500);\n}\n#progress_percent {\n float:right;\n}\n#upload_response {\n margin-top: 10px;\n padding: 20px;\n overflow: hidden;\n display: none;\n border: 1px solid #ccc;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n box-shadow: 0 0 5px #ccc;\n background: -moz-linear-gradient(#bbb, #eee);\n background: -ms-linear-gradient(#bbb, #eee);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));\n background: -webkit-linear-gradient(#bbb, #eee);\n background: -o-linear-gradient(#bbb, #eee);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')\";\n background: linear-gradient(#000000, #1e1e1e);\n}\n\n.fileContainer {\n overflow: hidden;\n position: relative;\n}\n\nlabel.filebutton {\n width:120px;\n height:40px;\n overflow:hidden;\n position:relative;\n background:linear-gradient(#000000, #1e1e1e);\n box-shadow: 0 0 5px #ccc;\n}\n\nlabel span input {\n z-index: 999;\n line-height: 0;\n font-size: 50px;\n position: absolute;\n top: -2px;\n left: -700px;\n opacity: 0;\n filter: alpha(opacity = 0);\n -ms-filter: \"alpha(opacity=0)\";\n cursor: pointer;\n _cursor: hand;\n margin: 0;\n padding:0;\n}\n.lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n.lds-ellipsis div {\n position: absolute;\n top: 33px;\n width: 13px;\n height: 13px;\n border-radius: 50%;\n background: #fff;\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n}\n.lds-ellipsis div:nth-child(1) {\n left: 8px;\n animation: lds-ellipsis1 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(2) {\n left: 8px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(3) {\n left: 32px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(4) {\n left: 56px;\n animation: lds-ellipsis3 0.6s infinite;\n}\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n}\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(24px, 0);\n }\n}\n"), } file9 := &embedded.EmbeddedFile{ Filename: "upload.js", diff --git a/static/theme.css b/static/theme.css index e19bad4..1f9d76b 100644 --- a/static/theme.css +++ b/static/theme.css @@ -342,3 +342,58 @@ label span input { margin: 0; padding:0; } +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: #fff; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} +.lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} diff --git a/templates/upload.html b/templates/upload.html index a6e09df..3701eec 100644 --- a/templates/upload.html +++ b/templates/upload.html @@ -28,7 +28,9 @@
-
+
+
+
-- cgit v1.2.3