predefined report reasons & improved reporter UI (#2842)

- added `startAt` and `endAt` optional timestamps to help pin down reported sections of a video
- added predefined report reasons
- added video player with report modal

2 files changed, 10 insertions, 3 deletions

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index eb80ea0e3..6a1deac76 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -804,10 +804,12 @@
 }
 
 @mixin chip {
+  --chip-radius: 5rem;
+  --chip-padding: .2rem .4rem;
   $avatar-height: 1.2rem;
 
   align-items: center;
-  border-radius: 5rem;
+  border-radius: var(--chip-radius);
   display: inline-flex;
   font-size: 90%;
   color: pvar(--mainForegroundColor);
@@ -816,12 +818,17 @@
   margin: .1rem;
   max-width: 320px;
   overflow: hidden;
-  padding: .2rem .4rem;
+  padding: var(--chip-padding);
   text-decoration: none;
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
 
+  &.rectangular {
+    --chip-radius: .2rem;
+    --chip-padding: .2rem .3rem;
+  }
+
   .avatar {
     margin-left: -.4rem;
     margin-right: .2rem;
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 1fc744e67..bdeff8f9a 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -86,7 +86,7 @@ body {
     }
 
     &.focus-visible, &:hover {
-      background-color: var(--mainColor);
+      background-color: var(--mainColor, dimgray);
     }
 
   }