Rupert Beatty

Rupert Beatty

1667392740

Tool for Detecting The Current Device and Screen Size Written in Swift

Device

Device detect the current  device model and screen size.

Installation

CocoaPods

Device is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "Device", '~> 3.3.0'

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate Device into your Xcode project using Carthage, specify it in your Cartfile:

github "Ekhoo/Device" ~> 3.3.0

Run carthage update to build the framework and drag the built Device.framework into your Xcode project.

Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler.

Once you have your Swift package set up, adding Device as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/Ekhoo/Device.git", from: "3.3.0")
]

Usage

iOS

Device version

func myFunc() {
        /*** Display the device version ***/
        switch Device.version() {
            /*** iPhone ***/
            case .iPhone4:       print("It's an iPhone 4")
            case .iPhone4S:      print("It's an iPhone 4S")
            case .iPhone5:       print("It's an iPhone 5")
            case .iPhone5C:      print("It's an iPhone 5C")
            case .iPhone5S:      print("It's an iPhone 5S")
            case .iPhone6:       print("It's an iPhone 6")
            case .iPhone6S:      print("It's an iPhone 6S")
            case .iPhone6Plus:   print("It's an iPhone 6 Plus")
            case .iPhone6SPlus:  print("It's an iPhone 6 S Plus")
            case .iPhoneSE:      print("It's an iPhone SE")
            case .iPhone7:       print("It's an iPhone 7")
            case .iPhone7Plus:   print("It's an iPhone 7 Plus")
            case .iPhone8:       print("It's an iPhone 8")
            case .iPhone8Plus:   print("It's an iPhone 8 Plus")
            case .iPhoneX:       print("It's an iPhone X")
            case .iPhoneXS:      print("It's an iPhone Xs")
            case .iPhoneXS_Max:  print("It's an iPhone Xs Max")
            case .iPhoneXR:      print("It's an iPhone Xr")

            /*** iPad ***/
            case .iPad1:           print("It's an iPad 1")
            case .iPad2:           print("It's an iPad 2")
            case .iPad3:           print("It's an iPad 3")
            case .iPad4:           print("It's an iPad 4")
            case .iPad5:           print("It's an iPad 5")
            case .iPad6:           print("It's an iPad 6")
            case .iPadAir:         print("It's an iPad Air")
            case .iPadAir2:        print("It's an iPad Air 2")
            case .iPadMini:        print("It's an iPad Mini")
            case .iPadMini2:       print("It's an iPad Mini 2")
            case .iPadMini3:       print("It's an iPad Mini 3")
            case .iPadMini4:       print("It's an iPad Mini 4")
            case .iPadPro9_7Inch:  print("It's an iPad Pro 9.7 Inch")
            case .iPadPro10_5Inch: print("It's an iPad Pro 10.5 Inch")
            case .iPadPro12_9Inch: print("It's an iPad Pro 12.9 Inch")

            /*** iPod ***/
            case .iPodTouch1Gen: print("It's a iPod touch generation 1")
            case .iPodTouch2Gen: print("It's a iPod touch generation 2")
            case .iPodTouch3Gen: print("It's a iPod touch generation 3")
            case .iPodTouch4Gen: print("It's a iPod touch generation 4")
            case .iPodTouch5Gen: print("It's a iPod touch generation 5")
            case .iPodTouch6Gen: print("It's a iPod touch generation 6")

            /*** Simulator ***/
            case .Simulator:    print("It's a Simulator")

            /*** Unknown ***/
            default:            print("It's an unknown device")
        }
    }

Device screen size

