refactor: extract logic from QrScanner and UrlCleaner to composables
This commit is contained in:
110
src/composables/useCamera.js
Normal file
110
src/composables/useCamera.js
Normal file
@@ -0,0 +1,110 @@
|
||||
import { ref, watch, onUnmounted } from 'vue'
|
||||
|
||||
export function useCamera(videoRef) {
|
||||
const stream = ref(null)
|
||||
const facingMode = ref('environment')
|
||||
const hasMultipleCameras = ref(false)
|
||||
const isMirrored = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const checkCameras = async () => {
|
||||
try {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
|
||||
return
|
||||
}
|
||||
const devices = await navigator.mediaDevices.enumerateDevices()
|
||||
const cameras = devices.filter(d => d.kind === 'videoinput')
|
||||
hasMultipleCameras.value = cameras.length > 1
|
||||
} catch (e) {
|
||||
console.error('Error checking cameras:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const stopCamera = () => {
|
||||
if (stream.value) {
|
||||
stream.value.getTracks().forEach(t => t.stop())
|
||||
stream.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const startCamera = async () => {
|
||||
stopCamera()
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const constraints = {
|
||||
video: {
|
||||
facingMode: facingMode.value,
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 }
|
||||
}
|
||||
}
|
||||
|
||||
const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
|
||||
stream.value = mediaStream
|
||||
|
||||
// Detect actual facing mode to mirror front camera correctly
|
||||
const videoTrack = mediaStream.getVideoTracks()[0]
|
||||
if (videoTrack) {
|
||||
const settings = videoTrack.getSettings()
|
||||
if (settings.facingMode) {
|
||||
isMirrored.value = settings.facingMode === 'user'
|
||||
} else {
|
||||
// Fallback: check label for desktop cameras or assume requested mode
|
||||
const label = videoTrack.label ? videoTrack.label.toLowerCase() : ''
|
||||
if (label.includes('front') || label.includes('facetime') || label.includes('macbook')) {
|
||||
isMirrored.value = true
|
||||
} else {
|
||||
isMirrored.value = facingMode.value === 'user'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = mediaStream
|
||||
return new Promise((resolve) => {
|
||||
videoRef.value.onloadedmetadata = () => {
|
||||
videoRef.value.play().catch(e => console.error('Play error', e))
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.name === 'NotAllowedError') {
|
||||
error.value = 'Camera permission denied'
|
||||
} else if (err.name === 'NotFoundError') {
|
||||
error.value = 'No camera found'
|
||||
} else {
|
||||
error.value = `Camera error: ${err.name}`
|
||||
}
|
||||
throw err // Let caller know it failed
|
||||
}
|
||||
}
|
||||
|
||||
const switchCamera = () => {
|
||||
facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
|
||||
}
|
||||
|
||||
watch(facingMode, () => {
|
||||
if (stream.value) {
|
||||
// Re-start if already running
|
||||
startCamera().catch(() => { })
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopCamera()
|
||||
})
|
||||
|
||||
return {
|
||||
stream,
|
||||
facingMode,
|
||||
hasMultipleCameras,
|
||||
isMirrored,
|
||||
error,
|
||||
checkCameras,
|
||||
startCamera,
|
||||
stopCamera,
|
||||
switchCamera
|
||||
}
|
||||
}
|
||||
174
src/composables/useQrDetection.js
Normal file
174
src/composables/useQrDetection.js
Normal file
@@ -0,0 +1,174 @@
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
export function useQrDetection(videoRef, overlayCanvasRef) {
|
||||
const barcodeDetector = ref(null)
|
||||
const isDetecting = ref(false)
|
||||
const error = ref('')
|
||||
let scanRafId = null
|
||||
|
||||
// Function to initialize detector
|
||||
const initDetector = async () => {
|
||||
if (!barcodeDetector.value) {
|
||||
if ('BarcodeDetector' in window) {
|
||||
try {
|
||||
// Formats are optional, but specifying qr_code might be faster
|
||||
const formats = await window.BarcodeDetector.getSupportedFormats()
|
||||
if (formats.includes('qr_code')) {
|
||||
barcodeDetector.value = new window.BarcodeDetector({ formats: ['qr_code'] })
|
||||
} else {
|
||||
barcodeDetector.value = new window.BarcodeDetector()
|
||||
}
|
||||
} catch (e) {
|
||||
// Fallback
|
||||
barcodeDetector.value = new window.BarcodeDetector()
|
||||
}
|
||||
} else {
|
||||
error.value = 'Barcode Detection API not supported on this device/browser.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const paintDetections = (codes) => {
|
||||
const canvas = overlayCanvasRef.value
|
||||
const video = videoRef.value
|
||||
|
||||
if (!canvas || !video) return
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
const { width, height } = canvas.getBoundingClientRect()
|
||||
|
||||
// Update canvas size if needed (to match CSS size)
|
||||
if (canvas.width !== width || canvas.height !== height) {
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
|
||||
if (!codes || codes.length === 0) return
|
||||
|
||||
const vw = video.videoWidth
|
||||
const vh = video.videoHeight
|
||||
if (!vw || !vh) return
|
||||
|
||||
// Calculate object-fit: cover scaling
|
||||
const videoRatio = vw / vh
|
||||
const canvasRatio = width / height
|
||||
|
||||
let drawWidth, drawHeight, startX, startY
|
||||
|
||||
if (canvasRatio > videoRatio) {
|
||||
// Canvas is wider than video (video cropped top/bottom)
|
||||
drawWidth = width
|
||||
drawHeight = width / videoRatio
|
||||
startX = 0
|
||||
startY = (height - drawHeight) / 2
|
||||
} else {
|
||||
// Canvas is taller than video (video cropped left/right)
|
||||
drawHeight = height
|
||||
drawWidth = height * videoRatio
|
||||
startY = 0
|
||||
startX = (width - drawWidth) / 2
|
||||
}
|
||||
|
||||
const scale = drawWidth / vw
|
||||
// Styles
|
||||
const styles = getComputedStyle(document.documentElement)
|
||||
const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
|
||||
|
||||
ctx.lineWidth = 4
|
||||
ctx.strokeStyle = accent
|
||||
ctx.fillStyle = accent
|
||||
|
||||
codes.forEach(code => {
|
||||
const points = code.cornerPoints
|
||||
if (!points || points.length < 4) return
|
||||
|
||||
ctx.beginPath()
|
||||
|
||||
const transform = (p) => {
|
||||
let x = p.x * scale + startX
|
||||
let y = p.y * scale + startY
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
const p0 = transform(points[0])
|
||||
ctx.moveTo(p0.x, p0.y)
|
||||
|
||||
for (let i = 1; i < points.length; i++) {
|
||||
const p = transform(points[i])
|
||||
ctx.lineTo(p.x, p.y)
|
||||
}
|
||||
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
|
||||
// Draw corners
|
||||
points.forEach(p => {
|
||||
const tp = transform(p)
|
||||
ctx.beginPath()
|
||||
ctx.arc(tp.x, tp.y, 4, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const startDetection = async (onDetectCallback) => {
|
||||
error.value = ''
|
||||
try {
|
||||
await initDetector()
|
||||
if (!barcodeDetector.value) {
|
||||
if (!error.value) error.value = 'Barcode Detector failed to initialize'
|
||||
return
|
||||
}
|
||||
|
||||
isDetecting.value = true
|
||||
|
||||
const detectLoop = async () => {
|
||||
if (!isDetecting.value || !videoRef.value || videoRef.value.paused || videoRef.value.ended) {
|
||||
scanRafId = requestAnimationFrame(detectLoop)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const codes = await barcodeDetector.value.detect(videoRef.value)
|
||||
paintDetections(codes)
|
||||
if (codes.length > 0 && onDetectCallback) {
|
||||
onDetectCallback(codes)
|
||||
}
|
||||
} catch (e) {
|
||||
// Silent catch for intermittent detection frames failing
|
||||
}
|
||||
if (isDetecting.value) {
|
||||
scanRafId = requestAnimationFrame(detectLoop)
|
||||
}
|
||||
}
|
||||
|
||||
detectLoop() // start loop
|
||||
|
||||
} catch (e) {
|
||||
error.value = `Detection error: ${e.message}`
|
||||
}
|
||||
}
|
||||
|
||||
const stopDetection = () => {
|
||||
isDetecting.value = false
|
||||
if (scanRafId) cancelAnimationFrame(scanRafId)
|
||||
// Clear canvas
|
||||
if (overlayCanvasRef.value) {
|
||||
const ctx = overlayCanvasRef.value.getContext('2d')
|
||||
ctx.clearRect(0, 0, overlayCanvasRef.value.width, overlayCanvasRef.value.height)
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopDetection()
|
||||
})
|
||||
|
||||
return {
|
||||
error,
|
||||
isDetecting,
|
||||
startDetection,
|
||||
stopDetection
|
||||
}
|
||||
}
|
||||
115
src/composables/useUrlCleaner.js
Normal file
115
src/composables/useUrlCleaner.js
Normal file
@@ -0,0 +1,115 @@
|
||||
import { useLocalStorage } from './useLocalStorage'
|
||||
|
||||
export function useUrlCleaner() {
|
||||
const cleanedHistory = useLocalStorage('url-cleaner-history', [])
|
||||
const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)
|
||||
|
||||
const defaultExceptions = [
|
||||
{ id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
|
||||
{ id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
|
||||
]
|
||||
const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)
|
||||
|
||||
const matchDomain = (pattern, domain) => {
|
||||
// Escape regex chars except *
|
||||
const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
|
||||
return new RegExp(regexString, 'i').test(domain)
|
||||
}
|
||||
|
||||
const processUrl = (text, autoClipboard = false, writeClipboardFn = null) => {
|
||||
try {
|
||||
// Basic URL validation
|
||||
if (!text.match(/^https?:\/\//i)) {
|
||||
if (autoClipboard) return text
|
||||
}
|
||||
|
||||
const originalLength = text.length
|
||||
let cleanedUrl = text
|
||||
|
||||
try {
|
||||
const urlObj = new URL(text)
|
||||
const hostname = urlObj.hostname
|
||||
|
||||
const matchedRule = exceptions.value.find(rule =>
|
||||
rule.isEnabled && matchDomain(rule.domainPattern, hostname)
|
||||
)
|
||||
|
||||
if (matchedRule) {
|
||||
if (!matchedRule.keepAllParams) {
|
||||
const params = new URLSearchParams(urlObj.search)
|
||||
const keys = Array.from(params.keys())
|
||||
|
||||
for (const key of keys) {
|
||||
if (!matchedRule.keepParams.includes(key)) {
|
||||
params.delete(key)
|
||||
}
|
||||
}
|
||||
urlObj.search = params.toString()
|
||||
}
|
||||
|
||||
if (!matchedRule.keepHash) {
|
||||
urlObj.hash = ''
|
||||
}
|
||||
} else {
|
||||
if (urlObj.search || urlObj.hash) {
|
||||
urlObj.search = ''
|
||||
urlObj.hash = ''
|
||||
}
|
||||
}
|
||||
|
||||
cleanedUrl = urlObj.toString()
|
||||
} catch (e) {
|
||||
return text
|
||||
}
|
||||
|
||||
if (cleanedUrl === text && autoClipboard) {
|
||||
return text
|
||||
}
|
||||
|
||||
const newLength = cleanedUrl.length
|
||||
const savedChars = originalLength - newLength
|
||||
const savedPercent = originalLength > 0 ? Math.round((savedChars / originalLength) * 100) : 0
|
||||
|
||||
const entry = {
|
||||
id: Date.now(),
|
||||
original: text,
|
||||
cleaned: cleanedUrl,
|
||||
savedPercent,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
}
|
||||
|
||||
cleanedHistory.value.unshift(entry)
|
||||
|
||||
if (cleanedHistory.value.length > 50) {
|
||||
cleanedHistory.value.pop()
|
||||
}
|
||||
|
||||
if (autoClipboard && savedChars > 0 && writeClipboardFn) {
|
||||
writeClipboardFn(cleanedUrl)
|
||||
}
|
||||
|
||||
return cleanedUrl
|
||||
} catch (e) {
|
||||
console.error('Error processing URL:', e)
|
||||
return text
|
||||
}
|
||||
}
|
||||
|
||||
const removeEntry = (id) => {
|
||||
cleanedHistory.value = cleanedHistory.value.filter(item => item.id !== id)
|
||||
}
|
||||
|
||||
const clearHistory = () => {
|
||||
cleanedHistory.value = []
|
||||
}
|
||||
|
||||
return {
|
||||
cleanedHistory,
|
||||
isWatchEnabled,
|
||||
exceptions,
|
||||
defaultExceptions,
|
||||
processUrl,
|
||||
removeEntry,
|
||||
clearHistory
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user