mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
Migrate NavigationDrawer to Es6
This commit is contained in:
grafixeyehero
parent
045306d5f4
commit
5c4527feaf
@ -3,134 +3,174 @@
|
||||
* It is a legacy library that should be replaced at some point.
|
||||
*/
|
||||
|
||||
/* eslint-disable no-var */
|
||||
import browser from '../../scripts/browser';
|
||||
import dom from '../../scripts/dom';
|
||||
import './navdrawer.scss';
|
||||
import '../../assets/css/scrollstyles.scss';
|
||||
class NavigationDrawer {
|
||||
mask;
|
||||
newPos = 0;
|
||||
currentPos = 0;
|
||||
startPoint = 0;
|
||||
countStart = 0;
|
||||
velocity = 0;
|
||||
dragMode = 0;
|
||||
menuTouchStartX;
|
||||
menuTouchStartY;
|
||||
menuTouchStartTime;
|
||||
edgeContainer = document.querySelector('.mainDrawerHandle');
|
||||
isPeeking = false;
|
||||
backgroundTouchStartX;
|
||||
backgroundTouchStartTime;
|
||||
_edgeSwipeEnabled;
|
||||
|
||||
export function NavigationDrawer(options) {
|
||||
function getTouches(e) {
|
||||
constructor(options) {
|
||||
this.options = options;
|
||||
this.defaults = {
|
||||
width: 260,
|
||||
handleSize: 10,
|
||||
disableMask: false,
|
||||
maxMaskOpacity: 0.5
|
||||
};
|
||||
options.target.classList.add('transition');
|
||||
this.scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
|
||||
this.scrollContainer.classList.add('scrollY');
|
||||
this.isVisible = false;
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
getTouches(e) {
|
||||
return e.changedTouches || e.targetTouches || e.touches;
|
||||
}
|
||||
|
||||
function onMenuTouchStart(e) {
|
||||
disableEvent(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
setVelocity(deltaX) {
|
||||
const time = new Date().getTime() - (this.menuTouchStartTime || 0);
|
||||
this.velocity = Math.abs(deltaX) / time;
|
||||
}
|
||||
|
||||
onMenuTouchStart(e) {
|
||||
const options = this.options;
|
||||
|
||||
options.target.classList.remove('transition');
|
||||
const touches = getTouches(e);
|
||||
const touches = this.getTouches(e);
|
||||
const touch = touches[0] || {};
|
||||
menuTouchStartX = touch.clientX;
|
||||
menuTouchStartY = touch.clientY;
|
||||
menuTouchStartTime = new Date().getTime();
|
||||
this.menuTouchStartX = touch.clientX;
|
||||
this.menuTouchStartY = touch.clientY;
|
||||
this.menuTouchStartTime = new Date().getTime();
|
||||
}
|
||||
|
||||
function setVelocity(deltaX) {
|
||||
const time = new Date().getTime() - (menuTouchStartTime || 0);
|
||||
velocity = Math.abs(deltaX) / time;
|
||||
}
|
||||
onMenuTouchMove(e) {
|
||||
const scrollContainer = this.scrollContainer;
|
||||
|
||||
function onMenuTouchMove(e) {
|
||||
const isOpen = self.visible;
|
||||
const touches = getTouches(e);
|
||||
const isOpen = this.visible;
|
||||
const touches = this.getTouches(e);
|
||||
const touch = touches[0] || {};
|
||||
const endX = touch.clientX || 0;
|
||||
const endY = touch.clientY || 0;
|
||||
const deltaX = endX - (menuTouchStartX || 0);
|
||||
const deltaY = endY - (menuTouchStartY || 0);
|
||||
setVelocity(deltaX);
|
||||
const deltaX = endX - (this.menuTouchStartX || 0);
|
||||
const deltaY = endY - (this.menuTouchStartY || 0);
|
||||
this.setVelocity(deltaX);
|
||||
|
||||
if (isOpen && dragMode !== 1 && deltaX > 0) {
|
||||
dragMode = 2;
|
||||
if (isOpen && this.dragMode !== 1 && deltaX > 0) {
|
||||
this.dragMode = 2;
|
||||
}
|
||||
|
||||
if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
|
||||
dragMode = 1;
|
||||
scrollContainer.addEventListener('scroll', disableEvent);
|
||||
self.showMask();
|
||||
} else if (dragMode === 0 && Math.abs(deltaY) >= 5) {
|
||||
dragMode = 2;
|
||||
if (this.dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
|
||||
this.dragMode = 1;
|
||||
scrollContainer.addEventListener('scroll', this.disableEvent);
|
||||
this.showMask();
|
||||
} else if (this.dragMode === 0 && Math.abs(deltaY) >= 5) {
|
||||
this.dragMode = 2;
|
||||
}
|
||||
|
||||
if (dragMode === 1) {
|
||||
newPos = currentPos + deltaX;
|
||||
self.changeMenuPos();
|
||||
if (this.dragMode === 1) {
|
||||
this.newPos = this.currentPos + deltaX;
|
||||
this.changeMenuPos();
|
||||
}
|
||||
}
|
||||
|
||||
function onMenuTouchEnd(e) {
|
||||
onMenuTouchEnd(e) {
|
||||
const options = this.options;
|
||||
const scrollContainer = this.scrollContainer;
|
||||
|
||||
options.target.classList.add('transition');
|
||||
scrollContainer.removeEventListener('scroll', disableEvent);
|
||||
dragMode = 0;
|
||||
const touches = getTouches(e);
|
||||
scrollContainer.removeEventListener('scroll', this.disableEvent);
|
||||
this.dragMode = 0;
|
||||
const touches = this.getTouches(e);
|
||||
const touch = touches[0] || {};
|
||||
const endX = touch.clientX || 0;
|
||||
const endY = touch.clientY || 0;
|
||||
const deltaX = endX - (menuTouchStartX || 0);
|
||||
const deltaY = endY - (menuTouchStartY || 0);
|
||||
currentPos = deltaX;
|
||||
self.checkMenuState(deltaX, deltaY);
|
||||
const deltaX = endX - (this.menuTouchStartX || 0);
|
||||
const deltaY = endY - (this.menuTouchStartY || 0);
|
||||
this.currentPos = deltaX;
|
||||
this.checkMenuState(deltaX, deltaY);
|
||||
}
|
||||
|
||||
function onEdgeTouchStart(e) {
|
||||
if (isPeeking) {
|
||||
onMenuTouchMove(e);
|
||||
onEdgeTouchMove(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.onEdgeTouchStart(e);
|
||||
}
|
||||
|
||||
onEdgeTouchStart(e) {
|
||||
const options = this.options;
|
||||
|
||||
if (this.isPeeking) {
|
||||
this.onMenuTouchMove(e);
|
||||
} else {
|
||||
if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
|
||||
isPeeking = true;
|
||||
if (((this.getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
|
||||
this.isPeeking = true;
|
||||
|
||||
if (e.type === 'touchstart') {
|
||||
dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
|
||||
dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
|
||||
dom.removeEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
|
||||
dom.addEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
|
||||
}
|
||||
|
||||
onMenuTouchStart(e);
|
||||
this.onMenuTouchStart(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onEdgeTouchMove(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEdgeTouchStart(e);
|
||||
}
|
||||
|
||||
function onEdgeTouchEnd(e) {
|
||||
if (isPeeking) {
|
||||
isPeeking = false;
|
||||
dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
|
||||
onMenuTouchEnd(e);
|
||||
onEdgeTouchEnd(e) {
|
||||
if (this.isPeeking) {
|
||||
this.isPeeking = false;
|
||||
dom.removeEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
|
||||
this.onMenuTouchEnd(e);
|
||||
}
|
||||
}
|
||||
|
||||
function disableEvent(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
function onBackgroundTouchStart(e) {
|
||||
const touches = getTouches(e);
|
||||
onBackgroundTouchStart(e) {
|
||||
const touches = this.getTouches(e);
|
||||
const touch = touches[0] || {};
|
||||
backgroundTouchStartX = touch.clientX;
|
||||
backgroundTouchStartTime = new Date().getTime();
|
||||
this.backgroundTouchStartX = touch.clientX;
|
||||
this.backgroundTouchStartTime = new Date().getTime();
|
||||
}
|
||||
|
||||
function onBackgroundTouchMove(e) {
|
||||
const touches = getTouches(e);
|
||||
onBackgroundTouchMove(e) {
|
||||
const options = this.options;
|
||||
|
||||
const touches = this.getTouches(e);
|
||||
const touch = touches[0] || {};
|
||||
const endX = touch.clientX || 0;
|
||||
|
||||
if (endX <= options.width && self.isVisible) {
|
||||
countStart++;
|
||||
const deltaX = endX - (backgroundTouchStartX || 0);
|
||||
if (endX <= options.width && this.isVisible) {
|
||||
this.countStart++;
|
||||
const deltaX = endX - (this.backgroundTouchStartX || 0);
|
||||
|
||||
if (countStart == 1) {
|
||||
startPoint = deltaX;
|
||||
if (this.countStart == 1) {
|
||||
this.startPoint = deltaX;
|
||||
}
|
||||
if (deltaX < 0 && dragMode !== 2) {
|
||||
dragMode = 1;
|
||||
newPos = deltaX - startPoint + options.width;
|
||||
self.changeMenuPos();
|
||||
const time = new Date().getTime() - (backgroundTouchStartTime || 0);
|
||||
velocity = Math.abs(deltaX) / time;
|
||||
if (deltaX < 0 && this.dragMode !== 2) {
|
||||
this.dragMode = 1;
|
||||
this.newPos = deltaX - this.startPoint + options.width;
|
||||
this.changeMenuPos();
|
||||
const time = new Date().getTime() - (this.backgroundTouchStartTime || 0);
|
||||
this.velocity = Math.abs(deltaX) / time;
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,223 +178,194 @@ export function NavigationDrawer(options) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
function onBackgroundTouchEnd(e) {
|
||||
const touches = getTouches(e);
|
||||
onBackgroundTouchEnd(e) {
|
||||
const touches = this.getTouches(e);
|
||||
const touch = touches[0] || {};
|
||||
const endX = touch.clientX || 0;
|
||||
const deltaX = endX - (backgroundTouchStartX || 0);
|
||||
self.checkMenuState(deltaX);
|
||||
countStart = 0;
|
||||
const deltaX = endX - (this.backgroundTouchStartX || 0);
|
||||
this.checkMenuState(deltaX);
|
||||
this.countStart = 0;
|
||||
}
|
||||
|
||||
function onMaskTransitionEnd() {
|
||||
const classList = mask.classList;
|
||||
onMaskTransitionEnd() {
|
||||
const classList = this.mask.classList;
|
||||
|
||||
if (!classList.contains('backdrop')) {
|
||||
classList.add('hide');
|
||||
}
|
||||
}
|
||||
|
||||
let self;
|
||||
let defaults;
|
||||
let mask;
|
||||
var newPos = 0;
|
||||
var currentPos = 0;
|
||||
var startPoint = 0;
|
||||
var countStart = 0;
|
||||
var velocity = 0;
|
||||
options.target.classList.add('transition');
|
||||
var dragMode = 0;
|
||||
var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
|
||||
scrollContainer.classList.add('scrollY');
|
||||
initElements() {
|
||||
const options = this.options;
|
||||
|
||||
const TouchMenuLA = function () {
|
||||
self = this;
|
||||
defaults = {
|
||||
width: 260,
|
||||
handleSize: 10,
|
||||
disableMask: false,
|
||||
maxMaskOpacity: 0.5
|
||||
};
|
||||
this.isVisible = false;
|
||||
this.initialize();
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.initElements = function () {
|
||||
options.target.classList.add('touch-menu-la');
|
||||
options.target.style.width = options.width + 'px';
|
||||
options.target.style.left = -options.width + 'px';
|
||||
|
||||
if (!options.disableMask) {
|
||||
mask = document.createElement('div');
|
||||
mask.className = 'tmla-mask hide';
|
||||
document.body.appendChild(mask);
|
||||
dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
|
||||
this.mask = document.createElement('div');
|
||||
this.mask.className = 'tmla-mask hide';
|
||||
document.body.appendChild(this.mask);
|
||||
dom.addEventListener(this.mask, dom.whichTransitionEvent(), this.onMaskTransitionEnd, {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let menuTouchStartX;
|
||||
let menuTouchStartY;
|
||||
let menuTouchStartTime;
|
||||
var edgeContainer = document.querySelector('.mainDrawerHandle');
|
||||
var isPeeking = false;
|
||||
|
||||
TouchMenuLA.prototype.animateToPosition = function (pos) {
|
||||
animateToPosition(pos) {
|
||||
const options = this.options;
|
||||
requestAnimationFrame(function () {
|
||||
options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
|
||||
});
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.changeMenuPos = function () {
|
||||
if (newPos <= options.width) {
|
||||
this.animateToPosition(newPos);
|
||||
}
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.clickMaskClose = function () {
|
||||
mask.addEventListener('click', function () {
|
||||
self.close();
|
||||
});
|
||||
};
|
||||
changeMenuPos() {
|
||||
const options = this.options;
|
||||
if (this.newPos <= options.width) {
|
||||
this.animateToPosition(this.newPos);
|
||||
}
|
||||
}
|
||||
|
||||
TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
|
||||
if (velocity >= 0.4) {
|
||||
clickMaskClose() {
|
||||
this.close();
|
||||
}
|
||||
|
||||
checkMenuState(deltaX, deltaY) {
|
||||
if (this.velocity >= 0.4) {
|
||||
if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
|
||||
self.open();
|
||||
this.open();
|
||||
} else {
|
||||
self.close();
|
||||
this.close();
|
||||
}
|
||||
} else {
|
||||
if (newPos >= 100) {
|
||||
self.open();
|
||||
if (this.newPos >= 100) {
|
||||
this.open();
|
||||
} else {
|
||||
if (newPos) {
|
||||
self.close();
|
||||
if (this.newPos) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.open = function () {
|
||||
open() {
|
||||
const options = this.options;
|
||||
|
||||
this.animateToPosition(options.width);
|
||||
currentPos = options.width;
|
||||
this.currentPos = options.width;
|
||||
this.isVisible = true;
|
||||
options.target.classList.add('drawer-open');
|
||||
self.showMask();
|
||||
self.invoke(options.onChange);
|
||||
};
|
||||
this.showMask();
|
||||
this.invoke(options.onChange);
|
||||
}
|
||||
|
||||
close() {
|
||||
const options = this.options;
|
||||
|
||||
TouchMenuLA.prototype.close = function () {
|
||||
this.animateToPosition(0);
|
||||
currentPos = 0;
|
||||
self.isVisible = false;
|
||||
this.currentPos = 0;
|
||||
this.isVisible = false;
|
||||
options.target.classList.remove('drawer-open');
|
||||
self.hideMask();
|
||||
self.invoke(options.onChange);
|
||||
};
|
||||
this.hideMask();
|
||||
this.invoke(options.onChange);
|
||||
}
|
||||
|
||||
TouchMenuLA.prototype.toggle = function () {
|
||||
if (self.isVisible) {
|
||||
self.close();
|
||||
toggle() {
|
||||
if (this.isVisible) {
|
||||
this.close();
|
||||
} else {
|
||||
self.open();
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let backgroundTouchStartX;
|
||||
let backgroundTouchStartTime;
|
||||
showMask() {
|
||||
this.mask.classList.remove('hide');
|
||||
this.mask.classList.add('backdrop');
|
||||
}
|
||||
|
||||
TouchMenuLA.prototype.showMask = function () {
|
||||
mask.classList.remove('hide');
|
||||
mask.classList.add('backdrop');
|
||||
};
|
||||
hideMask() {
|
||||
this.mask.classList.add('hide');
|
||||
this.mask.classList.remove('backdrop');
|
||||
}
|
||||
|
||||
TouchMenuLA.prototype.hideMask = function () {
|
||||
mask.classList.add('hide');
|
||||
mask.classList.remove('backdrop');
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.invoke = function (fn) {
|
||||
invoke(fn) {
|
||||
if (fn) {
|
||||
fn.apply(self);
|
||||
fn.apply(this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let _edgeSwipeEnabled;
|
||||
setEdgeSwipeEnabled(enabled) {
|
||||
const options = this.options;
|
||||
|
||||
TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
|
||||
if (!options.disableEdgeSwipe) {
|
||||
if (browser.touch) {
|
||||
if (enabled) {
|
||||
if (!_edgeSwipeEnabled) {
|
||||
_edgeSwipeEnabled = true;
|
||||
dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
|
||||
if (!this._edgeSwipeEnabled) {
|
||||
this._edgeSwipeEnabled = true;
|
||||
dom.addEventListener(this.edgeContainer, 'touchstart', this.onEdgeTouchStart.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
|
||||
dom.addEventListener(this.edgeContainer, 'touchend', this.onEdgeTouchEnd.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
|
||||
dom.addEventListener(this.edgeContainer, 'touchcancel', this.onEdgeTouchEnd.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (_edgeSwipeEnabled) {
|
||||
_edgeSwipeEnabled = false;
|
||||
dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
|
||||
if (this._edgeSwipeEnabled) {
|
||||
this._edgeSwipeEnabled = false;
|
||||
dom.removeEventListener(this.edgeContainer, 'touchstart', this.onEdgeTouchStart.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
|
||||
dom.removeEventListener(this.edgeContainer, 'touchend', this.onEdgeTouchEnd.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
|
||||
dom.removeEventListener(this.edgeContainer, 'touchcancel', this.onEdgeTouchEnd.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
TouchMenuLA.prototype.initialize = function () {
|
||||
options = Object.assign(defaults, options || {});
|
||||
initialize() {
|
||||
const options = Object.assign(this.defaults, this.options || {});
|
||||
|
||||
if (browser.edge) {
|
||||
options.disableEdgeSwipe = true;
|
||||
}
|
||||
|
||||
self.initElements();
|
||||
this.initElements();
|
||||
|
||||
if (browser.touch) {
|
||||
dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, {
|
||||
dom.addEventListener(options.target, 'touchstart', this.onMenuTouchStart.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, {
|
||||
dom.addEventListener(options.target, 'touchmove', this.onMenuTouchMove.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, {
|
||||
dom.addEventListener(options.target, 'touchend', this.onMenuTouchEnd.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, {
|
||||
dom.addEventListener(options.target, 'touchcancel', this.onMenuTouchEnd.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, {
|
||||
dom.addEventListener(this.mask, 'touchstart', this.onBackgroundTouchStart.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {});
|
||||
dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, {
|
||||
dom.addEventListener(this.mask, 'touchmove', this.onBackgroundTouchMove.bind(this), {});
|
||||
dom.addEventListener(this.mask, 'touchend', this.onBackgroundTouchEnd.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, {
|
||||
dom.addEventListener(this.mask, 'touchcancel', this.onBackgroundTouchEnd.bind(this), {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
|
||||
self.clickMaskClose();
|
||||
};
|
||||
|
||||
return new TouchMenuLA();
|
||||
this.mask.addEventListener('click', this.clickMaskClose.bind(this));
|
||||
}
|
||||
/* eslint-enable no-var */
|
||||
}
|
||||
|
||||
export default NavigationDrawer;
|
||||
|
||||
@ -899,7 +899,7 @@ import { getParameterByName } from '../utils/url.ts';
|
||||
navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
|
||||
navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
|
||||
return new Promise(function (resolve) {
|
||||
import('../libraries/navdrawer/navdrawer').then(({ NavigationDrawer }) => {
|
||||
import('../libraries/navdrawer/navdrawer').then(({ default: NavigationDrawer }) => {
|
||||
navDrawerInstance = new NavigationDrawer(getNavDrawerOptions());
|
||||
|
||||
if (!layoutManager.tv) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user