func myFunc() {
        /*** Display the device screen size ***/
        switch Device.size() {
            case .screen3_5Inch:  print("It's a 3.5 inch screen")
            case .screen4Inch:    print("It's a 4 inch screen")
            case .screen4_7Inch:  print("It's a 4.7 inch screen")
            case .screen5_5Inch:  print("It's a 5.5 inch screen")
            case .screen5_8Inch:  print("It's a 5.8 inch screen")
            case .screen6_1Inch:  print("It's a 6.1 inch screen")
            case .screen6_5Inch:  print("It's a 6.8 inch screen")
            case .screen7_9Inch:  print("It's a 7.9 inch screen")
            case .screen9_7Inch:  print("It's a 9.7 inch screen")
            case .screen10_5Inch: print("It's a 10.5 inch screen")
            case .screen12_9Inch: print("It's a 12.9 inch screen")
            default:              print("Unknown size")
        }
}

Device type

func myFunc() {
        /*** Display the device type ***/
        switch Device.type() {
            case .iPod:         print("It's an iPod")
            case .iPhone:       print("It's an iPhone")
            case .iPad:         print("It's an iPad")
            case .Simulator:    print("It's a Simulated device")
            default:            print("Unknown device type")
        }
}

or

func myFunc() {
        /*** Display the device type ***/
        if (Device.isPad()){
            print("It's an iPad")
        }
        else if (Device.isPhone()){
            print("It's an iPhone")
        }
        else if (Device.isPod()){
            print("It's an iPod")
        }
        else if (Device.isSimulator()){
            print("It's a Simulated device")
        }
}

Mac

Mac version

func myFunc() {
        /*** Display the mac version ***/
        switch Device.type() {
            case .iMac:         print("It's an iMac")
            case .macBook:      print("It's a MacBook")
            case .macBookAir:   print("It's a MacBook Air")
            case .macBookPro:   print("It's a MacBook Pro")
            default:            print("Unknown device type")
        }
    }

Mac screen size

func myFunc() {
        /*** Display the mac screen size ***/
        switch Device.size() {
            case .screen11Inch:     print("It's a 11 inch screen")
            case .screen12Inch:     print("It's a 12 inch screen")
            case .screen13Inch:     print("It's a 13 inch screen")
            case .screen15Inch:     print("It's a 15 inch screen")
            case .screen17Inch:     print("It's a 17 inch screen")
            case .screen21_5Inch:   print("It's a 21.5 inch screen")
            case .screen27Inch:     print("It's a 27 inch screen")
            default:                print("Unknown size")
        }
}

Helpers

func myFunc() {
        /*** Helpers ***/
        if Device.size() == Size.screen4Inch {
            print("It's a 4 inch screen")
        }

        if Device.size() > Size.screen4_7Inch {
            print("Your device screen is larger than 4.7 inch")
        }

        if Device.size() < Size.screen4_7Inch {
            print("Your device screen is smaller than 4.7 inch")
        }

        if Device.size() == Size.screen27Inch {
            print("It's a 27 inch screen")
        }
        
        if Device.size() > Size.screen15Inch {
            print("Your mac screen is larger than 15 inch")
        }
        
        if Device.size() < Size.screen15Inch {
            print("Your mac screen is smaller than 15 inch")
        }

        if Device.isRetina() {
            print("It's a retina display")
        }
        
}

Download Details:

Author: Ekhoo
Source Code: https://github.com/Ekhoo/Device 
License: MIT license

#swift #macos #ios #xcode 

What is GEEK

Buddha Community

Tool for Detecting The Current Device and Screen Size Written in Swift
Sean Wade

Sean Wade

1657785244

How to Create a Custom Video Player with HTML, CSS & Javascript

Create a custom video player using HTML, CSS and Javascript.

In today’s tutorial, we will learn how to create a Custom Video Player. To build this project, we need HTML, CSS and Javascript.

00:00 Intro
00:05 Preview
02:58 HTML & CSS
35:26 Step 1: Create Initial References
45:46 Step 2: Implement slider() For Volume
51:33 Step 3: Detect Device Type
57:27 Step 4: Implement Functionality For Play & Pause Button
01:03:04 Step 5: Hide/ Show Playback Speed Options
01:08:47 Step 6: Function To Set Playback Speed.
01:12:59 Step 7: Function To Mute Video
01:18:24 Step 8: Function To Set Volume
01:24:55 Step 9: Function To Set Fullscreen
01:31:47 Step 10: Function To Exit Fullscreen
01:40:08 Step 11: Function To Format Current Time & Total Time
01:44:46 Step 12: Function To Update Progress & Timer
01:50:13 Step 13: Implement Click Event On Progress Bar
01:57:26 Step 14: Function On Window Load

