Focus Mode for Social Media

block time-wasting social media & other

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

// ==UserScript==
// @name        Focus Mode for Social Media
// @namespace   Violentmonkey Scripts
// @include     https://twitter.com/home
// @include     https://www.youtube.com*
// @include     https://www.instagram.com/
// @include     https://github.com/
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_deleteValue
// @grant       GM_registerMenuCommand
// @grant       GM_unregisterMenuCommand
// @grant       GM_addStyle
// @grant       GM_xmlhttpRequest
// @version     2.1
// @license     MIT
// @author      KraXen72
// @description block time-wasting social media & other
// ==/UserScript==

const getStylesheetUrl = (hostname) => `https://kraxen72.github.io/focus-stylesheets/${hostname}.css`
const site = window.location.hostname
let styleSheetCSS = "";

// const resetSeconds = 30*60
const resetSeconds = 30*10

class Toggle {
  constructor(css, uuid, initialValue = true) {
    if (!css) throw new Error("Please provide CSS to inject!");
    this.css = css
    this.state = GM_getValue(`${site}_state`, initialValue)
    this.disabledTimestamp = GM_getValue(`${site}_disabled_timestamp`, -1)
    this.styleTag = null
    this.menuCommand = false;
    this.menuCommandId = uuid

    this.attemptReenable()
    this.sync()
  }
  enable() {
    this.state = true
    this.disabledTimestamp = -1

    this.sync()
  }
  disable() {
    this.state = false
    this.disabledTimestamp = new Date().getTime()

    this.sync()
  }
  toggle() {
    if (this.state) {
      this.disable()
    } else {
      this.enable()
    }
  }
  attemptReenable() {
    if (this.state) return;
    // if disabled but timestamp is -1, enable it to fix the edge-case.
    if ((new Date().getTime() - this.disabledTimestamp) <= resetSeconds*1000 && this.disabledTimestamp !== -1) {
      console.log("focusMode: resetSeconds has not elapsed yet")
      return;
    }
    console.log("focusMode: resetSeconds has elapsed, enabling.")
    this.state = true;
    this.disabledTimestamp = -1

    this.sync()
  }
  updateCSS() {
    if (this.state) {
      if (!this.styleTag) this.styleTag = GM_addStyle(this.css)
    } else {
      if (this.styleTag) this.styleTag.remove();
      this.styleTag = null
    }
  }
  saveData() {
    GM_setValue(`${site}_state`, this.state)
    if (this.disabledTimestamp === -1) {
      GM_deleteValue(`${site}_disabled_timestamp`)
    } else {
      GM_setValue(`${site}_disabled_timestamp`, this.disabledTimestamp)
    }
  }
  updateMenuCommand() {
    const caption = `focusMode: ${site}: ${this.state ? '✅' : '❌'}`
    if (this.menuCommand) {
      GM_unregisterMenuCommand(this.menuCommandId)
    }
    GM_registerMenuCommand(caption, () => this.toggle.apply(this), { id: this.menuCommandId })
    this.menuCommand = true;
  }
  sync() {
    this.saveData()
    this.updateCSS()
    this.updateMenuCommand()
  }
}

function sameDay(date1, date2) {
  return date1.getFullYear() === date2.getFullYear()
    && date1.getMonth() === date2.getMonth()
    && date1.getDate() === date2.getDate();
}

function zeropad(number, finalWidth, customCharacter) {
    customCharacter = customCharacter || '0';
    number = number + '';
    return number.length >= finalWidth ? number : new Array(finalWidth - number.length + 1).join(customCharacter) + number;
}

let togggleInstance;

function init() {
  new Promise(async (res, rej) => {
    const lastFetchDate = new Date(GM_getValue("lastFetchDate", null))
    const currDate = new Date()
    const fetchedToday = sameDay(lastFetchDate, currDate)

    const storedCSS = GM_getValue("css_"+site, null)
    console.log(lastFetchDate, currDate)

    if (fetchedToday && storedCSS) {
      console.log("focusMode: already fetched today and found stored css. not fetching.")
      res(storedCSS)
    } else {
      const data = await new Promise((resolve, reject) => GM_xmlhttpRequest({
        url: getStylesheetUrl(site),
        method: 'GET',
        onabort: () => resolve(GM_getValue("css_"+site, "")),
        onerror: () => resolve(GM_getValue("css_"+site, "")),
        onload: (response) => resolve(response.responseText)
      }))

      console.log(`focusMode: fetched updated css for ${site}`)
      GM_setValue("lastFetchDate", new Date().toDateString())
      GM_setValue("css_"+site, resText)
      res(data)
    }
  }).then(data => {
    let currDate = new Date()

    if (site === "www.youtube.com") {
      console.log("focusMode: yt override kicking in...")
      data = data.replaceAll("%focus%", (currDate.getHours() <= 6) ? `bro go to sleep please it's ${zeropad(currDate.getHours(), 2)}:${zeropad(currDate.getMinutes(), 2)}am` : "focus")
    }

    if (typeof toggleInstance === "undefined") {
      toggleInstance = new Toggle(data, btoa(Math.round(Math.random()*100)));
    }
    toggleInstance.attemptReenable();
    console.log("focusMode: initialized", toggleInstance, data)
  })
}

let lastUrl = window.location.href;
new MutationObserver(() => {
    const currentUrl = window.location.href;
    if (currentUrl !== lastUrl) {
      lastUrl = currentUrl;
      init();
      setTimeout(() => { if (typeof toggleInstance !== "undefined") toggleInstance.sync(); }, 0);
    }
}).observe(document, { childList: true, subtree: true });

init();