Project Folder Structure:

Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Custom Video Player’. Inside this folder, we have three files. The first file is index.html which is the HTML document. Next, we have style.css which is the stylesheet. Finally, we have script.js which is the script file.

HTML:

We start with the HTML code. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Video Player</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="rotate-container hide">
        <div id="rotate-icon">
          <i class="fa-solid fa-rotate-left"></i>
          <p>Rotate for a better experience</p>
        </div>
      </div>
      <div class="video-container" id="video-container">
        <video id="my-video" preload="metadata">
          <source
            src="https://dl.dropbox.com/s/l90y72zm97ayzhx/my%20video.mp4?raw=1"
            type="video/mp4"
          />
          Your browser does not support the video tag
        </video>
        <div class="controls" id="controls">
          <div class="progress-container flex-space">
            <div id="progress-bar">
              <div id="current-progress"></div>
            </div>
            <div class="song-timer">
              <span id="current-time">00:00</span>
              <span>/</span>
              <span id="max-duration">00:00</span>
            </div>
          </div>
          <div id="video-controls" class="video-controls flex-space">
            <div class="container-1 flex">
              <div>
                <!-- Play video -->
                <button id="play-btn" class="control-btn">
                  <i class="fa-solid fa-play"></i>
                </button>
                <!-- Pause video-->
                <button id="pauseButton" class="control-btn hide">
                  <i class="fa-solid fa-pause"></i>
                </button>
              </div>
              <!-- volume of video-->
              <div id="volume" class="volume flex">
                <span id="high">
                  <i class="fa-solid fa-volume-high"></i>
                </span>
                <span class="hide" id="low">
                  <i class="fa-solid fa-volume-low"></i>
                </span>
                <span class="hide" id="mute">
                  <i class="fa-solid fa-volume-xmark"></i>
                </span>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value="50"
                  id="volume-range"
                  oninput="slider()"
                />
                <span id="volume-num">50</span>
              </div>
            </div>
            <div class="container-2 flex-space">
              <div class="playback">
                <button id="playback-speed-btn">1x</button>
                <div class="playback-options hide">
                  <button onclick="setPlayback(0.5)">0.5</button>
                  <button onclick="setPlayback(1.0)">1</button>
                  <button onclick="setPlayback(2.0)">2</button>
                </div>
              </div>
              <!-- screen size -->
              <div id="size-screen">
                <button id="screen-expand">
                  <i class="fa-solid fa-expand"></i>
                </button>
                <button id="screen-compress" class="hide">
                  <i class="fa-solid fa-compress"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style our video player using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  color: #ffffff;
  font-family: "Roboto Mono", monospace;
}
body {
  background-color: #2887e3;
}
.flex {
  display: flex;
}
.flex-space {
  display: flex;
  justify-content: space-between;
}
.container {
  padding: 1em 0;
}
#my-video {
  width: 100%;
}
.rotate-container {
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
#rotate-icon {
  display: flex;
  flex-direction: column;
  color: #dddddd;
  text-align: center;
}
.hide {
  display: none;
}
.video-container {
  width: 60%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  box-shadow: 20px 30px 50px rgba(0, 0, 0, 0.2);
}
.controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(35, 34, 39, 0.8);
}
.progress-container {
  align-items: center;
  padding: 0 0.5em;
}
.video-controls {
  flex-direction: row;
  align-items: center;
}
#progress-bar {
  position: relative;
  width: 75%;
  height: 5px;
  background-color: #000000;
  margin: 1em 0;
  vertical-align: 2px;
  border-radius: 5px;
  cursor: pointer;
}
.song-timer {
  font-size: 0.8em;
  width: 25%;
  text-align: right;
}
#current-progress {
  position: absolute;
  left: 0;
  display: inline-block;
  height: 5px;
  width: 0;
  background: #2887e3;
  border-radius: 5px;
}
#current-progress:after {
  content: "";
  position: absolute;
  left: calc(100% - 1.5px);
  top: -2.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
}
.playback {
  position: relative;
}
.control-btn,
#screen-expand,
#screen-compress {
  width: 3em;
  height: 3em;
  outline: none;
  border: none;
  background-color: transparent;
}
#size-screen {
  margin-left: auto;
}
.volume {
  align-items: center;
  margin-left: 0.6em;
}
#volume-range {
  position: relative;
  margin: 0 0.5em;
  cursor: pointer;
  height: 5px;
  -webkit-appearance: none;
  background-color: #000000;
  border-radius: 5px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  background-color: #2887e3;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.fa-solid {
  font-size: 1.1rem;
}
.container-2 {
  width: 10%;
  min-width: 70px;
  align-items: center;
}
#playback-speed-btn {
  position: relative;
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 0.9rem;
  border-radius: 5px;
  padding: 0.3em 0.25em;
  cursor: pointer;
}
.playback-options {
  position: absolute;
  bottom: 0;
  background-color: #000000;
  min-width: 5em;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.playback-options button {
  color: #ffffff;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  background-color: transparent;
  padding: 1em;
  text-decoration: none;
  display: block;
}
@media all and (display-mode: fullscreen) {
  .container {
    padding: 0;
  }
  .video-container {
    width: 100%;
    margin: 0;
  }
  .controls {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  #progress-bar {
    width: 80%;
  }
  .song-timer {
    width: 20%;
    font-size: 1.2em;
  }
  .fa-solid {
    color: #dddddd;
  }
}

@media only screen and (max-width: 768px) {
  .video-container,
  .controls {
    width: 100%;
  }
  span {
    display: inline;
  }
  #progress-bar {
    width: 60%;
  }
  .song-timer {
    width: 40%;
    font-size: 0.9em;
  }
  .fa-solid {
    font-size: 1rem;
  }
  .control-btn,
  #screen-expand,
  #screen-compress {
    width: 2em;
    height: 1.5em;
  }
}
@media only screen and (max-width: 768px) and (display-mode: fullscreen) {
  .video-container {
    margin-top: 50%;
  }
}

Javascript:

Lastly, we add functionality to our custom video player using Javascript. Once again copy the code below and paste it into your script file.
We do this in fourteen steps:
Create initial references.
Implement slider()
Detect device type.
Implement functionality for the play and pause button.
Hide/Show playback speed options
Function to set playback speed.
Logic to mute video.
Function to set Fullscreen.
Function to exit Fullscreen.
Create a function to format the current time & maximum time.
Create a function to update progress & timer.
Implement a click event on the progress bar.
Function on window load.

let videoContainer = document.querySelector(".video-container");
let container = document.querySelector(".container");
let myVideo = document.getElementById("my-video");
let rotateContainer = document.querySelector(".rotate-container");
let videoControls = document.querySelector(".controls");
let playButton = document.getElementById("play-btn");
let pauseButton = document.getElementById("pauseButton");
let volume = document.getElementById("volume");
let volumeRange = document.getElementById("volume-range");
let volumeNum = document.getElementById("volume-num");
let high = document.getElementById("high");
let low = document.getElementById("low");
let mute = document.getElementById("mute");
let sizeScreen = document.getElementById("size-screen");
let screenCompress = document.getElementById("screen-compress");
let screenExpand = document.getElementById("screen-expand");
const currentProgress = document.getElementById("current-progress");
const currentTimeRef = document.getElementById("current-time");
const maxDuration = document.getElementById("max-duration");
const progressBar = document.getElementById("progress-bar");
const playbackSpeedButton = document.getElementById("playback-speed-btn");
const playbackContainer = document.querySelector(".playback");
const playbackSpeedOptions = document.querySelector(".playback-options");

function slider() {
  valPercent = (volumeRange.value / volumeRange.max) * 100;
  volumeRange.style.background = `linear-gradient(to right, #2887e3 ${valPercent}%, #000000 ${valPercent}%)`;
}

//events object
let events = {
  mouse: {
    click: "click",
  },
  touch: {
    click: "touchstart",
  },
};

let deviceType = "";

//Detech touch device
const isTouchDevice = () => {
  try {
    //We try to create TouchEvent (it would fail for desktops and throw error)
    document.createEvent("TouchEvent");
    deviceType = "touch";
    return true;
  } catch (e) {
    deviceType = "mouse";
    return false;
  }
};

//play and pause button
playButton.addEventListener("click", () => {
  myVideo.play();
  pauseButton.classList.remove("hide");
  playButton.classList.add("hide");
});

pauseButton.addEventListener(
  "click",
  (pauseVideo = () => {
    myVideo.pause();
    pauseButton.classList.add("hide");
    playButton.classList.remove("hide");
  })
);

//playback
playbackContainer.addEventListener("click", () => {
  playbackSpeedOptions.classList.remove("hide");
});

//if user clicks outside or on the option
window.addEventListener("click", (e) => {
  if (!playbackContainer.contains(e.target)) {
    playbackSpeedOptions.classList.add("hide");
  } else if (playbackSpeedOptions.contains(e.target)) {
    playbackSpeedOptions.classList.add("hide");
  }
});

//playback speed
const setPlayback = (value) => {
  playbackSpeedButton.innerText = value + "x";
  myVideo.playbackRate = value;
};

//mute video
const muter = () => {
  mute.classList.remove("hide");
  high.classList.add("hide");
  low.classList.add("hide");
  myVideo.volume = 0;
  volumeNum.innerHTML = 0;
  volumeRange.value = 0;
  slider();
};

//when user click on high and low volume then mute the audio
high.addEventListener("click", muter);
low.addEventListener("click", muter);

//for volume
volumeRange.addEventListener("input", () => {
  //for converting % to decimal values since video.volume would accept decimals only
  let volumeValue = volumeRange.value / 100;
  myVideo.volume = volumeValue;
  volumeNum.innerHTML = volumeRange.value;
  //mute icon, low volume, high volume icons
  if (volumeRange.value < 50) {
    low.classList.remove("hide");
    high.classList.add("hide");
    mute.classList.add("hide");
  } else if (volumeRange.value > 50) {
    low.classList.add("hide");
    high.classList.remove("hide");
    mute.classList.add("hide");
  }
});

//Screen size
screenExpand.addEventListener("click", () => {
  screenCompress.classList.remove("hide");
  screenExpand.classList.add("hide");
  videoContainer
    .requestFullscreen()
    .catch((err) => alert("Your device doesn't support full screen API"));
  if (isTouchDevice) {
    let screenOrientation =
      screen.orientation || screen.mozOrientation || screen.msOrientation;
    if (screenOrientation.type == "portrait-primary") {
      //update styling for fullscreen
      pauseVideo();
      rotateContainer.classList.remove("hide");
      const myTimeout = setTimeout(() => {
        rotateContainer.classList.add("hide");
      }, 3000);
    }
  }
});

//if user presses escape the browser fire 'fullscreenchange' event
document.addEventListener("fullscreenchange", exitHandler);
document.addEventListener("webkitfullscreenchange", exitHandler);
document.addEventListener("mozfullscreenchange", exitHandler);
document.addEventListener("MSFullscreenchange", exitHandler);

function exitHandler() {
  //if fullscreen is closed
  if (
    !document.fullscreenElement &&
    !document.webkitIsFullScreen &&
    !document.mozFullScreen &&
    !document.msFullscreenElement
  ) {
    normalScreen();
  }
}

//back to normal screen
screenCompress.addEventListener(
  "click",
  (normalScreen = () => {
    screenCompress.classList.add("hide");
    screenExpand.classList.remove("hide");
    if (document.fullscreenElement) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
  })
);

//Format time
const timeFormatter = (timeInput) => {
  let minute = Math.floor(timeInput / 60);
  minute = minute < 10 ? "0" + minute : minute;
  let second = Math.floor(timeInput % 60);
  second = second < 10 ? "0" + second : second;
  return `${minute}:${second}`;
};

//Update progress every second
setInterval(() => {
  currentTimeRef.innerHTML = timeFormatter(myVideo.currentTime);
  currentProgress.style.width =
    (myVideo.currentTime / myVideo.duration.toFixed(3)) * 100 + "%";
}, 1000);

//update timer
myVideo.addEventListener("timeupdate", () => {
  currentTimeRef.innerText = timeFormatter(myVideo.currentTime);
});

//If user click on progress bar
isTouchDevice();
progressBar.addEventListener(events[deviceType].click, (event) => {
  //start of progressbar
  let coordStart = progressBar.getBoundingClientRect().left;
  //mouse click position
  let coordEnd = !isTouchDevice() ? event.clientX : event.touches[0].clientX;
  let progress = (coordEnd - coordStart) / progressBar.offsetWidth;
  //set width to progress
  currentProgress.style.width = progress * 100 + "%";
  //set time
  myVideo.currentTime = progress * myVideo.duration;
  //play
  myVideo.play();
  pauseButton.classList.remove("hide");
  playButton.classList.add("hide");
});

window.onload = () => {
  //display duration
  myVideo.onloadedmetadata = () => {
    maxDuration.innerText = timeFormatter(myVideo.duration);
  };
  slider();
};

That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking the ‘Download Code’ 

📁 Download Source Code : https://www.codingartistweb.com

#html #css #javascript #webdev 

Rupert Beatty

Rupert Beatty

1667392740

Tool for Detecting The Current Device and Screen Size Written in Swift

Device

Device detect the current  device model and screen size.

Installation

CocoaPods

Device is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "Device", '~> 3.3.0'

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate Device into your Xcode project using Carthage, specify it in your Cartfile:

github "Ekhoo/Device" ~> 3.3.0

Run carthage update to build the framework and drag the built Device.framework into your Xcode project.

Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler.

Once you have your Swift package set up, adding Device as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/Ekhoo/Device.git", from: "3.3.0")
]

Usage

iOS

Device version

func myFunc() {
        /*** Display the device version ***/
        switch Device.version() {
            /*** iPhone ***/
            case .iPhone4:       print("It's an iPhone 4")
            case .iPhone4S:      print("It's an iPhone 4S")
            case .iPhone5:       print("It's an iPhone 5")
            case .iPhone5C:      print("It's an iPhone 5C")
            case .iPhone5S:      print("It's an iPhone 5S")
            case .iPhone6:       print("It's an iPhone 6")
            case .iPhone6S:      print("It's an iPhone 6S")
            case .iPhone6Plus:   print("It's an iPhone 6 Plus")
            case .iPhone6SPlus:  print("It's an iPhone 6 S Plus")
            case .iPhoneSE:      print("It's an iPhone SE")
            case .iPhone7:       print("It's an iPhone 7")
            case .iPhone7Plus:   print("It's an iPhone 7 Plus")
            case .iPhone8:       print("It's an iPhone 8")
            case .iPhone8Plus:   print("It's an iPhone 8 Plus")
            case .iPhoneX:       print("It's an iPhone X")
            case .iPhoneXS:      print("It's an iPhone Xs")
            case .iPhoneXS_Max:  print("It's an iPhone Xs Max")
            case .iPhoneXR:      print("It's an iPhone Xr")

            /*** iPad ***/
            case .iPad1:           print("It's an iPad 1")
            case .iPad2:           print("It's an iPad 2")
            case .iPad3:           print("It's an iPad 3")
            case .iPad4:           print("It's an iPad 4")
            case .iPad5:           print("It's an iPad 5")
            case .iPad6:           print("It's an iPad 6")
            case .iPadAir:         print("It's an iPad Air")
            case .iPadAir2:        print("It's an iPad Air 2")
            case .iPadMini:        print("It's an iPad Mini")
            case .iPadMini2:       print("It's an iPad Mini 2")
            case .iPadMini3:       print("It's an iPad Mini 3")
            case .iPadMini4:       print("It's an iPad Mini 4")
            case .iPadPro9_7Inch:  print("It's an iPad Pro 9.7 Inch")
            case .iPadPro10_5Inch: print("It's an iPad Pro 10.5 Inch")
            case .iPadPro12_9Inch: print("It's an iPad Pro 12.9 Inch")

            /*** iPod ***/
            case .iPodTouch1Gen: print("It's a iPod touch generation 1")
            case .iPodTouch2Gen: print("It's a iPod touch generation 2")
            case .iPodTouch3Gen: print("It's a iPod touch generation 3")
            case .iPodTouch4Gen: print("It's a iPod touch generation 4")
            case .iPodTouch5Gen: print("It's a iPod touch generation 5")
            case .iPodTouch6Gen: print("It's a iPod touch generation 6")

            /*** Simulator ***/
            case .Simulator:    print("It's a Simulator")

            /*** Unknown ***/
            default:            print("It's an unknown device")
        }
    }

Device screen size

func myFunc() {
        /*** Display the device screen size ***/
        switch Device.size() {
            case .screen3_5Inch:  print("It's a 3.5 inch screen")
            case .screen4Inch:    print("It's a 4 inch screen")
            case .screen4_7Inch:  print("It's a 4.7 inch screen")
            case .screen5_5Inch:  print("It's a 5.5 inch screen")
            case .screen5_8Inch:  print("It's a 5.8 inch screen")
            case .screen6_1Inch:  print("It's a 6.1 inch screen")
            case .screen6_5Inch:  print("It's a 6.8 inch screen")
            case .screen7_9Inch:  print("It's a 7.9 inch screen")
            case .screen9_7Inch:  print("It's a 9.7 inch screen")
            case .screen10_5Inch: print("It's a 10.5 inch screen")
            case .screen12_9Inch: print("It's a 12.9 inch screen")
            default:              print("Unknown size")
        }
}

Device type

func myFunc() {
        /*** Display the device type ***/
        switch Device.type() {
            case .iPod:         print("It's an iPod")
            case .iPhone:       print("It's an iPhone")
            case .iPad:         print("It's an iPad")
            case .Simulator:    print("It's a Simulated device")
            default:            print("Unknown device type")
        }
}

or

func myFunc() {
        /*** Display the device type ***/
        if (Device.isPad()){
            print("It's an iPad")
        }
        else if (Device.isPhone()){
            print("It's an iPhone")
        }
        else if (Device.isPod()){
            print("It's an iPod")
        }
        else if (Device.isSimulator()){
            print("It's a Simulated device")
        }
}

Mac

Mac version

func myFunc() {
        /*** Display the mac version ***/
        switch Device.type() {
            case .iMac:         print("It's an iMac")
            case .macBook:      print("It's a MacBook")
            case .macBookAir:   print("It's a MacBook Air")
            case .macBookPro:   print("It's a MacBook Pro")
            default:            print("Unknown device type")
        }
    }

Mac screen size

func myFunc() {
        /*** Display the mac screen size ***/
        switch Device.size() {
            case .screen11Inch:     print("It's a 11 inch screen")
            case .screen12Inch:     print("It's a 12 inch screen")
            case .screen13Inch:     print("It's a 13 inch screen")
            case .screen15Inch:     print("It's a 15 inch screen")
            case .screen17Inch:     print("It's a 17 inch screen")
            case .screen21_5Inch:   print("It's a 21.5 inch screen")
            case .screen27Inch:     print("It's a 27 inch screen")
            default:                print("Unknown size")
        }
}

Helpers

func myFunc() {
        /*** Helpers ***/
        if Device.size() == Size.screen4Inch {
            print("It's a 4 inch screen")
        }

        if Device.size() > Size.screen4_7Inch {
            print("Your device screen is larger than 4.7 inch")
        }

        if Device.size() < Size.screen4_7Inch {
            print("Your device screen is smaller than 4.7 inch")
        }

        if Device.size() == Size.screen27Inch {
            print("It's a 27 inch screen")
        }
        
        if Device.size() > Size.screen15Inch {
            print("Your mac screen is larger than 15 inch")
        }
        
        if Device.size() < Size.screen15Inch {
            print("Your mac screen is smaller than 15 inch")
        }

        if Device.isRetina() {
            print("It's a retina display")
        }
        
}

Download Details:

Author: Ekhoo
Source Code: https://github.com/Ekhoo/Device 
License: MIT license

#swift #macos #ios #xcode 

Seamus Quitzon

Seamus Quitzon

1594682206

Laravel detect mobile device and redirect mobile website htaccess

In this article, i will let you know laravel detect mobile device and redirect mobile website. So let’s see how can we detect mobile device and redirect website to the mobile website.

A web application can be open on desktops, laptops, tablets and mobiles. But a large application should be optimized for all devices means if we open it on desktop, there might be heavy resources used that would be not compatible for mobile devices. So we can redirect this website to mobile website or mobile freindly website. We generally see that if we open a website on mobile device, it redirects to like http://m.domain.com.

Here, in this article we will see two seperate example to implement this. First one would be using .htaccess file and second one is using laravel route.

Example 1: Using .htaccess file

For detacting mobile device and redirect to the mobile website, we will need to create a .htaccess file on root directory of application. So create this .htaccess file and update the following lines of code.

RewriteEngine On
RewriteCond %{QUERY_STRING} !^desktop
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|iphone|ipod|#opera mobile|palmos|webos" [NC]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteRule ^$ http://m.domain.com [L,R=302]

Example 2: Using Laravel Routes

After doing this through .htaccess, we can also detect mobile device and redirect to mobile site using laravel routes.

For doing this, we will need to create laravel routes and will need to add some lines of code to do this as written below.

function isMobile() {
    if(isset($_SERVER['HTTP_USER_AGENT'])) {
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    if(preg_match('/(tablet|ipad|amazon|playbook)|(android(?!.*(mobi|opera mini)))/i', strtolower($useragent))) {
        return true ;
    } ;

    if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){
            return true ;
        }
    }
    return 0 ;
}
if(isMobile()) {
    include_once(app_path().'/routes/mobile_routes.php');
} else {
    require_once(app_path().'/routes/website_routes.php');
}

From both of the above methods, we can detect mobile device and redirect to their specific version of website. You can choose any of these two methods.

#laravel #detect devices in laravel #how to detect mobile device in laravel #how to redirect to a mobile device #laravel detect mobile device and redirect mobile website htaccess #laravel mobile redirection

Houston Sipes

Houston Sipes

1600430400

10 Free Online Resources To Learn Swift Language

Swift is a fast and efficient general-purpose programming language that provides real-time feedback and can be seamlessly incorporated into existing Objective-C code. This is why developers are able to write safer, more reliable code while saving time. It aims to be the best language that can be used for various purposes ranging from systems programming to mobile as well as desktop apps and scaling up to cloud services.

Below here, we list down the 10 best online resources to learn Swift language.

(The list is in no particular order)

#developers corner #free online resources to learn swift language #learn swift #learn swift free #learn swift online free #resources to learn swift #swift language #swift programming

TopDevelopers Co

TopDevelopers Co

1609999986

Top Swift Development Companies | Top Swift Developers - TopDevelopers.co

A thoroughly researched list of top Swift developers with ratings & reviews to help find the best Swift development companies around the world.

#swift development service providers #best swift development companies #top swift development companies #swift development solutions #top swift developers #swift